JavaScript タグ付きテンプレートリテラル

JavaScriptで以下のようなコードに出会ったことはないでしょうか。

hoge`Hello ${value1} ${value2} san`

Reactをやっていると styled components というライブラリーで出会ったことがあると思います。

これはタグ付きテンプレートリテラルという記法です。

hoge は関数です。

どのような関数かというと、第一引数にテンプレートリテラルの配列、それ以降にテンプレートリテラルに埋め込む式、になります。

実際のコードを例にすると以下のようになります。

const hoge = (template, str1, str2) => {
	console.log(template)
  console.log(str1)
  console.log(str2)
}

const value1 = 'tami'
const value2 = 'bouz'

hoge`Hello ${value1} ${value2} san`

これを実行するとコンソールには以下のように表示されます。

["Hello ", " ", " san"]
"tami"
"bouz"

実際に使用することはあまりない気がしますので、どのようなものかを知っておく程度で良いと思いました。

JavaScript

Posted by たみぼうず