テンプレートリテラル(template-literal)とは、組み込み式を扱うことができる文字列リテラルです。 複数行の文字列や文字列挿入機能を使用することができます。
従来は、文字列の途中で改行することはできませんでした。
var 文字列 = "おはよう
ございます";
テンプレートリテラルは、ダブルクオートやシングルクオートの代わりにバッククォーテーション「`」(Shift+@)で囲みます。
var 文字列 = `おはよう
ございます`;
とすると、
var 文字列 = "おはようございます";
と同じになります。2行目は行頭からとみなされるので、半角スペースなどを置かず行頭から記述する必要があります。
ここではHTMLではないので改行に <br> ではなくエスケープ「\n」を使うのでした。
alert("第1行\n第2行");
それを次のように記述できます。
alert(`第1行
第2行`);
逆に、エスケープを外したいときは、
var 文字列 = "第1行\n第2行";
String.raw(文字列);
とします。
document.getElementById("表示場所").innerHTML = ・・・;
などのときに、右辺を「バナナ(商品名) の価格は 100(価格) 円です。」 を表示したいとき、通常では
商品名 + "の価格は" + 価格 + "円です。"
としますが、全体を「`」で囲んで、
`${商品名} の価格は ${価格} 円です。`
とできます。文字列結合の「+」や地の部分の「" "] が不要になり、簡潔な表現になります。
${ 式 } は、式を評価した結果をその位置に挿入します。もし価格を消費税込みにするならば、`
`${商品名} の価格は ${Math.floor(価格*1.1)} 円です。`
と記述できます。
私には難しいし、用途も思いつかないので省略します。