1.模板字面量与标签函数 ;对象与数组的解构.

1. 模板字面量

 <script>
      let gs = 1.7, //声明 赋值
        dj = 1.6,//声明 赋值
        str = `小明身高${gs}+小红${dj} 总和:${gs + dj}`;//模板
      console.log(str); //打印模板
    </script>

效果:

总结:模板里的变量gs、dj和表达式 gs+dj在模板字面量中叫差值,需要用${}把它们包起来.

2.标签函数

   <script>
      let gs = 1.7,
        dj = 1.6,
        str = `小明身高${gs}+小红身高${dj} 总和:${gs + dj}`;
      console.log(str);
      function xm(literals, val1, val2) { //lieterals对应模板的字符串
                                          //val1  对应模板里的第一个差值
                                          //val2  对应模板里的第二个差值
        let str =
        `<td> ${literals[0]}${val1}</td> //定义它用表格显示
         <td>${literals[1]}${val2}</td> //定义它用表格显示
         <h3>${literals[2]}${val1 + val2}</h3>    `;//定义它标签显示
        return str;
      }
      console.log(str);
      let bc = xm`小明身高${gs}+小红身高${dj} 总和:${gs + dj}`;//调用模板字面量
      document.body.appendChild(document.createElement("tr")).innerHTML = bc;
    </script>

效果:
总结标签函数是把字面量里的字符串和差值可以自定义用标签代码在浏览器渲染出来.

3.对象结构

 <script>
  const name = {
        xm: "小明",
        sg: 1.7,     //这是个数组结构
      };
      let xm, sg;
      xm = "小明";
      sg = 1.7;              //声明赋值
      console.log(xm, sg);
      ({ xm, sg } = name);
      console.log(xm, sg);  //结构赋值 注意加括号
      ({ xm, sg, sex } = name);
      console.log(xm, sg, );     //不完全结构赋值
      ({ xm, sg, sex = `xb` } = name);   //默认赋值
      console.log(xm, sg, sex);
      ({ xm, sg, sex: gender = `xb` } = name);//给sex起个别名
      console.log(xm, sg, sex);
    </script>

效果:

4.数组结构

 <script>
      const name = [40, 80, 90];
      let [补考, 合格, 优秀] = name;
      console.log(补考, 合格, 优秀);
      let [a, [b], c] = [40, [80], 90];
      console.log(a, b, c);          //以上都是完全结构赋值
      [a, ...b] = [1, 2, 3];
      console.log(a, b);       //此时 a=1 b=2和3
      [a, b, c, d] = [1, 2, 3];
      console.log(a, b, c, d);  //不完全结构 最后一个会显示undefined
      [a, b, c, d = 888] = [1, 2, 3];
      console.log(a, b, c, d);       //默认值
    </script>

效果图