1分でわかるJavaScriptのタグ付けされたテンプレートリテラル

タグ付けされたテンプレートリテラルとは

テンプレートリテラルの高度な使用方法のこと。

テンプレートリテラルは下記のように``内で文字列と変数を同時に記述することができる。

var str = 'Hello'
console.log(`${str} world!`)
// Hello world!

タグ付けされたテンプレートリテラルは関数で内容を解析して返せる。

例としてコードを書くとこのようになる。

const str = 'おはよう'
const name = '佐藤'

function tag(strings, ...values) {
  console.log(strings)
  //  ["サンプル！", "、", "さん", raw: Array(3)]
  console.log(values)
  // ["おはよう", "佐藤"]
  return `${strings[0]}${values[0]}${strings[1]}${values[1]}${strings[2]}`
}
const result = tag`サンプル！${str}、${name}さん`

console.log(result)
// サンプル！おはよう、佐藤さん

見ての通り関数の第1引数で複数の文字列、第2引数以降はスプレッド構文を使用して変数をそれぞれ配列で受け取ることができる。

そのため、タグ付けされたテンプレートリテラルを使用すれば関数内で条件を付けて内容を変えることなどができるようになる。

const str = 'おはよう'
const name = '佐藤'

function tag(strings, ...values) {
  console.log(strings)
  //  ["サンプル！", "、", "さん", raw: Array(3)]
  console.log(values)
  // ["おはよう", "佐藤"]
  const _name = new Date().getHours() < 12 ?
    values[1].replace('佐藤', '山田') :
    values[1]
  return `${strings[0]}${values[0]}${strings[1]}${_name}${strings[2]}`
}
const result = tag`サンプル！${str}、${name}さん`

console.log(result)
// （午前だと）サンプル！おはよう、山田さん
// （午後だと）サンプル！おはよう、佐藤さん

最初が変数だとstrings[0]は空になる

下記のように最初が変数だとstrings[0]は空になるので注意が必要。

const str = 'おはよう'
const name = '佐藤'

function tag(strings, ...values) {
  console.log(strings)
  //  ["", "、", "さん", raw: Array(3)]
  console.log(values)
  // ["おはよう", "佐藤"]
  const _name = new Date().getHours() < 12 ?
    values[1].replace('佐藤', '山田') :
    values[1]
  return `${strings[0]}${values[0]}${strings[1]}${_name}${strings[2]}`
}
const result = tag`${str}、${name}さん`

console.log(result)
// 午前: おはよう、山田さん
// 午後: おはよう、佐藤さん