さくっと学ぶ!! ES2015(ES6)入門　〜Template literal 編〜

こんにちは。メゾンマークでフロントエンドを担当している、k-taroです。

第４回目はテンプレートリテラル（Template literal）をみていきます！

概要

文字列などをシングルクオートの代わりにバックティック文字()で囲うことができます。
今までとの違いは、エディタ上で改行がそのまま反映されるのと、${}内に変数などを使用できる点です。

使い方はとてもシンプルなので、コードをみながら解説します！

ES5

const hoge = 'hogeだよ！';
console.log(hoge); // hogeだよ！

ES6

const fuga = `fugaだよ！`;
console.log(fuga); // fugaだよ！

このままだとメリットがないですが、
次章でテンプレートリテラルの便利な使い方を解説します。

解説

改行

文字列内で改行を定義したい場合、ES5までは\n\ で定義していましたたが、ES6では改行をそのまま書くことができます。

ES5

const hoge = '改行した\n\いよ〜';
console.log(hoge);
// 改行した
// いよ〜

ES6

const hoge = `改行した
いよ〜`;
console.log(hoge);
// 改行した
// いよ〜

テンプレートリテラルを知らない人に改行部分を誤って消されてしまう可能性がありそうですが、
書き方自体はシンプルになりました！！

テンプレート内の変数の受け取り方

個人的にはこの機能が使いやすくてよく使っています。
``内で変数が受け取れるようになります。

ES5

const favoriteFruits = ['りんご', 'みかん', 'いちご'];
favoriteFruits.forEach(fruit => {
  console.log('僕は' + fruit + 'が好き！');
});
// 僕はりんごが好き！
// 僕はみかんが好き！
// 僕はいちごが好き！

シングルクオートで囲うときは、変数と文字列を分け、+で結合し出力していました。
複雑な式を定義する際に、シングルクオートとダブルクオートがわからなくなってしまう問題もありました。

ES6

const favoriteFruits = ['りんご', 'みかん', 'いちご'];
favoriteFruits.forEach(fruit => {
  console.log(`僕は${fruit}が好き！`);
});

変数と文字列で分ける必要もなく、分かりやすくなりました。

まとめ

・改行や変数を使う文字列を定義する場合はテンプレートリテラルを使おう！
・テンプレートリテラルで改行を使う際は誤って消されないよう注意！
・特に変数をたくさんとるviewのテンプレート定義時に重宝する！

次回はDestructuring（分割代入）について解説します。