Blogger

【JavaScriptの文字列】概要から連結・結合まで基礎まとめ

2021年7月12日

【JavaScriptの文字列】概要から連結・結合まで基礎まとめ
  • 「JavaScriptの文字列について知りたい」

この記事はそんな方へ向けて書いています。

 この記事でわかること

  • JavaScriptの文字列の概要
  • JavaScriptの文字列の連結・結合

 本記事の信頼性

  • 2021年6月からWebデザインの職業訓練校で学習中(6ヶ月コース)
  • 使用テキスト:「HTML&CSS、JavaScriptのきほんのきほん
  • ブログ歴:2019年1月にWordPressで当ブログを開設(月間最高62,000PV、52,000円)

本記事では、職業訓練校で学んだJavaScriptについてまとめました。
この記事を読むことで、JavaScriptの文字列の基礎理解ができます。

JavaScriptの基礎部分です。

JavaScriptの文字列の概要

JavaScriptの文字列の概要

文字列の概要

文字のことです。
'(シングルクォート)もしくは" (ダブルクォート)でくくり、記述します。

実際に記述してみます。

index.html

<script>
 const mozi = 'おはようございます。';  //半角セミコロン、全角にならないように注意
 const sukinamozi = 'ヤッホー';
 console.log(mozi);
 console.log(sukinamozi);
</script>

変数moziを作成して、文字列「おはようございます。」を代入。
変数sukinamoziを作成して、文字列「ヤッホー」を代入。
なお、変数名はなんでもOK、記号はNG。

それぞれの変数を開発者ツールに出力してみます。
出力結果は以下のとおり。

おはようございます。
ヤッホー

メモ:変数名のつけ方のルール

  • 1文字目はアルファベットかアンダースコア(_)、ドル記号($)
  • 2文字目以降は、上記に加えて数字も使える
  • 大文字、小文字は利用できるが区別されるので「blog」と「Blog」は別の変数になる

※注意点:日本語などは使用できない

シングルクォート、ダブルクォート

パラメータ前後のクォーテーション記号は、シングルクォート、ダブルクォートのどちらも利用できます。

たとえば、以下の出力結果はどちらも「斉藤さん、こんにちは」です。

index.html

console.log('斉藤さん、こんにちは');
console.log("斉藤さん、こんにちは");
//出力結果:斉藤さん、こんにちは

シングルクォート、ダブルクォート、どちらを使用してもOKです。

ひとつ注意点があります。
「クォテーション記号の中で、同じ記号を使わない」という点です。

たとえば、以下はエラーになります。

index.html

console.log('斉藤さん、こんにちは。'佐藤さん、こんにちは' ');
//出力結果:シングルクォートの中にシングルクォートでエラー

ただし、記号が異なる場合は利用できます。

index.html

console.log('斉藤さん、こんにちは。 ''佐藤さん、こんにちは" ');
//出力結果:斉藤さん、こんにちは。 "佐藤さん、こんにちは" 

「シングルクォートで始まり、ダブルクォートで閉じる」はエラーになります。

JavaScriptの文字列の連結・結合

JavaScript文字列の連結

加算演算子+で連結

文字列は、加算演算子「+」記号で連結できます。

以下のような文字列も連結できます。

・変数に代入された文字列
・3つ以上の文字列など

具体例は、以下のとおり。

console.log('伊藤さん' + 'こんにちは');
//出力結果:伊藤さんこんにちは

const kei = 'さん';
console.log('佐藤' + kei + 'おはようございます。');
//出力結果:佐藤さんおはようございます。

実際にHTMLに書いてみます。

index.html

<script>
 console.log('吉田さん' + 'ありがとう');
 const kei = 'さん';
 const aisatsu = 'おやすみなさい'
 console.log('吉田' + kei + aisatsu);
 console.log('吉田' + kei + '、' + aisatsu + '。');
</script>

【解説】
文字列「吉田さん」と文字列「ありがとう」を+で連結させ、開発者ツールに「吉田さんありがとう」を出力。

変数keiをつくり、文字列「さん」を代入。
変数aisatsuをつくり、文字列「おやすみなさい」を代入。

