JavaScript 字符串テンプレート

同義語：

  • Template Literals
  • Template Strings
  • String Templates
  • 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`;

自分で試してみる

挿入

テンプレートリテラル変数や表現を文字列に簡単に挿入する方法を提供しています。

このメソッドは文字列の挿入（string interpolation）と呼ばれます。

文法

${...}

変数の置き換え

テンプレートリテラル文字列内の変数を許可します：

例

let firstName = "Bill";
let lastName = "Gates";
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>`;

自分で試してみる

ブラウザのサポート

Internet Explorer はサポートしていませんテンプレートリテラル。

テンプレートリテラルを完全にサポートする最初のブラウザバージョンは：

Chrome IE Firefox Safari Opera
Chrome 41 Edge 13 Firefox 34 Safari 10 Opera 29
2015 年 3 月 2015 年 11 月 2014 年 12 月 2016 年 9 月 2015 年 4 月

完全な文字列リファレンス

完全なリファレンスが必要な場合は、私たちの完全な JavaScript 文字列リファレンスマニュアル。

このマニュアルにはすべての文字列属性とメソッドの説明とインスタンスが含まれています。