現代的JavaScriptおれおれアドベントカレンダー2017 – 12日目

概要

back-tick (back-quote) ` … ` で括ると「テンプレートリテラル」となり、変数を埋め込んだりできます。

const user = { name: 'Alice', birthYear: 2000 };
const message = `${user.name} is ${new Date().getFullYear() - user.birthYear}-year-old.`;

他に改行したり、独自のテンプレート関数を適用させることも。

テンプレートリテラル

今まで動的な情報を使って文字列を組み立てる場合、 + で接続してあれこれしてきました。

console.log('timestamp: ' + Date.now() + ' at some place.');

テンプレートリテラルの場合、 ${ … } という書き方を使って文字列中に埋め込むことで、より読みやすく記述することができます。

console.log(`timestamp: ${Date.now()} at some place.`);

うは、Syntax highlightingが間に合ってないすね。

式

${ … } の中身には式を書くことができます。

console.log(`result: ${1 + 2}`);

+ 連結時と同様、 .toString() が呼び出され文字列になります。

式は書けるけど文は書けません。 for とかは駄目。

改行

テンプレートリテラル中では改行もそのまま使えます。

console.log(`Hello
             Beautiful
             World!!`);

Hello
             Beautiful
             World!!

インデントはアレなんだけど。

今まで通り \n での改行もできます。

生文字列

back tickの前に「タグ (tag) 」を置くことで、特別なテンプレート化を行うことができます。

String.raw() というのが用意されていて、これを使うと文字列を「そのまま」の状態で扱えます。

console.log("Ginpei \"Sushi-guy\" Takanashi");  // Ginpei "Sushi-guy" Takanashi
console.log(`Ginpei \"Sushi-guy\" Takanashi`);  // Ginpei "Sushi-guy" Takanashi
console.log(String.raw`Ginpei \"Sushi-guy\" Takanashi`);  // Ginpei \"Sushi-guy\" Takanashi

back slash \ でエスケープできるはずが、されなくなります。もちろん今まで通りの \n でも改行できなくなってしまいました。

改行や ${ … } による処理埋め込みは可能です。そして、当たり前だけど、そっちで普通の文字列にしたらエスケープされます。

console.log(String.raw`\'
${'\''}`);

\'
'

無駄にややこしくしちゃったかも。ごめんね。

普通の関数として使ってはいけない

これは駄目。

console.log(String.raw(`\n`));  // Exception: TypeError: can't convert undefined to object

この↑場合だと、先にテンプレートリテラルを普通に解釈して、その結果の文字列を与えることになります。

括弧なしで後ろに付けてください。（空白はあってもなくてもよろしい。）

console.log(String.raw `\n`);  // \n

自分でテンプレート関数を作るようになったらよくわかるかも。

タグ関数

String.raw() みたいなものをタグ関数 (tag function) 、タグ関数を伴うテンプレートリテラルの仕組みをタグ付きテンプレート (tagged template) と呼ぶようです。

加熱調理済み紐

ちなみにエスケープしない生の文字列のことを “raw strings” 、そうでないエスケープされるものを “cooked strings” と呼ぶみたいです。

独自テンプレート

前項 String.raw() は、使い方は特殊だけど結局は関数です。同じような関数を作成することで、独自のテンプレート処理を行うことができます。

別稿参照。

その他

この記号 ` の名前

MDN (en)だと “back-tick” と呼んでいる。

Wikipediaには “grave accent” の名前で項目があり、プログラミング界隈での別名として “backquote” 、 “backtick” が紹介されている。

Programmers use the grave accent symbol as a separate character (i.e., not combined with any letter) for a number of tasks. In this role, it is known as a backquote or backtick.

テンプレートリテラル vs テンプレート文字列

仕様的には “template literals” 。

MDNによると過去に「テンプレート文字列」と呼ばれていたみたいです。

ES2015 / ES6 仕様の以前のエディションでは、”template strings” と呼ばれていました。

参考