JSテンプレートリテラル ${ }

はじめに

業務で使用したプロジェクトの中に、このような書き方があり、「バッククオートで囲む？」「${}って書き方あるん？」と思ったので簡単に調べました。

.js

{
//略
href: `${process.env.BASE_URL}/sample/sample.html`,
//略
}

テンプレートリテラル

結論から言うと、ECMAScript 6 （2015年）から導入された構文で、テンプレートリテラルといいます。バッククオートで囲みます。

改行がそのまま反映される

.js

const sentence = `むかーしむかし
あるところに
おじいさんとおばあさんがいました`

これと

.js

const sentence = "むかーしむかし\nあるところに\nおじいさんとおばあさんがいました"

これは一緒ということです。

文字列の中に式を埋め込める

.js

console.log(`500円の商品の税込価格は${500*1.1}円です。`)
// 結果：　500円の商品の税込価格は550円です

${ func() } このようにテンプレートリテラル内で、メソッドを呼び出すこともできます。

さいごに

記事を読んでいただきありがとうございました。ほかにもテンプレートリテラルを使って、色々できそうです。

参照記事

• テンプレートリテラル（MDN）