ES2015 (ES6) で覚えておきたい構文 : テンプレートリテラル
ES2015 になって、文字列を扱うのが便利になるテンプレートリテラル (Template Literal) という構文が増えた。
これまでの JavaScript では、シングルクォートかダブルクォートで文字列を囲み、変数などを間に挟む場合は + 演算子を使って結合していた。
var param = 1;
console.log('パラメータ : ' + param' + ' ・ 現在時刻 : ' + new Date());
こんな具合だ。
テンプレートリテラルは、バッククォートで囲むことで、文字列と変数をごちゃまぜに書けるようになる構文だ。
// Markdown 記法でコードブロック内にバッククォート1つを上手く書けないので、全角バッククォートを使っています。
// 実際は半角のバッククォートを使ってください。
const param = 1;
console.log(｀パラメータ : ${param} ・ 現在時刻 ${new Date()}｀);
これまで + 演算子で区切って書いていた変数などの部分は ${変数} といった形で書くことで展開される。
クォートのエスケープが不要になる
テンプレートリテラルはバッククォートで囲むので、シングルクォートやダブルクォートが混じる文字列をそのまま埋め込むことができ、わざわざ ¥ を付けてエスケープする必要がなくなる。これが意外と便利かも。
console.log(｀I'm Neo. I said "Template Literal is great."｀);
改行をそのまま LF と認識してくれる
テンプレートリテラル内で改行すると、その改行は LF として見なされる。Windows 環境で作っていて、対象の JS ファイルが CR+LF で改行されていたとしても、ブラウザが解析する際は改行コードは全て LF に統一されるので、¥r とか ¥n とか書かなくて良い。
// これで、エラーになったりせず「Hoge【¥n】【¥n】Fuga」と扱われる
console.log(｀Hoge
Fuga｀);
インデントを揃えようとしてスペースを入れると、その分のスペースもテンプレートリテラル内の文字列として扱われるので、その点だけ注意。
ほとんどヒアドキュメントとして使えて良い感じ。