Template literal

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."

タグ付けされた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

関数のタグ付けされたTemplate literal引数で使用できる特別な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!"

仕様

ブラウザ実装状況

関連項目

• String
• String.raw()
• Lexical grammar
• Template-like strings in ES3 compatible syntax
• "ES6 in Depth: Template strings" on hacks.mozilla.org