https://monologue.asappy.xyz/pages/js-template-literal/ からのセルフ転載。
ここではJavaScriptでのテンプレートリテラルについて解説します。
x = 1; y = 2;
テンプレートリテラルを知らない者は、変数を含む文字列を
"変数x : " + x + ", 変数y : " + y
// “変数x : 1, 変数y : 2”
と記述するしかない。
しかし！
テンプレートリテラルを知る者は、変数を含む文字列を
変数x : ${x}, 変数y : ${y}
// “変数x : 1, 変数y : 2”
こう記述する。
ご存知でしょうか？
x = 100; y = 20;
これが、
"calc(" + x + "% - " + y + "px)"
// “calc(100% - 20px)”
こう。
calc(${x}% - ${y}px)
// “calc(100% - 20px)”
見やすいでしょ～
s = 80; l = 50;
これが、
"rgb(" + (Math.random() * 360) + "deg, " + s + "%, " + l + "%)"
// “rgb([ランダム]deg, 80%, 50%)”
こう。
rgb(${Math.random() * 360}deg, ${s}%, ${l}%)
// “rgb([ランダム]deg, 80%, 50%)”
便利でしょ～
つかいかた
記述
バッククオート“で囲んだ文字列の中で、ドル記号$に波括弧{}をつけたもの${}の中に式を記述することで、文字列の中にその評価値を埋め込むことができる。
例:
let str = 文字列${式}文字列;
console.log(文字列${式}文字列);
文字列内の改行
テンプレートリテラル内での改行は、改行文字として反映されます。\n
例:
`1行目-
-2行目`
/*
* 1行目-
* -2行目
*/ソースコード内で改行して続けて記述
ソースコードの複数行にわたって1行の文字列を記述したい場合は、改行の直前にバックスラッシュ\を挿入することで、リテラル中で改行できます。(テンプレートリテラルのみでなく、通常の文字列リテラル''""でも可能です)
例:
`1行目-\
-引き続き1行目`
/*
* 1行目- -引き続き1行目
*/`‘シングルクォート’と”ダブルクォート”`
テンプレートリテラル内では、シングルクォーテーション''とダブルクォーテーション""は自由に使用できます。
例:
onclick="window.location.href = '../index.html'"
おわり
タグ付きテンプレート など、もっと多くの機能を知りたいときは、MDN Web Docsへ