Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Template literals

テンプレートリテラルは逆引用符 (`) で区切られたリテラルで、複数行の文字列、埋め込み式による文字列の補間、タグ付きテンプレートと呼ばれる特殊な構文を許可します。

テンプレートリテラルは非公式に「テンプレート文字列」と呼ばれることもあります。文字列の補間のためにもっともよく使用されるからです。しかし、タグ付けされたテンプレートリテラルが文字列になるとは限りません。カスタムのタグ関数と併用することで、テンプレートリテラルのさまざまな部分に対して、任意の操作を実行することができます。

言語コアES2015

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`template_literals`	41	12	34	9	41	9
`template literal revision` タグ付きテンプレートリテラルでエスケープシーケンスが許可される	62	79	53	11	62	11

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const name = 'Taro';
const age = 25;

// Embedding expressions
console.log(`Hello, ${name}!`);
console.log(`Age: ${age}, Next year: ${age + 1}`);

// Multiple lines
const html = `
  <div>
    <h1>${name}</h1>
    <p>Age: ${age}</p>
  </div>
`;

ライブデモ

Interpolation with expressions

Embed variables, calculations, and conditional text directly inside one readable string.

JavaScript

出力

「実行」ボタンを押してください

Multiline templates

Keep the structure of generated text close to the final output by using a multiline literal.

JavaScript

出力

「実行」ボタンを押してください

実務での使いどころ

Template literals の活用

テンプレートリテラルは逆引用符 (`) で区切られたリテラルで、複数行の文字列、埋め込み式による文字列の補間、タグ付きテンプレートと呼ばれる特殊な構文を許可します。

注意点

特になし。すべての主要ブラウザで安定して動作する。