テンプレートリテラルは「変数をそのまま埋め込める文字列」
\Hello \${name}\ は、文字列の中に変数や式をそのまま埋め込める書き方です。 バッククォート（\…\）で囲んだ文字列の中に、\${…} という形で変数や式を書くと、その値が展開されます。
天才プログラマー視点で言うと、「文字列連結をほぼ過去のものにしてくれる、今どきの標準的な書き方」がテンプレートリテラルです。
基本イメージ：名前を埋め込んで挨拶する
まずは一番シンプルな例から。
const name = "Aki";
const message = `Hello ${name}`;
console.log(message); // "Hello Aki"
ここで起きていることは、 \${name} の部分が評価されて "Aki" になり、 結果として "Hello Aki" という文字列が作られる、という動きです。
従来の書き方だとこうでした。
const message = "Hello " + name;
テンプレートリテラルなら、 「文字列の形をそのまま書きながら、変数だけ埋め込む」ことができます。
式もそのまま書けるのが強いポイント
\${…} の中には、変数だけでなく「式」も書けます。
const a = 2;
const b = 3;
const message = `${a} + ${b} = ${a + b}`;
console.log(message); // "2 + 3 = 5"
ここでは、
\${a} が 2、 \${b} が 3、 \${a + b} が 5 に展開されます。
「計算結果や関数の戻り値を、そのまま文字列の中に見せたい」ときに、テンプレートリテラルは非常に自然に書けます。
複数行の文字列をそのまま書ける
テンプレートリテラルは、複数行の文字列もそのまま書けます。
const name = "Aki";
const message = `
Hello ${name},
Welcome to JavaScript world.
`;
console.log(message);
/*
Hello Aki,
Welcome to JavaScript world.
*/
従来は \n を使って改行を表現していましたが、 テンプレートリテラルなら、「画面に見えている形がそのまま文字列になる」ので、読みやすさが一気に上がります。
オブジェクトや配列もそのまま埋め込める
\${…} の中には、オブジェクトや配列をそのまま入れることもできます。
const user = { name: "Aki", score: 80 };
const message = `User: ${user.name}, Score: ${user.score}`;
console.log(message); // "User: Aki, Score: 80"
ここでは、 user.name や user.score をそのまま埋め込んでいます。
「データ構造から必要な値だけ取り出して、説明文に混ぜる」というパターンが、とても書きやすくなります。
まとめ：テンプレートリテラルは「文字列とコードを自然につなぐための今どきの標準」
\Hello \${name}\ のようなテンプレートリテラルを使いこなせると、
文字列連結の + をほとんど使わなくて済む。 変数や式を、文字列の中に直感的に埋め込める。 複数行のメッセージも、そのままの形で書ける。
「このメッセージ、変数や計算結果を混ぜながら自然な文章にしたい」と感じた瞬間に、 まずバッククォートと ${…} を思い出せるようになること。
それが、JavaScript で「文字列とロジックをきれいにつなぐ」ための、大事な一歩になります。