TypeScriptのソースコードを読んでいると、文字列を囲う際に、シングルクォート ' やダブルクォート " ではなく、バッククォート ` を使うことがあります。
JavaScript Primer によると
バッククォート`で囲んだ範囲を文字列とするリテラルのことを テンプレートリテラル と呼ぶそうです。
ES2015から導入されたリテラルで、TypeScriptを書くなら頻繁に目にしてもおかしくないリテラルですね。
(本題)テンプレートリテラルの主な特徴
- 複数行の文字列をそのまま書くことができる
- 文字列内で
${変数名}と書くと、変数の値を埋め込むことができる
1.複数行の文字列をそのまま書くことができる
sample01.js
`複数行の
文字列を
入れたい`; // => "複数行の\n文字列を\n入れたい"
2.文字列内で ${変数名} と書くと、変数の値を埋め込むことができる
sample02.js
const str = "文字列";
console.log(`これは${str}です`); // => "これは文字列です"
(補題)タグ付きテンプレートリテラルについて
私が当面の問題を解決するにあたってのテンプレートリテラルの挙動の整理は、本題で十分なのですが、リファレンスを読んでいると、
(テンプレートリテラル)⊂(文字列リテラル)
という理解は厳密には誤りであるらしいことがわかりました。補足として参考資料を掲載します。
JavaScript Primer では、以下のように紹介されています。
文字列リテラル共通のルールとして、同じ記号で囲んだ内容を文字列として扱います。 文字列リテラルとして次の3種類のリテラルがありますが、その評価結果はすべて同じ"文字列"になります。
console.log("文字列"); // => "文字列" console.log('文字列'); // => "文字列" console.log(`文字列`); // => "文字列"
MDN によると
タグなしテンプレートリテラルは文字列となるため、文字列の補間に便利です（エスケープされていない改行が許されるため、複数行の文字列も可能です）。
とあるように、タグなしテンプレートリテラルの場合は文字列リテラルとして確定する模様。
しかし、タグ付きの場合は、文字列であるとは限りません。