JavaScript(ES6) テンプレートリテラルと文字列の連結

はじめに

プログラミング言語ではよく文字列の連結が行われる。
JavaScript(ES6) では文字列の連結も使用することができるが、
テンプレートリテラルという便利なものがあるので紹介したいと思う。

結論から

長く読みづらい文字列の連結をシンプルに書ける。
『文字列の連結』

const name = "デク";
const age = 16;
const food = "リンゴ";

console.log("私の名前は"+ name + "です。" + "年齢は" + age + "歳です。" + "好きな食べ物は" + food + "です。");
//出力結果：私の名前はデクです。年齢は１６歳です。好きな食べ物はリンゴです。

『テンプレートリテラル』

const name = "デク";
const age = 16;
const food = "リンゴ";

console.log(`私の名前は${name} です。年齢は${age}歳です。好きな食べ物は${food}です。`);
//出力結果：私の名前はデクです。年齢は１６歳です。好きな食べ物はリンゴです。

詳細

【文字列の連結】
文字列と文字列を「+」で繋げることで一つの文字列とする
変数や定数も繋げることができる

console.log("私が" + "デクだ");
//出力結果：私がデクだ
console.log("20" + "15");
//出力結果：2015
//数字を文字列として扱っているので計算されず、連結されて出力されている

const name = "デク";
const age = 16;
console.log("私の名前は"+ name + "です。" + "年齢は" + age + "歳です。" );
//出力結果：私の名前はデクです。年齢は16歳です。

【テンプレートリテラル】

文字列の中の${}に定数や変数を囲むことで文字列に埋め込むことができる。
そのため、どれが定数や変数かということが分かりやすくなり、
コードに「+」を書く必要がないため、コードを短く書くことができる。
文字列はバッククォーテーション（`）で囲む

const name = "デク";
const age = 16;

console.log(`私の名前は${name} です。年齢は${age}歳です。`);
//出力結果：私の名前はデクです。年齢は16歳です。

※バッククォーテーション（`）はJISキー(日本語配列)とUSキー(英語配列)によって出力方法が異なる。
下記の図を参照

まとめ

テンプレートリテラルを使用することで「+」を書く手間を削減し、そして読みやすい書き方をすることができる。
本記事では単純な文字の連結について説明したが、もっと詳しく知りたい方は下記も参考にしてください。
■MDN web docs(テンプレート文字列)