More than 5 years have passed since last update.

テンプレートリテラルで文字連結

Last updated at 2019-01-18Posted at 2019-01-18

いまさら感がありますが、テンプレートリテラルについてです。

#これは何

組み込み式を扱うことができる文字列リテラル
(引用元：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings)

これだけですと「何が違うの」となりそうですが、「組み込み式」がポイントだと思います。
実際に使うと、その便利さがよくわかります。

#どう使うの？
「`」（バッククォート）で囲みます。

const text = `hoge`;

#出来る事
・改行や複数行を表現できます。
テンプレートリテラルでない場合、＋などで連結させる必要があります。

・変数や計算式が書けます。

const text = 'hoge';
const texts = `${text},huga,piyo`;
// 出力結果：hoge,huga,piyo

今までだと、＋や、配列とjoin()で文字列を連結させ、また変数を展開していましたが、
テンプレートリテラルを使用すると非常に簡単に対応できます。

・エスケープは\が使えます。
・String.raw～``で、未加工（エスケープされていない）の文字列が出力されます。

#注意する事
単なる連結の簡略化として使う分にはマイナスは無いかと思います。
IEがだめだったと思いますが、そのくらいです。

ただ、こちらにある「マニアック」といくつか弱点があります。
https://qiita.com/kura07/items/c9fa858870ad56dfec12