Corredor

ウェブ、プログラミングの勉強メモ。

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`);

インデントを揃えようとしてスペースを入れると、その分のスペースもテンプレートリテラル内の文字列として扱われるので、その点だけ注意。

ほとんどヒアドキュメントとして使えて良い感じ。