【JavaScript】文字列の中に変数や定数を埋め込む方法「テンプレートリテラル」

テンプレートリテラル(別名:テンプレート文字列)を使えば、文字列の中に変数や定数を埋め込むことができます。

テンプレートリテラルを使って文字列の中に定数・変数を埋め込む

本来、文字列を結合する際に「+」を記述する必要がありましたが、テンプレートリテラルを用いればその必要がありません。そのため、JavaScriptの構文全体がすっきりして見やすくなります。

テンプレートリテラルを使うには「(バックコート)」で囲むだけです!

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

//変数や定数を埋め込む場合の基本構文(※バックコートで囲む!!)
`${}`

//例
let fruit = "りんご";

document.write(`私の好きな果物は ${fruit} です。`);
//表示結果
私の好きな果物はりんごです。

テンプレートリテラル式も埋め込める!

テンプレートリテラルは文字列の中に定数や変数を埋め込むだけでなく,式も埋め込むことができます。

テンプレートリテラルで式を文字列に埋め込む

本来、改行するには「\n(エスケープ)」を記述する必要がありましたが、テンプレートリテラルを利用すればそのまま改行することができます。

document.write(`1+1の答えは${1+1}です。`)

//表示結果
1+1の答えは2です。
タイトルとURLをコピーしました