テンプレートリテラルとは
テンプレートリテラルはJavaScriptにおける文字列の生成方法の1つです。
通常の文字列はシングル( '' )またはダブル( "" )のクォーテーションを使用した場合は文字列のみしか入れることができません。
しかし、テンプレートリテラル( `` )は以下の3つの特徴があります。
1. 式・変数・関数埋め込み
テンプレートリテラル内に ${} を使って式を埋め込むことができます。
これにより、文字列内で変数や式を直接評価が可能です。
const a = 1
const b = 2
console.log(`${a} + ${b} = ${a + b}`)
// 1 + 2 = 3
2. 複数行の文字列
テンプレートリテラルを使用しない場合、改行には\nを使用して以下のようになります。
見ての通り、\nが混在していると可読性が非常に悪いです。
const m = 'new line1\nnew line2\nnew line3'
console.log(m)
// new line1
// new line2
// new line3
テンプレートリテラルを使用すれば改行をコードないに直接入れることができます。
const m = `new line1
new line2
new line3`
console.log(m)
// new line1
// new line2
// new line3
テンプレートリテラルで改行する場合は以下のように書くと、最初の1行目の改行も含まれてしまうので注意が必要です。
const m = `
new line1
new line2
new line3
`
console.log(m)
//
// new line1
// new line2
// new line3
これを防ぐには最後にtrim()を付けます。
const m = `
new line1
new line2
new line3
`.trim()
console.log(m)
// new line1
// new line2
// new line3
ただし、インデントはtrim()では除去できないので、インデントも除去する場合はreplace(/^\s+/gm, '')で置換します。
const m = `
new line1
new line2
new line3
`.replace(/^\s+/gm, '')
console.log(m)
// new line1
// new line2
// new line3
3. タグ付きテンプレート
テンプレートリテラルを前処理する関数を指定できます。
これにより、テンプレートリテラルの処理をカスタマイズできます。
function tag(strings, ...values) {
return strings.reduce((acc, str, i) => {
return acc + str + (values[i] ? values[i] : '')
}, '足し算: ')
}
let a = 3
let b = 4
console.log(tag`a + b = ${a + b}`)
// 足し算: a + b = 7
タグ付きテンプレートは認知度が低くて記述ミスだと誤解されることがあるので、なるべく使用しないほうが良いです。
コードで見かけたら「これはタグ付きテンプレートだな」と認識はできるようにすると良いでしょう。
