【JavaScript】文字列に変数を埋め込む

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで文字列に変数を埋め込む方法をご紹介しています。

文字列に変数を埋め込んで値を出力したいんだけど、どうすればいいの？

上記の疑問にお答えできればと思います。

では、解説していきます。

文字列に変数を埋め込む（ES2015～）

JavaScriptでは文字列に変数を埋め込む（展開する）ことができます。変数を埋め込むことができる文字列のことをテンプレートリテラル（テンプレート文字列）と呼びます。ES2015に対応しているブラウザで動作します。

文字列に変数を埋め込む方法は下記の通りです。

変数を埋め込む文字列は'(バッククオート)で囲む
埋め込む変数は${}で囲む

これで変数に文字列を埋め込むことができます。

変数を埋め込む文字列を囲むのは'(シングルクオーテーション)ではなく`(バッククオート)である点にご注意ください。'(バッククオート)は日本語配列のキーボードであればshift + @で入力することができます。

では、実際に文字列に変数を埋め込んでみましょう。試しに私の名前を変数に持たせて、自己紹介する文章を作成してみたいと思います。

const name = 'ryohei';

console.log(`私の名前は${name}です！`);
//実行結果

"私の名前はryoheiです！"

無事文字列に変数を埋め込むことができましたね。上記例では変数に文字列を持たせていますが、配列などの値であっても繰り返し処理で出力することもできます。

const names = ['田中太郎', '山田太郎', '鈴木太郎', '佐藤太郎'];
for(const name of names){

    console.log(`私の名前は${name}です`);

}
//実行結果

"私の名前は田中太郎です"

"私の名前は山田太郎です"

"私の名前は鈴木太郎です"

"私の名前は佐藤太郎です"

配列やJSONの値を文字列に埋め込みたい場面は多いですが、テンプレートリテラル（テンプレート文字列）のおかげで簡単に値を出力することができます。

また、用途は少し異なりますが、${}を文字列としてそのまま出力することも可能です。その場合は${}の前に\(バックスラッシュ)を付けます。

const name = 'ryohei';

console.log(`私の名前は\${name}です！`);
//実行結果

"私の名前は${name}です！"

ちゃんと${}が文字列として出力されていますね！簡単・完結ですばらしい！

ここまで便利なテンプレートリテラル（テンプレート文字列）についてご紹介してきましたが、テンプレートリテラル…実はIE11や古いスマートフォンのブラウザでは動作しません。Babelを使ったりPolyfillすれば良いですが、そのまま使用することはできないんですよね。

なので、IE11や古いスマートフォンでも使える文字列に変数を埋め込む方法を併せてご紹介できればと思います。

文字列に変数を埋め込む

IE11で文字列に変数を埋め込む（詳しくは結合）方法は従来の通りです。文字列と文字列を+(プラス)で結合する形になります。

const name = 'ryohei';

console.log('私の名前は' + name + 'です！');

古いブラウザに対応する場合はご注意くださいね！

最後に

IE11を考慮しない、あるいはPolyfillするのであればテンプレートリテラル（テンプレート文字列）はかなり便利な構文です。ネックとなっているIE11については、IE11をサポートしてきたMicrosoftが2021年8月にOffice365におけるIE11のサポートを終了すると発表しているので、少しずつ動作保証から外す企業が増えていくことになるかと思います。

ただ、IT関連の企業やベンチャーはともかく、日本の企業は新しいものを受け入れることに抵抗を持っている（主観）ので、MicrosoftがIE11のサポートを終了するその日まで使い続けることになりそうですけどね…ﾄﾎﾎ

以上、JavaScriptで文字列に変数を埋め込む方法のご紹介でした！