模板字面量也支持定义标签函数(tag function)，而通过标签函数可以自定义插值行为。标签函数 会接收被插值记号分隔后的模板和对每个表达式求值的结果。
标签函数本身是一个常规函数，通过前缀到模板字面量来应用自定义行为。标签函数 接收到的参数依次是原始字符串数组和对每个表达式求值的结果。
这个函数的返回值是对模板字面量求 值得到的字符串。
最好通过一个例子来理解:
let a = 6;
let b = 9;
function simpleTag(strings, aValExpression, bValExpression, sumExpression) {
console.log(strings);
console.log(aValExpression);
console.log(bValExpression);
console.log(sumExpression);
return 'foobar';
}
let untaggedResult = `${
a } + ${
b } = ${
a + b }`;
let taggedResult = simpleTag`${
a } + ${
b } = ${
a + b }`;
// ["", " + ", " = ", ""]
// 6
// 9
// 15
console.log(untaggedResult);
console.log(taggedResult);
// "6 + 9 = 15"
// "foobar"
因为表达式参数的数量是可变的，所以通常应该使用剩余操作符(rest operator)将它们收集到一个 数组中:
let a = 6;
let b = 9;
function simpleTag(strings, ...expressions) {
console.log(strings);
for(const expression of expressions) {
console.log(expression);
}
return 'foobar';
}
let taggedResult = simpleTag`${
a } + ${
b } = ${
a + b }`;
// ["", " + ", " = ", ""]
// 6
// 9
// 15
console.log(taggedResult); // "foobar"
对于有 n 个插值的模板字面量，传给标签函数的表达式参数的个数始终是 n，而传给标签函数的第 一个参数所包含的字符串个数则始终是 n+1。因此，如果你想把这些字符串和对表达式求值的结果拼接 起来作为默认返回的字符串，可以这样做:
let a = 6;
let b = 9;
function zipTag(strings, ...expressions) {
return strings[0] +
expressions.map((e, i) => `${
e}${
strings[i + 1]}`)
.join('');
}
letuntaggedResult= `${
a}+${
b}=${
a+b}`; let taggedResult = zipTag`${
a } + ${
b } = ${
a + b }`;
console.log(untaggedResult); // "6 + 9 = 15"
console.log(taggedResult); // "6 + 9 = 15"