現代的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” と呼ばれていました。
参考
- ECMAScript® 2017 Language Specification
- 12.2.9 Template Literals
- 12.3.7 Tagged Templates
- 21.1.2.4 String.raw ( template, …substitutions ) … tag functionという表現
- テンプレート文字列 – JavaScript | MDN