【JavaScript】テンプレートリテラルを理解する

スポンサーリンク

モダンJavaScript(ES2015以降)に新しく使えるようになった構文でテンプレートリテラル(テンプレート文字列)があります。

文字列の中で変数を展開するときに使うのですが結構便利なので紹介したいと思います。

ポイントは以下の通りです。

  • 文字列全体をバッククォートで文字列を囲む
  • 変数を${}(ドルマークと波括弧)で囲む

ES2015以前の書き方

以前のJavaScriptでは、文字列の途中に変数を入れたいときには、 +を使って文字列と変数を結合していました。

const height = 180;
const weight = 70;

const messege = "身長は"+ height +"cmです。体重は" + weight + "kgです"

console.log(messege)
[Running] node "c:\javascript\main.js"
身長は180cmです。体重は70kgです

[Done] exited with code=0 in 0.169 seconds

これは、ログ出力などでよく使うのですが以下の点で不便です。

  • 文字列と変数を結合するために +を入れる必要がある
  • 文字列と変数の間に都度(ダブルクォート)または(シングルクォート)を入れる必要がある。

ES2015以降の書き方

ES2015以降は、文字列全体を`(バッククォート)で囲んで、変数に${}(ドルマークと波括弧)を囲むことで簡単に変数を展開できます。

const height = 180;
const weight = 70;

const messege = `身長は${height}cmです。体重は${weight}kgです。`

console.log(messege)
[Running] node "c:\javascript\main.js"
身長は180cmです。体重は70kgです。

[Done] exited with code=0 in 0.18 seconds

かなりすっきり書くことができますね!!!

他にも便利な書き方があるので紹介すると

改行がそのままかける

改行するときは\nでエスケープシーケンスを記述する必要がありましたがテンプレートリテラルならそのまま記述して改行することができます。

const height = 180;
const weight = 70;
//バッククォートで囲めば\nを書かなくても改行される
const messege = `身長は${height}cmです。
体重は${weight}kgです`

console.log(messege)
(改行された実行結果)
[Running] node "c:\javascript\main.js"
身長は180cmです。
体重は70kgです

[Done] exited with code=0 in 0.163 seconds

変数に式を埋め込むことができる

計算式をいれることもできます。ここでは、身長と体重からBMI値を変数内で計算しています。

const height = 180;
const weight = 70;
const messege = `身長は${height}cmです。
体重は${weight}kgです。
BMIは${weight / (height/100) ** 2}です。`

console.log(messege)
[Running] node "c:\javascript\main.js"
身長は180cmです。
体重は70kgです。
BMIは21.604938271604937です。

[Done] exited with code=0 in 0.23 seconds

まとめ

  • 文字列の中で変数を展開するときはテンプレートリテラルを使う。
  • テンプレートリテラルを使うときは、バッククォートで文字列を囲む
  • テンプレートリテラル内で変数を使うときは${変数}
  • テンプレートリテラルはエスケープシーケンスを書かなくても改行などが可能
  • 変数内に計算式を書くこともできる。

かなり便利な構文なので文字列内にJavaScriptの値を展開したいときは、テンプレートリテラルを積極的に使っ

コメント

タイトルとURLをコピーしました