JavaScript ・ 配列・オブジェクト
`${}`
変数を埋め込める文字列
バッククォート（`）で囲んだ文字列の中に ${ } で変数や式を埋め込めます。改行もそのまま書けます。
01
サンプルコード
JS
1const name = 'カフェラテ';
2const price = 550;
3
4console.log(`${name}は${price}円です`);
5console.log(`税込：${Math.round(price * 1.1)}円`);
02
実行結果
コンソール
- console.log() の出力がここに表示されます
03
解説
バッククォート記号で囲んだ文字列を「テンプレート文字列（テンプレートリテラル）」と呼びます。${ } の中に書いた変数や式の値が、その位置に埋め込まれます。
+ で文字列をつなぐよりも読みやすく、計算式や関数の呼び出しもそのまま書けます。
途中で改行すると、改行を含んだ文字列になります。HTMLの断片を組み立てるときにも便利です。
04
応用例・注意点
文字列の書き方
| 書き方 | 説明 |
|---|---|
'文字列' / "文字列" | ふつうの文字列 |
`文字列` | テンプレート文字列 |
`${式}` | 式の値を埋め込む |
'a' + 'b' | + でつなぐ（従来の書き方） |
HTMLを組み立てる
テンプレート文字列で作った HTML を画面に表示します。
HTML
1<div id="card"></div>
JS
1const item = { name: 'カフェラテ', price: 550 };
2document.querySelector('#card').innerHTML = `
3 <strong>${item.name}</strong>
4 <span>${item.price}円</span>
5`;
注意点
- 01利用者が入力した文字を innerHTML で埋め込むと、悪意のあるスクリプトが実行される危険があります。文字だけなら textContent を使います。
- 02バッククォートは、日本語キーボードでは Shift + @ で入力できます。