JavaScriptテンプレートリテラル
同義語：
- テンプレートリテラル
- テンプレート文字列
- 文字列テンプレート
- Back-Tics構文
Back-Tics構文
テンプレートリテラルは、引用符（ ""）ではなくバックティック（ ``）を使用して文字列を定義します。
例
let text = `Hello World!`;
文字列内の引用
テンプレートリテラルを使用すると、文字列内で一重引用符と二重引用符の両方を使用できます。
例
let text = `He's often called "Johnny"`;
複数行の文字列
テンプレートリテラルでは、複数行の文字列を使用できます。
例
let text =
`The quick
brown fox
jumps over
the lazy dog`;
補間
テンプレートリテラルは、変数と式を文字列に補間する簡単な方法を提供します。
この方法は文字列補間と呼ばれます。
構文は次のとおりです。
${...}
可変置換
テンプレートリテラルは、文字列内の変数を許可します。
例
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
変数を実際の値に自動的に置き換えることを文字列補間と呼びます。
式の置換
テンプレートリテラルでは、文字列での式を使用できます。
例
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
式を実際の値に自動的に置き換えることを文字列補間と呼びます。
HTMLテンプレート
例
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
ブラウザのサポート
Template LiteralsES6の機能（JavaScript 2015）です。
最新のすべてのブラウザでサポートされています。
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
Template LiteralsInternetExplorerではサポートされていません。
完全な文字列リファレンス
完全な文字列リファレンスについては、次のURLにアクセスしてください。
このリファレンスには、すべての文字列プロパティとメソッドの説明と例が含まれています。