ECMAscript新特性 - 模版字符串标签函数 Tagged template

208 阅读1分钟

模版字符串还有一个更高级的用法,就是在定义在模版字符串之前去添加一个标签。这个标签实际上就是一个特殊的函数,添加这个标签就是调用这个函数。

const str = tag`hello world`
console.log`hello world` // ['hello world']

标签函数接收到的第一个参数是一个数组,它实际上是模版字符串内容分割后的结果。这是因为在模版字符串当中可能会有嵌入的差值表达式,所以说这个数据就是按照表达式分割过后那些静态的内容,所以说它是一个数组。除了这个数组以外这个函数还可以接收到所有的在这个模版字符串当中出现的表达式的返回值,同时这个标签函数的返回值就是带标签的模板字符串所对应的返回值。标签函数的作用实际上就是对模版字符串的加工,使用这个特性可以实现例如像文本多语言化或者检查文本是否出现不安全字符这类的需求,甚至可以使用这种特性去实现一个小型的模版引擎。

const name = 'tom';
const gender = true;
function myTagFunc (strings,name, gender) {
    const sex = gender ? 'man' : 'woman';
    return strings[0] + name + stings[1] + sex + strings[2]
}
const result = myTagFunc`hey, ${name} is a ${gender}.`