テンプレートリテラルはバッククォート(`)で囲んで記述する新しい文字列リテラルの表記法です。ES6以前は文字列結合に+演算子を使ったり、改行に\nを埋め込む必要がありました。テンプレートリテラルを使うと、文字列中に${変数や式}を埋め込んで展開したり、複数行の文字列をそのままコード上に表現したりできます。これにより、可読性が高く柔軟な文字列操作が可能になりました。
JavaScriptにおけるテンプレートリテラルの例です。従来の文字列結合と比較しながら、変数埋め込みや複数行文字列の表現方法を示します。
// 従来の文字列結合
const name = "Dave";
const age = 40;
console.log("名前は" + name + "、年齢は" + age + "歳です。");
// -> 名前はDave、年齢は40歳です。
// テンプレートリテラルを用いた文字列埋め込み
console.log(`名前は${name}、年齢は${age}歳です。`);
// -> 名前はDave、年齢は40歳です。
// 複数行の文字列を含むテンプレートリテラル
const multiline = `バッククォートで囲むと
改行もそのまま文字列内に表現できます。`;
console.log(multiline);
/* -> バッククォートで囲むと
改行もそのまま文字列内に表現できます。 */解説:
テンプレートリテラルでは${ ... }の中にJavaScriptの式を書き、その評価結果を文字列中に埋め込むことができます。上の例ではnameやageといった変数を埋め込んでおり、従来のように+で文字列連結するコードと比べて格段に読みやすくなっています。
また、バッククォートで囲んだ中では改行をそのまま含めることができるため、複数行にわたる長い文字列や、整形されたテキストをコード中に直接表現することが可能です。例えば上記multilineの例では、改行やスペースも文字列リテラルに組み込まれています。このように、テンプレートリテラルは単なる文字列結合の糖衣構文に留まらず、コード中に文字列フォーマットを直感的に記述できる強力な機能です。