メインコンテンツまでスキップ

inazuma code ：テンプレートリテラル

テンプレートリテラル は、文字列内に式を埋め込んで動的に生成できる文字列リテラルです。

バッククォート ` で囲み、${ ... } 内に任意の式を記述します。

基本構文​

let name = "Alice";
`Hello, ${name}!`; // "Hello, Alice!"
  • ${ ... } 内の式は評価され、その結果が文字列に変換されて埋め込まれます。
  • 文字列の前後に固定テキストを含めることができます。

複数の式​

複数の ${ ... } を含めることもできます。

let firstName = "Alice";
let lastName = "Smith";
`Hello, ${firstName} ${lastName}!`; // "Hello, Alice Smith!"

ネスト​

テンプレートリテラルは入れ子にできます。

let name = "Alice";
`${`Hello, ${name}`}! How are you?`;
// "Hello, Alice! How are you?"

空文字列・固定文字列​

``;                      // ""
`Just a static string.`; // "Just a static string."

型変換ルール​

テンプレートリテラル内の ${...} に埋め込めるのは スカラー値（文字列・数値・真偽値）または null に限られます。 配列やオブジェクトなど、それ以外の型を評価結果として返した場合はエラーになります。

  • null は空文字列に変換されます。
  • boolean は true が "1"、false が空文字列に変換されます。
  • 数値はそのまま文字列化されます。
  • 文字列はそのまま埋め込まれます。
let a = null;
let b = true;
let c = 123;
`${a} ${b} ${c}`; // " 1 123"

複数行文字列​

テンプレートリテラルには改行を含められます。

let name = "Bob";
`Hello,
${name}!
Nice to meet you.`;

/*
"Hello,
Bob!
Nice to meet you."
*/

式の埋め込み​

${ ... } 内には if 式など任意の式を記述できます。

let condition = true;
`The condition is ${ if (condition) { "true" } else { "false" } }.`;
// "The condition is true."

エスケープシーケンス​

  • \n 改行
  • \t タブ
  • \` バッククォート
  • \${ 式展開をエスケープ（${} そのものを出力）
`\n`;   // 改行文字
`\t`;   // タブ文字
`\``;   // バッククォート
`\${}`; // "${}"
まとめ
  • バッククォート ` で囲みます。
  • ${ ... } 内に任意の式を記述できます。
  • 複数行をそのまま書けます。
  • null / boolean / 数値は文字列に変換されて埋め込まれます。
  • エスケープシーケンスに対応しています。
  • ネストに対応しています。