この翻訳は不完全です。英語から この記事を翻訳 してください。

Template literal は組み込み式を扱うことができる文字列リテラルです。複数行文字列や文字列内挿機能を使用できます。ES2015 / ES6 仕様の以前のエディションでは、"template strings" と呼ばれていました。

構文

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

説明

Template literalはダブルクオートやシングルクオートの代わりにバックティック文字(` `) (grave accent)で囲みます。Template literalにはプレースホルダーを含めることができます。プレースホルダーはドル記号と波括弧(${expression})で示されます。プレースホルダー内の式とその間のテキストは関数に渡されます。既定の関数はパーツを1つの文字列として繋げるだけです。template literal の前に式がある場合、template literal は"タグ付けされたtemplate literal"と呼ばれます。この場合、タグ式(通常は関数)は、template literalと一緒に呼び出され、アウトプットの前に実行できます。template literal 内でバックティック文字をエスケープするためには、バックティック文字の前にバックスラッシュ \ を置きます。

`\`` === "`" // --> true

複数行文字列

ソースに挿入されたあらゆる改行文字列は、Template literalに含まれます。通常の文字列を使うと、複数行文字列を取得するために次の構文を使用しないといけません。

console.log("string text line 1\n\
string text line 2");
// "string text line 1
// string text line 2"

複数行文字列で同じ効果を得るために、このように書けます。

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

式内挿法

通常の文字列に式を内挿するために、あなたは次のような構文を使用するでしょう。

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

Template literalを使用すれば、このようにもっと読みやすくするシンタックスシュガーを使うことができます。

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

 

ネストしたテンプレートリテラル

場合によっては、ネストしたテンプレートリテラルの方が読みやすい場合があります。バックチックとテンプレートリテラルを、${ }プレースホルダーの中で単に使用するだけです。以下の例では、条件によって異なるテンプレートリテラルを返します。

ES5の場合:

var classes = 'header';
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

ES2015とネストせずにテンプレートリテラルで書いた場合:

const classes = `header ${ isLargeScreen() ? '' :
    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

ES2015でネストしたテンプレートリテラルで書いた場合:

const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

 

タグ付けされたTemplate literal

Template literalのより高度な使用法はタグ付けされたTemplate literalです。タグ付けされたTemplate literalでは、関数を使ってTemplate literalのアウトプットを調整できます。最初の引数には文字列リテラルの配列(この例では"Hello "と" world") を含みます。2つ目とそれに続くそれぞれの引数は、処理された(調理されたと呼ばれることもあります)代用式(ここでは"15"と"50")の値です。最後に関数は処理された文字列を返します。次の例では、ネームタグについて特別なことはありません。関数名は自由につけられます。

var a = 5;
var b = 10;

function tag(strings, ...values) {
  console.log(strings[0]); // "Hello "
  console.log(strings[1]); // " world"
  console.log(values[0]);  // 15
  console.log(values[1]);  // 50

  return "Bazinga!";
}

tag`Hello ${ a + b } world ${ a * b}`;
// "Bazinga!"

次の例で示すように、タグ関数は文字列を返す必要はありません。

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!" 
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

Raw strings

タグ関数に渡される第1引数では特別なrawプロパティが利用でき、エスケープシーケンスが処理されない、入力された通りの生の文字列を参照できます。

function tag(strings, ...values) {
  console.log(strings.raw[0]); 
  // "string text line 1 \n string text line 2"
}

tag`string text line 1 \n string text line 2`;

加えて、 String.raw() メソッドはデフォルトテンプレート関数のように未加工の文字列を生成するために存在し、文字列連結を行います。

String.raw`Hi\n${2+3}!`;
// "Hi\n5!"

 

タグ付けされたテンプレートとエスケープシーケンス

ES2016 での振る舞い

ECMAScript 2016 時点では、タグ付けされたテンプレートの以下のエスケープシーケンスには、次のようなルールが適用されます。

  • Unicode のエスケープシーケンスは "\u" で始まること。例: \u00A9
  • Unicode のコードポイントのエスケープは "\u{}" で示すこと例: \u{2F804}
  • 16進数のエスケープは "\x" で始まること。例: \xA9
  • 8進数のリテラルのエスケープは "\" で始まり、その後数字が続くこと。例: \251

このルールのもとでは、下に示す例のようなタグ付けされたテンプレートが問題となります。なぜなら、ECMAScript の文法に従ってこのテキストを解釈しようとすると、パーサーはUnicodeの有効のエスケープシーケンスを探そうとするも、不正な構文が検出されてしまうからです。

latex`\unicode`
// 古い ECMAScript バージョン (ES2016 以前) では、以下のような例外が投げられる
// SyntaxError: malformed Unicode character escape sequence

ES2018 revision of illegal escape sequences

Tagged templates should allow the embedding of languages (for example DSLs, or LaTeX), where other escapes sequences are common. The ECMAScript proposal Template Literal Revision (stage 4, to be integrated in the ECMAScript 2018 standard) removes the syntax restriction of ECMAScript escape sequences from tagged templates.

However, illegal escape sequences must still be represented in the “cooked” representation. They will show up as undefined element in the “cooked” array:

function latex(str) { 
 return { "cooked": str[0], "raw": str.raw[0] }
} 

latex`\unicode`

// { cooked: undefined, raw: "\\unicode" }

Note that the escape sequence restriction is only dropped from tagged templates and not from untagged template literals:

let bad = `bad escape sequence: \unicode`;

 

仕様

仕様 状態 コメント
ECMAScript 2015 (6th Edition, ECMA-262)
Template Literals の定義
標準 初期定義。仕様の複数セクションで定義されている;Template Literals, Tagged Templates
ECMAScript Latest Draft (ECMA-262)
Template Literals の定義
ドラフト 仕様の複数セクションで定義されている;Template Literals, Tagged Templates

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
Template literalsChrome 完全対応 41Edge 完全対応 12Firefox 完全対応 34IE 未対応 なしOpera 完全対応 28Safari 完全対応 9WebView Android 完全対応 41Chrome Android 完全対応 41Firefox Android 完全対応 34Opera Android 完全対応 28Safari iOS 完全対応 9Samsung Internet Android 完全対応 4.0nodejs 完全対応 4.0.0
Escape sequences allowed in tagged template literals
実験的
Chrome 完全対応 62Edge 未対応 なしFirefox 完全対応 53IE 未対応 なしOpera 完全対応 49Safari 未対応 なしWebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 完全対応 53Opera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 未対応 なしnodejs 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
 

関連項目

ドキュメントのタグと貢献者

最終更新者: mdnwebdocs-bot,