JS-带标签的模板字符串

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

前言

模板字符串是日常开发中的一大利器，帮助开发人员免去繁琐的字符串拼凑，以直观、简洁的方式动态生成了字符串。

但模板字符串还有比较特殊的用法，那就是带标签的模板字符串，说白了就是作为函数的参数，但是形式上可以不需要小括号 () 包裹。

例子

假设定义了如下的数据和函数，数据是个人信息数据，函数是用于判断输入的模板字符串所表达的内容是否为真，那么代码如下：

// 定义测试数据
const person1 = {
  name: 'Bear',
  age: 18,
  gender: 'male'
}
const person2 = {
  name: 'White Bear',
  age: 20,
  gender: 'female'
}
const personList = [person1, person2]

/**
 * 判断是否为真话
 * @return string
 */
function isSentenceBeTure (sentence, name, key, value) {
  // 值列表
  const values = [name, key, value]
  // 选中目标对象
  const targetPerson = personList.find(item => item.name === name)
  // 不存在，则返回提示
  if (!targetPerson) {
    return 'This person does not exist !'
  }
  // 存在，返回判断结果
  return sentence.map((item, index) => item + (values[index] || '')).join('') + ` -- It is ${targetPerson[key] === value} !`
}

带标签的模板字符串写法如下：

const key = 'age'
console.log('result:', isSentenceBeTure `${person1.name}'s ${key} is ${18}`)
// result: Bear's age is 18! -- true

可以看到这种写法于普通函数最大的不同在于不需要小括号 () 包裹。

参数

这种函数接受的参数也有特殊之处，还是以上面的函数为例子：

isSentenceBeTure `${person1.name}'s ${key} is ${18}`

此时，isSentenceBeTure 函数会接受到四个参数，打印出来如下：

1. 第一个参数是传入模板字符串拆分而成的字符串数组；
2. 第2、3、4个参数，是传入模板字符串上的插值，就是模板字符串上有多少值需要动态插入，后续就有多少的参数；
3. 在本文中，传入的模板字符串上有有 3 个值需要动态插入，加上模板字符串拆分而成的数组，一共是 4 个参数。

所以本文在定义函数时，依次命名参数，执行上面的测试代码时，函数获取到的参数如下：

1. 第一个参数代表模板字符串拆分而成的字符串数组；
2. 第二个参数为第一个插入的值，为 person1.name，即 'Bear';
3. 第三个参数为第二个插入的值，为 key, 即 'age';
4. 第四个参数为第三个插入的值，为 18;

使用

最终使用的时候，就是 函数名 + 模板字符串即可，如下：

const key = 'age'
// 执行函数 -- 函数名 + 模板字符串
isSentenceBeTure `${person1.name}'s ${key} is ${20}`
// 返回值: Bear's age is 20 -- It is false !