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

JavaScriptで文字列に変数の値を埋め込む方法について書いています。
文字列に変数の値を埋め込むには、下記の方法があります。

テンプレートリテラルを使う方が、簡潔に書くことができます。
そのため、通常はテンプレートリテラルを使っていくと良いかと思います。

文字列結合で埋め込む

文字列結合で変数の内容を、文字列の中に埋め込むことができます。
例えば、下記のように使うことができます。

let text = 'hello'

result = text + ' world!!'
console.log(result) // hello world!!

最初にtext変数に文字列の「hello」を代入しています。

次の処理で、text変数と文字列の「world!!」を+演算子で結合して、result変数に設定しました。
出力すると「hello world!!」のように文字列結合されて、変数の内容も一緒に出力できました。

文字列の結合については、下記の記事にまとめたので気になる方は確認してみてください。

JavaScriptで文字列を結合(連結)する4つの方法！

JavaScriptで文字列を結合する方法について書いています。 実際に文字列を結合するときには、下記の4つの方法があります。 ・プラス演算子「+」を使う ・配列のjoinメソッドを使う ・文字列のconcatメソッドを使う ・テンプレート...

codelikes.com

2022.08.03

テンプレートリテラルで埋め込む

テンプレートリテラルを使って、変数を文字列に埋め込むことができます。

テンプレートリテラルはES6からの機能とのこと。
最新のブラウザだと問題なく使うことができます。（MDNのこちらのページにも詳細が記載されています)

let text = 'hello'

result = `${text} world!!`
console.log(result) // hello world!!

先ほどと同じように、text変数に「hello」を代入しています。

次の処理でテンプレートリテラルを使って、変数を埋め込んでいます。
バッククォート「`」を使って、囲んでいる箇所が文字列になります。

その中に「${」で初めて、変数名を書いて「}」で閉じています。
これで、文字列の中に変数の値が埋め込まれます。

コンソールで出力すると「hello world!!」のように文字列の「hello」が埋め込まれて出力されました。

複数の変数を埋め込む

複数の変数を埋め込むときも、同じように「${}」の中に書いて埋め込みます。
下記のように、複数の変数を埋め込むことができます。

let apple = "りんご"
let grape = "ぶどう"
let banana = "バナナ"

result = `フルーツは${apple}・${grape}・${banana}です。`
console.log(result) // フルーツはりんご・ぶどう・バナナです。

最初にapple・grape・bananaのそれぞれの変数に果物の名前の文字列を代入しました。

次の処理で、テンプレートリテラルを使って、変数を文字列に展開しています。
先ほどと同じように「${}」の中に変数名を並べるだけです。

出力すると「フルーツはりんご・ぶどう・バナナです。」となりました。
このように複数の変数も、簡単に文字列の中に展開することができます。

計算式を埋め込む

バッククォートで文字列を作成した中に、計算式を書くこともできます。

let calcResult1 = `1 + 1 = ${1 + 1} です！`
let calcResult2 = `2 * 8 = ${2 * 8} です!`

console.log(calcResult1) // 1 + 1 = 2 です！
console.log(calcResult2) // 2 * 8 = 16 です!

バッククォートの中に、変数を展開するかわりに計算式を書いています。
最初に足し算の「1 + 1」をしていますが、その結果が展開されます。

次に掛け算の「2 * 8」の結果が展開されます。
それぞれ変数で受け取って出力すると、下記のようになりました。

1 + 1 = 2 です！
2 * 8 = 16 です!

このように、計算式を書いて結果を展開することも可能です。

文字列に変数を埋め込む方法まとめ

今回はJavaScriptで文字列に変数を埋め込む方法について書きました。
記事の内容をまとめると、下記のようになります。