博客列表 >1.模板字面量与标签函数 ;对象与数组的解构.

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

骨头
骨头原创
2020年11月05日 16:58:46622浏览

1. 模板字面量

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

效果:

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

2.标签函数

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

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

3.对象结构

  1. <script>
  2. const name = {
  3. xm: "小明",
  4. sg: 1.7, //这是个数组结构
  5. };
  6. let xm, sg;
  7. xm = "小明";
  8. sg = 1.7; //声明赋值
  9. console.log(xm, sg);
  10. ({ xm, sg } = name);
  11. console.log(xm, sg); //结构赋值 注意加括号
  12. ({ xm, sg, sex } = name);
  13. console.log(xm, sg, ); //不完全结构赋值
  14. ({ xm, sg, sex = `xb` } = name); //默认赋值
  15. console.log(xm, sg, sex);
  16. ({ xm, sg, sex: gender = `xb` } = name);//给sex起个别名
  17. console.log(xm, sg, sex);
  18. </script>

效果:

4.数组结构

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

效果图

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议