模板字面量标签函数 入门

定义

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

举个梨子：

let a = 6;
let b = 7;
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
// 7
// 13
console.log(untaggedResult);// "6 + 7 = 13"
console.log(taggedResult);// "foobar"

• console.log(strings);
  是["", " + ", " = “, “”] ，${ a }、${ b }、${ a + b }用”"表示，其他符号就用本身表示(+、=)
• console.log(aValExpression);
  就是${ a }的值6
• console.log(bValExpression);
  就是${ b }的值7
• console.log(sumExpression);
  就是${ a + b }的值13

模板字面量过长

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

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

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

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

希望能帮上你~