JavaScript（ES2015）で変数を文字列リテラルに展開するとか、ヒアドキュメント的なもの

JavaScriptで文字列内に変数など（実際には式）を展開したいとき、ES2015（ES6）では、文字列をバッククォート（`` - バックティックともいうらしい）で囲む、テンプレートリテラルという記法が使用できます。

文字列中に式を展開できる

テンプレートリテラルには、${式}という形式のプレースホルダを含ませられ、評価時に式が展開されるというもの。

let value = "Template Literal";
console.log(`Hello! ${value}`);

なんだかPerlやPHPみたいですね。

複数行文字列をそのまま書ける

さらに、テンプレートリテラルの中には改行文字を含められるそうで、ヒアドキュメントみたいなことが可能。

let world = `Template
String`;

console.log(
`Hello!
${world}`
);

簡素で良いですね。

タグ付けされたテンプレートリテラルとは？

タグ付けされたテンプレートリテラルとは、テンプレートリテラルの展開内容を処理する機能（と記法？）です。

テンプレートリテラルの評価の途中で展開内容を独自の関数で受け取れて、その展開結果をオーバーライドできます。

MDNによくわからないサンプルコードが掲載されていますので、以降で説明。

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

最初に関数tagが定義されています。

function tag(strings, ...values) {
・
・
・

tagの第一引数はstrings。第2引数のvalueは、呼び出し時に指定された第2引数から最後までを配列として受けとります。

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

最終行でtagを呼び出しており、これがタグ付けされたテンプレートリテラルという記法のようです。

コメント部分であたかも"Bazinga!"とコンソールに表示されそうに書かれていますが、出ません。あくまでもテンプレートリテラルの評価値が"Bazinga!"です。

この呼び出しでは、事前にテンプレートリテラル内のプレースホルダとそれ以外の部分に分割され、

Hello - 固定文字列
${ a + b } - プレースホルダ
world - 固定文字列
${ a * b} - プレースホルダ

プレースホルダ以外のHello, worldが一つの配列にまとめられて第一引数に与えられ、プレースホルダ（${ a + b }, ${ a * b}）の展開結果が第2引数以降へ与えられます。

通常の関数呼び出しで表現すれば以下のようになります。

tag([`Hello `, ` world `],
	`${ a + b }`, `${ a * b}`);

互換性は？

ES2015/ES6での標準仕様。
Node.jsではv6.0以降で使えるから、今やほとんどの環境で互換性を気にする必要はなさそう。

正式名称？

一般的には「テンプレートリテラル」と呼ばれているようだけど、MDNでは「テンプレート文字列」となっている。（URLも「template-string」）。

テンプレート文字列 - JavaScript | MDN

自分をアップデートする必要性

これ、以前どこかで見かけて、なんとなく知っていたのだけど、習慣的に+でつなげたり、["a","b"].join("")などとしていました。不便だなあとは思っていましたが、どこかで「そういうものだ」とあきらめてました。

なんでもどんどん便利になっていくのが普通なのだから、定期的に知識や技術をアップデートする必要がありますね。

KZ-WORKS