JavaScript のTemplate Literal を使う

php や Perl でよく使う「ヒアドキュメント」。

JavaScriptでは、ES2015から「Template Literal」 として、ヒアドキュメント的な記述ができることを知りました。

備忘録がてらメモしておきます。

Template Literal (テンプレートリテラル)とは

JavaScriptで複数行の文字列や文字列内挿入ができる仕様、いわゆるヒアドキュメントに近い。

書き方

文字列をバッククオート(バックティック)で囲む。

`aaa`

`
aaa
bbb
`

// 変数にも格納できる

const text = `
aaa
bbb
ccc
`

文字列の出力

const text1 = `
aaa
bbb
ccc

// htmlもコメントもそのまま出力される

<h1>見出し1</h1>
<p>パラグラフ</p>

`

console.log(text1)

出力結果は

aaa
bbb
ccc

// htmlもコメントもそのまま出力される

<h1>見出し1</h1>
<p>パラグラフ</p>

変数の展開

変数を出力するときは

${変数}

として展開する

const char = 'ddd';

const text2 = `
aaa
bbb
ccc

${char}
`
console.log(text2)

出力結果は

aaa
bbb
ccc

ddd

式の展開

計算式も ${式} として展開する

const char = 'ddd';

const number = 10;

const text3 = `
aaa
bbb
ccc
${char}
${number * 10}
`

console.log(text3)

出力結果は

aaa
bbb
ccc
ddd
100

参考URL