JS模板字面量标签函数

定义

• 标签函数 会接收被插值记号分隔后的模板和对每个表达式求值的结果。
• 标签函数本身是一个常规函数，通过前缀到模板字面量来应用自定义行为。
• 标签函数 接收到的参数依次是原始字符串数组和对每个表达式求值的结果。

举个栗子

let a = 1;
let b = 2;
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 }`;
 // ["", " + ", " = ", ""] 
// 1
// 2
// 3
console.log(untaggedResult);// "1 + 2 = 3"
console.log(taggedResult);// "foobar"

• console.log(strings);
  是[“”, " + ", " = “, “”] ，第一个符号前和最后一个符号后用”"表示，其他符号就用本身表示(+、=)，不管中间有多少插值，只会取符号

• console.log(aValExpression);
  就是${ a }的值1

• console.log(bValExpression);
  就是${ b }的值2

• console.log(sumExpression);
  就是${ a + b }的值3

模板字面量过长

• 参数就是不定的，可以用剩余操作符(…)表示

let a = 1;
let b = 2;
function simpleTag(strings, ...expressions) {
  console.log(strings);
  for(const expression of expressions) {
    console.log(expression);
  }
  return 'foobar';
}
let taggedResult = simpleTag`${ a } + ${ b } = ${ a + b }`;
// ["", " + ", " = ", ""]
// 1
// 2
// 3
console.log(taggedResult);  // "foobar"

• 有 n 个插值的模板字面量，传给标签函数的表达式参数的个数始终是 n，而传给标签函数的第 一个参数所包含的字符串个数则始终是 n+1。因此，如果你想把这些字符串和对表达式求值的结果拼接 起来作为默认返回的字符串，可以这样做:

let a = 1;
let b = 2;
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);  // "1 + 2 = 3"
console.log(taggedResult);    // "1 + 2 = 3"