JavaScriptのドルマーク$に中括弧{ }、
テンプレートリテラルについて。

テンプレートリテラルとプレースホルダ。

いまいちその意味がピンとこない２つの呼び名。

テンプレートリテラルとは？

リテラル（literal）は「文字列」、テンプレート（template）は「雛形」ですね。
「文字列のテンプレート」という意味です。たとえば、

こんにちは、（　）さん。

といったイメージです。これは「挨拶のテンプレート文字列」といえますね。

プレースホルダ。

挨拶のテンプレートの（　）の中にはたぶん、「太郎」「花子」など相手の名前が入るかと思います。 この内容を入れるために確保されている場所のことを「プレースホルダ（placeholder）」と言います。

今回「？」となった記述、「${ }」の正体です。

使ってみる。

JavaScriptでテンプレートリテラルを記述するには、バッククウォート「`」（shift+@）で内容を囲みます。

「「１`」」こんにちは「「１`」」

そしてプレースホルダをテンプレートリテラルの中に含めるには、「${ }」でその領域を確保します。

`こんにちは 「「１$｛ ｝」」`

変数を入れてみましょう。

let 「「５name」」 = "太郎"; console.log(`こんにちは$｛「「５name」」｝`); 「「３ >> こんにちは太郎」」

いちいちクオテーション「"」「'」と「+」で連結しなくても、文字列と変数を連結することができます。

プレースホルダに入れられる内容は文字列型の変数だけではありません。次のセクションで色々試してみます。

プレースホルダに入れられる内容。

プレースホルダに変数や式を入れて、出力してみましょう。

数値はそのまま文字列に変換。

数値型の変数はそのまま文字列に変換されます。

let month = 2; let day = 10; console.log(`今日は$｛month｝月$｛day｝日です`); 「「３>>今日は2月10日です」」

演算式。

プレースホルダ内での演算も可能。

let f = 5; let g = 10; console.log(`$｛f+g｝`); 「「３>>15」」

関数の返り値。

返り値のある関数を含めても、ちゃんと表示されます。

const kannsuu = (b) => b**2; console.log(`5の２乗は$｛kannsuu(5)｝。`); 「「３>>5の２乗は25。」」

色んなものを入れることができますね。
文字列との組み合わせが複雑になればなるほど、プレースホルダは重宝します。