Template strings

概要

Template stringは組み込み式を扱うことができる文字列リテラルです。複数行文字列や文字列内挿機能を使用できます。

構文

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

説明

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

複数行文字列

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

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 stringを使用すれば、このような読みやすい置換を行うシンタックスシュガーをつくることができます。

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

タグ付けされたTemplate string

Template stringのより高度な使用法はタグ付けされたTemplate stringです。タグ付けされたTemplate stringでは、関数を使ってTemplate stringのアウトプットを調整できます。最初の引数には文字列リテラルの配列(この例では"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!"

Raw strings

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