何が違うのか（テンプレート文字列 vs 従来の文字列）
テンプレート文字列はバッククォートで囲み、${...} に式をそのまま埋め込めて、複数行も“書いたとおり”に保持します。従来の文字列（’ や “）は + で連結し、改行は \n を手書きします。ここが重要です：テンプレート文字列は“見た目（レイアウト）がコードにそのまま現れる”ため、短く、読みやすく、修正に強い書き方になります。
// 従来
const name = "Alice";
const price = 100;
const s1 = 'Hello, ' + name + '! price=' + Math.round(price * 1.1) + ' 円';
// テンプレート
const s2 = `Hello, ${name}! price=${Math.round(price * 1.1)} 円`;
式の埋め込みの違い（${…} の直感性）
${...} は“任意の式”を評価して文字列化して挿入します。ここが重要です：従来の + 連結では括弧や優先順位を気にする必要がありますが、テンプレートなら式をありのまま書けます。関数呼び出し・三項演算子・メソッドチェーンも自然に置けます。
// 従来
const label1 = '税込: ' + (rate > 0 ? Math.round(price * (1 + rate)) : price) + ' 円';
// テンプレート
const label2 = `税込: ${rate > 0 ? Math.round(price * (1 + rate)) : price} 円`;
注意点（深掘り）：
- オブジェクトのまま挿入:
[object Object]になります。必要なら JSON 文字列化します。
const user = { id: 7, name: "Alice" };
const s = `user=${JSON.stringify(user)}`; // 安全で意図が明確
- 重い処理:
${...}内で重い計算を行うと可読性・速度が落ちます。事前に変数へ計算してから埋め込みましょう。
複数行・改行・インデント（見た目どおりに書ける）
テンプレート文字列は改行・空白を保持します。ここが重要です：HTML やメール本文、CLI ヘルプなど“整形された出力”で威力を発揮します。従来は \n と連結、インデントの空白に注意が必要でした。
// 従来
const html1 = '<div>\n <h1>Title</h1>\n <p>Body</p>\n</div>';
// テンプレート（見た目が出力になる）
const html2 = `
<div>
<h1>Title</h1>
<p>Body</p>
</div>
`.trim(); // 先頭・末尾の余計な改行を除去
深掘りポイント：
- 先頭・末尾の改行: バッククォートの位置次第で含まれます。不要なら
trim()で落とす。 - インデントの空白: 出力にも含まれます。必要なら“デデント（左寄せ）”のタグ関数で整えましょう。
function dedent(strings, ...vals) {
let text = strings.reduce((o, s, i) => o + s + (vals[i] ?? ""), "");
text = text.replace(/^\n+/, "").replace(/\n+$/, "\n");
const lines = text.split("\n");
const min = Math.min(...lines.filter(l => l.trim()).map(l => l.match(/^(\s*)/)[1].length));
return lines.map(l => l.slice(min)).join("\n");
}
クォートとエスケープの違い（混在する HTML に強い）
従来の ‘ と ” は HTML の属性やテキスト内で混在するとエスケープが煩雑になります。ここが重要です：テンプレート文字列はバッククォートで囲むため、’ と ” を含む HTML を“素直に”書けます。バッククォート自体を入れたい場合のみ、“` でエスケープします。
// 従来：クォートの管理が煩雑
const s1 = '<button title="購入 \'特価\'">Buy</button>';
// テンプレート：そのまま書ける
const s2 = `
<button title="購入 '特価'">Buy</button>
`.trim();
const note = `バッククォートはこう書く: \``; // バッククォートはエスケープ
配列とテンプレートの相性（量産が簡潔）
従来の連結は複数要素の生成で + が散らばりがちです。テンプレート文字列は map(...).join("") と組み合わせて“量産→連結”の定石が使いやすいです。ここが重要です：部分テンプレートに分けると保守性が上がります。
const yen = n => `${n.toLocaleString("ja-JP")} 円`;
const row = i => `
<tr class="${i.onSale ? "sale" : ""}">
<td>${i.id}</td>
<td>${i.name.trim()}</td>
<td>${yen(i.price)}</td>
</tr>
`;
const table = rows => `
<table>
<tbody>
${rows.map(row).join("")}
</tbody>
</table>
`.trim();
安全性と実務の注意（XSS 防御は別途必要）
テンプレート文字列は“便利な文字列構文”であり、セキュリティ機能は持ちません。ここが重要です：ユーザー入力を HTML に混ぜるなら、本文は escapeHtml、属性は escAttr、テキストは textContent、属性は setAttribute/dataset を使うなど、適切な API とエンコードを徹底します。
const escapeHtml = s => String(s).replace(/[&<>"']/g, c => ({
"&": "&", "<": "<", ">": ">", '"': """, "'": "'"
}[c]));
const safeCard = ({ id, name, price }) => `
<div class="card" data-id="${String(id)}">
<h2>${escapeHtml(name)}</h2>
<p>価格: ${price.toLocaleString("ja-JP")} 円</p>
</div>
`;
パフォーマンス・保守性の違い（短く・意味が伝わる）
評価モデルはどちらも“式を評価して文字列結合”です。違いは“書き方”。ここが重要です：テンプレートは式を短く保ち、整形は補助関数へ分離、重い処理は事前計算、意味のある変数名で埋め込むと可読性が飛躍的に上がります。
// 事前計算と意味のあるラベル
const total = rows.reduce((s, r) => s + r.price, 0);
const totalLabel = `${total.toLocaleString("ja-JP")} 円`;
const summary = `合計: ${totalLabel}`;
まとめ比較（直感的な書き方が“ミスを減らす”）
- 式埋め込み:
${...}で意図を直写でき、従来の+連結より読みやすい。 - 複数行: 改行・インデントを保持し、整形された出力に向く。
trim()やデデントで制御可能。 - クォート管理: ‘ と ” を素直に含められ、エスケープの煩雑さが減る。
- 量産:
map + joinと部分テンプレートで短く保守的に書ける。 - 安全性: セキュリティ機能はないため、XSS 対策は別途必須。
この設計指針（見た目はテンプレート、ロジックは補助関数、重い処理は事前計算、適切なエンコードと DOM API）は、初心者でも短く正確で保守しやすい ES6+ の文字列処理を実現します。
