テンプレートリテラル — バッククォートと変数挿入
このトピックを終えると
バッククォートと${}構文を使って文字列をきれいに作成する方法を理解できるようになります。
引用符の限界
javascript
const name = "Alice";
const age = 25;
const msg = "Hello, " + name + "! You are " + age + " years old.";文字列の中に変数を挿入するには、+を使って連結する必要があります。変数の数が増えると、引用符を開閉したり、+を追加したりする必要があり、読み書きが不便になります。
バッククォートと${}
javascript
const name = "Alice";
const age = 25;
const msg = `Hello, ${name}! You are ${age} years old.`;バッククォート（`）で囲み、${}の中に変数を挿入します。引用符と+の組み合わせがなくなります。これをテンプレートリテラルと呼びます。ES6（2015）で追加されました。
${}の中には、変数だけでなく式も入れることができます。
javascript
const price = 15000;
const quantity = 3;
console.log(`Total: ${price * quantity}won`);
// Total: 45000won
console.log(`Status: ${age >= 18 ? "adult" : "minor"}`);
// Status: adult関数の呼び出しも可能です。
javascript
console.log(`Upper: ${name.toUpperCase()}`);
// Upper: ALICE複数行の文字列
通常の引用符で複数行の文字列を作成するには、\nを挿入する必要があります。
javascript
const old = "Line 1\nLine 2\nLine 3";バッククォートは改行をそのまま認識します。
javascript
const html = `
<div>
<h1>${title}</h1>
<p>${content}</p>
</div>
`;HTMLテンプレートを作成する際に特に役立ちます。インデントもそのまま保持されます。
重要なポイント
テンプレートリテラルは、**バッククォートと
${}**を使って、文字列に変数と式を挿入する構文です。 文字列の連結（+）よりも読みやすく、複数行の文字列も自然にサポートします。