JavaScript テンプレート文字列（Template Strings）

バックティックの構文

Template Strings は文字列を定義するために引用符（””）の代わりにバックティック（“）を使用します：

let text = `Hello World!`;

文字列内の引用符

Template Strings では、文字列内にシングルクォートやダブルクォートを両方使用することができます：

let text = `He's often called "Johnny"`;

複数行の文字列

Template Strings では、複数行の文字列を作成できます：

let text =
`The quick
brown fox
jumps over
the lazy dog`;

変数の挿入

Template Strings は変数や式を文字列に簡単に挿入する方法を提供します。

この方法は文字列補間と呼ばれます。

構文は以下の通りです：

${...}

変数の置換

Template Strings では、文字列内で変数を使用できます：

let firstName = "John";
let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

変数の実際の値で置き換える自動化は文字列補間と呼ばれます。

式の置換

Template Strings では、文字列内で式を使用できます：

let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

式の実際の値で置き換える自動化は文字列補間と呼ばれます。

HTML テンプレート

Template Strings を使用して、HTML テンプレートを簡単に生成することができます：

let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];

let html = `
${header}
`;
for (const x of tags) {
  html += `
${x}
`;
}

html += `
`;

ブラウザサポート

Template Strings は ES6 の機能（JavaScript 2015）です。

ES6 は以下の全てのモダンブラウザで完全にサポートされています（2017年6月以降）：

• Chrome 51
• Edge 15
• Firefox 54
• Safari 10
• Opera 38