式の埋め込みとは何か
テンプレート文字列はバッククォートで囲み、${ ... } に“式”を入れて、その評価結果を文字列内に埋め込めます。ここが重要です：式は変数だけでなく、計算、関数呼び出し、条件（三項演算子）など、JavaScript の式なら何でも使えます。従来の文字列連結より短く、読みやすさと保守性が大きく向上します。
const name = "Alice";
const price = 100;
const rate = 0.1;
const msg = `Hello, ${name}! 税込価格は ${Math.round(price * (1 + rate))} 円です。`;
console.log(msg); // Hello, Alice! 税込価格は 110 円です。
基本構文（${ … } に入れられるもの）
変数・計算・関数呼び出しをそのまま書ける
式の埋め込みは“評価 → 文字列化”されて挿入されます。複数の式も並べられます。
const a = 10, b = 3;
const info = `a+b=${a + b}, a*b=${a * b}, max=${Math.max(a, b)}`;
console.log(info); // a+b=13, a*b=30, max=10
条件分岐は三項演算子で“式”として書く
if/else をテンプレート内に直接は書けませんが、結果を選ぶ式にすれば埋め込めます。ここが重要です：テンプレートは“見た目”、分岐や計算は“式”で表現する。
const ok = true;
const label = `Status: ${ok ? "OK" : "NG"}`;
複数行の中での埋め込み（レイアウトとロジックの分離）
テンプレート文字列は改行をそのまま書けるため、HTMLやメール本文などの“整形された出力”で力を発揮します。ここが重要です：見た目の構造はテンプレートに、数字や日付の整形は補助関数に分けると読みやすくなります。
const pad2 = n => String(n).padStart(2, "0");
const formatTime = d => `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
const now = new Date();
const html = `
<div class="card">
<h1>${`現在時刻: ${formatTime(now)}`}</h1>
<p>ようこそ、${"Alice"} さん。</p>
</div>
`;
よくある落とし穴（重要ポイントの深掘り）
バッククォートで囲まないと展開されない
シングル（’）やダブル（”）では ${...} はただの文字になります。必ずバッククォートを使う。
const bad = '式は展開されない: ${1 + 2}'; // そのまま
const good = `式は展開される: ${1 + 2}`; // 3
オブジェクトをそのまま埋め込むと [object Object]
オブジェクトは自動で文字列化されると [object Object] になります。ここが重要です：JSON化や独自フォーマット関数で“文字列”にしてから埋め込む。
const user = { id: 7, name: "Alice" };
const s1 = `user=${user}`; // user=[object Object]
const s2 = `user=${JSON.stringify(user)}`; // user={"id":7,"name":"Alice"}
重い処理をテンプレート内で直接しすぎない
複雑な計算・整形はテンプレートの外で変数にしてから埋め込むと読みやすい。
const amount = 123456;
const formatted = amount.toLocaleString("ja-JP");
const text = `合計: ${formatted} 円`;
実用例で理解を固める
// 1) URL 生成（クエリはエンコードして安全に）
const makeUrl = (base, q, page = 1) => `${base}?q=${encodeURIComponent(q)}&page=${page}`;
console.log(makeUrl("/search", "JS 入門", 2)); // /search?q=JS%20入門&page=2
// 2) 表示ラベル（トリム＋小文字化）
const label = ({ id, name }) => `${id}:${name.trim().toLowerCase()}`;
console.log(label({ id: 10, name: " Alice " })); // 10:alice
// 3) HTML テーブル行
const rowHtml = ({ id, price }) => `
<tr>
<td>${id}</td>
<td>${price.toLocaleString("ja-JP")} 円</td>
</tr>`;
console.log(rowHtml({ id: 1, price: 123456 }));
// 4) 条件に応じた文言
const statusText = ok => `Status: ${ok ? "OK" : "NG"}`;
console.log(statusText(false)); // Status: NG
まとめ
式の埋め込みの核心は「バッククォートで囲んだテンプレート内に ${...} で任意の式を評価して挿入する」ことです。変数・計算・関数呼び出し・条件式を自然な位置に置けるため、文字列連結より短く安全。複数行の整形はテンプレートに、整形処理は補助関数へ分離し、オブジェクトは文字列化してから埋め込む。これを徹底すれば、初心者でも見た目とロジックをきれいに分けた読みやすいテンプレートが書けます。