文字列「吉田」、変数kei=さん、文字列「おやすみなさい」を連結させ、開発者ツールに出力。
文字列「吉田」、変数kei=さん、文字列「、」、文字列「おやすみなさい」、文字列「。」を連結させ、開発者ツールに出力。

出力結果は、以下のとおり。

吉田さんおやすみなさい
吉田さん、おやすみなさい。

ダブルクォートを含む文字列の連結

HTMLを出力するときは、"(ダブルクォート)などの記号も文字列の一部として扱う場合があります
通常の文字に比べると、少しわかりにくいので注意です。

記述例は、以下のとおり。

index.html

<script> 
 const css_file = 'style.css'
 console.log('<link rel="stylesheet" href="' + css_file + '">');
</script>

【解説】
変数css_fileをつくり、文字列「style.css」を代入。
linkタグの文字列「<link rel="stylesheet" href="」と、変数css_file=「style.css」、文字列「">」を結合して開発者ツールに出力。

出力結果は、以下のとおり。

<link rel="stylesheet" href="style.css">

評価の順番に注意する文字列の結合

index.html

console.log( ' 100+30の結果は、'+100+30+' です ' );

出力結果は以下のとおり。

100+30の結果は、10030です

計算が間違っています。
理由はプログラムの処理の順番が、以下のようになるからです。

① 文字列「100+30の結果は、」と100が連結。
 出力結果は「100+30の結果は、100」
② 文字列「100+30の結果は、100」と30が連結。
 出力結果は「100+30の結果は、10030」
③ 文字列「100+30の結果は、10030」と文字列「です」が連結。
 出力結果は「100+30の結果は、10030です」

②の時点で100は数字ではなく文字列になっているので、加算されないのです。

解決策は、100+30を( )でくくることですね。

メモ:プログラム用語「評価」

JavaScriptはプログラムの内容を理解して、なんらかの処理を実行しようとします。
これをプログラム用語で「評価」といいます。

色々な文字列の扱い方【バッククォート】

`(バッククォート)で括られた文字列では、${変数名}で文字列を結合できます。

その他の特徴として、`を使うとその中の改行が有効になります。

たとえば、以下のとおり。

const kei = 'さん';
console.log(`こんにちは、鈴木${kei}`);
//出力結果:こんにちは、鈴木さん

const kana = `あいうえお
かきくけこ
さしすせそ`;
console.log(kana);
//出力結果:あいうえお
かきくけこ
さしすせそ

HTMLに記述します。

index.html

<script>
 const kei = 'さん';
 console.log(`こんにちは、吉野${kei}`);
 const kana = `あいうえお
かきくけこ
さしすせそ`;
 console.log(kana);
</script>

【解説】
変数keiを定義し、文字列「さん」を代入
`(バッククォート)で文字列を括り、その中に${変数名}で文字列を連結、開発者ツールに出力。
変数kanaを定義し、文字列をバッククォートで代入。
あいうえお、かきくけこ、さしすせそで、それぞれ改行する。
その際、半角スペースを文字として認識してしまうので、インデント用(字下げ)のスペースは消す。
開発者ツールに変数kanaを出力。

出力結果は、以下のとおり。

こんにちは、吉野さん
あいうえお
かきくけこ
さしすせそ

まとめ:JavaScriptの基礎・文字列をマスターしよう

まとめ:JavaScriptの基礎・文字列をマスターしよう

職業訓練校で学んだ「JavaScriptの文字列」は以上です。

文字列は、簡単そうなのでわかったつもりになりやすいです。
あとで復習したら意外と「あれ、なんだっけ」になりました。

その場では理解できても、アウトプットするのは難しいものです。
基礎理解が重要ですので、一つひとつ積み重ねていきます。

なおJavaScriptの数値の扱い方については、「【JavaScriptの数値】概要から様々な計算例をまとめました」で解説しています。

以上です。

P.S. JavaScriptの文字列をマスターしよう。

関連記事【JavaScript入門】初心者向けに「基礎文法」を完全まとめ
関連記事【職業訓練Webデザイン】40代、未経験でも慣れてきた3つの理由

-Blogger

Copyright © Blog Chronicle , All Rights Reserved.