【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の値を展開したいときは、テンプレートリテラルを積極的に使っ