JavaScript で変数を文字列に埋め込む方法

普段 Python を使っているのだが、Pythonでいうところの f'foo{bar}' のように変数を文字列を埋め込む表記方法が JavaScript にもあるか? と疑問に思ったので調べてみた。

参考:【JavaScript】文字列に変数を埋め込む|Into the Program

知りたい点を抜粋すると、

なるほどねー。

利用端末が限定されている状況ならテンプレートリテラルを使っても問題ないが、
多様な端末で利用される可能性があるなら、始めから従来の + を使った「結合」方法を用いるのが無難ということのようだ。

ちなみに、テンプレートリテラルがどういうものかの一例をあげると、

var msg = 'World';
console.log(`Hello ${msg}!`);

で、Hello World! が出力される。ポイントは

  1. ` で囲う。
  2. 変数部を ${} で囲う。

なのだが、これはテンプレートリテラルと呼ばれる仕様の一部で、\n と表記しなくても改行が反映されたり、タグ付きテンプレートというより高度な文字列を返す組み合わせを用意できたりするものらしい。

らしい、というのはドキュメントにはそう記載があるが、私自身は JavaScript を実務で使用してるわけではないので、肝心の使い所がよくわからず説明できないという意。

ちなみに、テンプレートリテラル中の変数部のことをプレースホルダーと呼ぶらしいが、プレースホルダーと変数の違いは、変数は変数で、テンプレートリテラル等で変数の中身を展開(置換)することのできる部分のことをプレースホルダーと呼ぶらしい*2

と、こんな感じでテンプレートリテラルは、Python で使ってる文字列埋め込み表記(正確には フォーマット済み文字列リテラル と呼ぶ*3)に表現がすごく近いものだった!

ので、私が求めていたものではあったのだが...
前述の通り、特に IE での互換性がないので、大人しくJavaScriptの変数を含む文字列は + で結合するようにしようと思う (苦笑