テンプレートリテラル ― 変数を文字列に埋め込む

導入

変数の値を文章に埋め込みたいとき、+ を並べると読みにくくなります。JavaScript には テンプレートリテラル（バッククォート `）という、すっきり書ける方法があります。

説明

文字列をバッククォート ` で囲み、埋め込みたい変数や式を ${ } で囲みます。

const name = "太郎";
const age = 25;
console.log(`${name}さんは${age}歳です`);
console.log(`来年は${age + 1}歳になります`);  // ${} の中では計算もできる

${ } の中には変数だけでなく、式（計算）もそのまま書けます。複数行の文字列も、そのまま改行して書けます。

const price = 1200;
const count = 3;
console.log(`合計は${price * count}円`);

const message = `1行目
2行目
3行目`;
console.log(message);

テンプレートリテラルは、いまの JavaScript でいちばん一般的な文字列の組み立て方です。まずこれを使えるようにしましょう。

やってみよう

name と age を自分の情報に変えて表示してみましょう。${ } の中で計算式も試してください。

演習

const product = "りんご"; と const n = 5; を用意し、テンプレートリテラルで「りんごを5個買いました」と表示してください。