PHP大牛成长之路：ES6的模板自变量及模板标签

 // 标签函数
      // tag(strings, ...values)
      let width = 100;
      let height = 30;
      // 标签后面的模板字面量必须要保证第一个和最后一个必须是字符串
    //   let area = calculateArea`${width} * Height: ${height} = Area: ${width * height}`;
    //   let area = calculateArea`${width} * ${height} = ${width * height}`;
      let area = calculateArea`<script>alert("width:${width},height:${height},Area:${width * height}")<\/script>`;
      // 定义这个标签对应的函数
      function calculateArea(strings, ...values) {
        console.log(strings);
        console.log(values);
        // 当前模板字面量中的字面量数组元素数量总是比表达式占位符数量多1
        // console.log(strings.length === values.length + 1);
        let result = "";
        for (let i = 0; i < values.length; i++) {
          result += strings.raw[i];
          result += values[i];
        }
        // 添加最后一个字符字面量到结果中
        result += strings.raw[strings.raw.length - 1];
        return result;
      }
        console.log(area);

总结：

1、模板字面量是增强版的字符串，它用反引号string标识;
2、ES6 使用模板字面量创建多行字符串更加简单（不需要加换行符）;
3、变量占位符由起始的 ${ 变量名 }模板字面量中使用;
4、作业：自定义一个模板字面量,并使用标签模板进行处理,注意标签函数中的参数以及遍历方式（不理解，疑问如下：）

• 4.1、标签后面的模板字面量必须要保证第一个和最后一个必须是字符串，我全部使用变量也没有问题？
• 4.2、模板标签用途完全感受不到，反而感觉多此一举，函数返回字符串和我直接打印模板字面量有什么区别？

结论：感冒流着鼻涕听课，但还是没听懂，不明白模板标签应用场景，请老师指点。