JavaScriptでテンプレートリテラル

バッククオートによるJavaScriptの文字列埋め込みと複数行記述を学べます。初心者向けに、コードを編集して実行結果をすぐ確認できます。 下のコードはブラウザ内でそのまま実行できます。「実行エディタで開く」を押すと、progoのオンラインJavaScript実行環境にコードが読み込まれ、その場で動作を確認できます。

サンプルコード

const name = "progo";
const age = 3;

// ${} で変数を埋め込む
const msg = `${name} は ${age} 歳です`;
console.log(msg);

// 複数行もそのまま書ける
const html = `
  <div>
    <h1>${name}</h1>
  </div>`;
console.log(html);

ポイント解説

• バッククオート` `で文字列を囲みます。
• ${式}で変数や計算結果を埋め込めます。
• 改行をそのまま含む複数行文字列が書けます。