ES6标签模板的使用方式

1. 标签模板

标签模板需要结合模板字面量（模板字符串）一起使用
标签模板可以理解成是一种特殊形式的函数调用
- 函数名就是标签名，在模板字面量的前面
- 调用参数就是模板字面量
标签函数：就是以标签模板中标签名命名的函数
标签函数中的参数 : tag(stringArr,...values)
- stringArr : 收集模板字面量中除变量占位符（${}）外的所有字符串组成的数组，并且始终最后一个元素是空字符串（""）
- values ：收集模板字面量中所有变量占位符中变量组成的数组
标签模板系统约定：stringArr的长度始终会比values的长度多1，无论模板字符串中的样子长什么样，都是如此，因为它是以变量占位符作为分离点分离，并且会默认让stringArr的最后一个元素为空字符，当然如果最后一个元素在模板字符串中已经定义，则不会形成空字符

2. 标签模板示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1. 使用模板字面量输出字符串
      let name = "jack";
      let site = "php.cn";
      let str1 = `hello ${name} , 欢迎来到 ${site}`;
      console.log(str1); // hello jack , 欢迎来到 php.cn
      // 2. 使用标签模板输出字符串
      let str2 = tag`hello ${name} , 欢迎来到 ${site}`;
      function tag(stringArr, ...values) {
        console.log(stringArr); // (3) ["hello ", " , 欢迎来到 ", "", raw: Array(3)]
        console.log(values); //    (2) ["jack", "php.cn"]
        let result = "";
        for (let i = 0; i < values.length; i++) {
          result += stringArr[i];
          result += values[i];
        }
        result += stringArr[stringArr.length - 1];
        return result;
      }
      console.log(str2); // hello jack , 欢迎来到 php.cn
      // 3. 改写标签模板输出字符串的值
      let str3 = show`hello ${name} , 欢迎来到 ${site} !!!`;
      function show(stringArr, ...values) {
        console.log(stringArr); // (3) ["hello ", " , 欢迎来到 ", " !!!", raw: Array(3)]
        console.log(values); //    (2) ["jack", "php.cn"]
        let result = "";
        for (let i = 0; i < values.length; i++) {
          result += stringArr[i];
          values[i] = i === 0 ? "mike" : "qq.cn";
          result += values[i];
        }
        result += stringArr[stringArr.length - 1];
        return result;
      }
      console.log(str3); // hello mike , 欢迎来到 qq.cn !!!
      // 总结：
      // 1. 从示例1和示例2看，感觉使用标签模板输出就是多此一举，效果都一样，但是代码量增大了
      // 2. 从示例3看，可以看出一些差别：示例1只是一个简单的声明变量，输出字符串而已，但是在实际开发中，肯定不会这样的
      //    我们通常会这些变量（比如：用户的输入）进行一些操作（比如：修改、过滤等等），如果使用标签模板，就可以拿到这些
      //    变量，然后在标签函数中对这些变量做出一些规定，最后再把经过我们自定义规则的字符串输出
    </script>
  </body>
</html>

3. 标签模板中的遍历方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let name = "jack";
      let site = "php.cn";
      let str1 = tag1`hello ${name} , 欢迎来到 ${site}`;
      function tag1(stringArr, ...values) {
        let result = "";
        // 遍历方式一：以长度较短的数组为基准
        for (let i = 0; i < values.length; i++) {
          result += stringArr[i];
          result += values[i];
        }
        result += stringArr[stringArr.length - 1];
        return result;
      }
      console.log(str1); // hello jack , 欢迎来到 php.cn
      /************************************************************/
      [name, site] = ["mike", "qq.cn"];
      str1 = tag2`hello ${name} , 欢迎来到 ${site}`;
      function tag2(stringArr, ...values) {
        let result = "";
        // 遍历方式二：以长度较长的数组为基准
        for (let i = 0; i < stringArr.length; i++) {
          result += stringArr[i];
          if (values[i]) {
            result += values[i];
          }
        }
        return result;
      }
      console.log(str1); // hello mike , 欢迎来到 qq.cn
      /************************************************************/
      // 总结：以上两种遍历方式，我觉得都可行，只不过第一种比较直观，代码简洁，好理解
      //      而第二种多了一层判断，所以从执行效率上讲，也许第一种稍高些
    </script>
  </body>
</html>

1. 标签模板

2. 标签模板示例

3. 标签模板中的遍历方式

相关文章