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

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

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


これは何

組み込み式を扱うことができる文字列リテラル

(引用元: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


参考

テンプレート文字列:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings

JavaScript の テンプレートリテラル を極める!:
https://qiita.com/kura07/items/c9fa858870ad56dfec12

コメント

このブログの人気の投稿

投稿時間:2021-06-17 05:05:34 RSSフィード2021-06-17 05:00 分まとめ(1274件)

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

投稿時間:2024-02-12 22:08:06 RSSフィード2024-02-12 22:00分まとめ(7件)