模板字面量标签函数

1.模板字面量也支持定义标签函数，而通过标签函数可以自定义插值行为。标签函数会接收被插值记号分隔后的模板和对每个表达式求值的结果。

2.标签函数本身是一个常规函数，通过前缀到模板字面量来应用自定义行为，如下例所示。标签函数接收到的参数依次是原始字符串数组和对每个表达式求值的结果。这个函数的返回值是对模板字面量求值得到的字符串。

案例

let a=6;
let b=9;
function simpleTag(strings,aValExpression,bValExpression,sumExpression){
  console.log(strings);
  console.log(aValExpression); 
  console.log(bValExpression); 
  console.log(sumExpression); 
  retrun 'footbar';
}

let untaggedResult=`${a}+${b}=${a+b}`;



let taggedResult=simpleTag`${a}+${b}=${a+b}`;
//["","+","=",""]
//6
//9
//15

console.log(untaggedResult)   //'6+9=15'
console.log(taggedResult)      //'foobar'

因为表达式参数的数量是可变的，所以通常使用剩余操作符将它们收集到一个数组中：

let a=6;
let b=9;
function simpleTag(strings,...expressions){
  console.log(strings);
  for(const expression of expressions){
    console.log(expression)
}
}


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}${string[i+1]}`).join('');  
}

let untaggedResult=`${a} + ${b}=${a+b}`;
let taggedResult=zipTag`${a} + ${b}=${a+b}`;

console.log(untaggedResult);    //"6+9=15"
console.log(taggedResult);    //"6+9=15"