Edited at

JavaScript のTemplate Literal を使う

More than 1 year has passed since last update.

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

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings