实例演示模板字面量和标签函数

实例演示模板字面量

模板自变量实例演示，先上代码吧！！

<script>
      let age = "20";
      let name = "技术小白白";
      let text = `这是一段话，我是${name},\n现在时间是9点${age}，为了写这段话，我学了好久才搞明白;`;
      console.log(text);
    </script>

效果图在这，注意圈到的地方！！

模板字面量主要是解决了大量字符串和变量拼接时使用过多的引号和加号的问题，以 反引号``包裹 ，变量使用$开头，{}包裹,字符串则正常书写,模板字面量中,变量或表达式叫”插值”, 变量和表达式必须返回一个值

实例演示标签函数,代码如下：

<script>
      let num = "20";
      let photo = "100";
      let zong = `手机：${photo} 价格：${num} 总价：${num * photo}`;
      console.log(zong);
      function zzz(hanzi, val1, vl2) {
        //   此时写完后  可以验证自己定义的是否生效，现在代码显示是原始字符串数据中的总价
        console.log(hanzi[2]);
        // 按书写顺序，vl2对应的是下面xxx表达式的${num}，也就是20，
        console.log(vl2);
        console.log(val1);
        // 现在可以根据下方xxx来自定义生成表达式
        let xxx = `<li>${hanzi[0]}${val1}</li><li>${hanzi[1]}${vl2}</li><h1>${hanzi[2]}${val1 * vl2}</h1>`;
        return xxx;
      }
      let xxx = zzz`手机：${photo} 价格：${num} 总价：${num * photo}`;
      console.log(xxx);
    </script>

效果图

标签函数: 用来自定义模板字面量中的插值的行为
第一个参数必须是模板字面中的原始字符串的内容组成的数组, 从第二个开始,与模板字面量中的插值一一对应