博客列表 >模板字面量与标签函数,解构赋值相关整理

模板字面量与标签函数,解构赋值相关整理

α清尘
α清尘原创
2020年11月04日 17:06:39809浏览

模板字面量与标签函数

模板字面量可以将它理解为加强版的字符串;通过反引号进行定义;

实例:

  1. <script>
  2. let model=`模板字面量利用反引号标识`
  3. console.log(model);
  4. // 模板字符串的写法可以直接用${value}嵌入表达式;
  5. let a = 10,
  6. b = 30;
  7. result=`现在是上午 ${a} ${b} `;
  8. console.log(result)
  9. // 查看原始类型
  10. console.log( typeof result)
  11. </script>

控制台打印结果:


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

实例展示:

  1. <script>
  2. let people=6,
  3. age=8;
  4. str = `商品数量: ${people} 单价: ${age} 总计: ${people * age}`;
  5. console.log(str);
  6. function show(strings,people,age){
  7. console.log(strings);
  8. console.log(people,age);
  9. let s = `${strings[0]}${people}
  10. ${strings[1]}${age}
  11. ${strings[2]}${people*age} `
  12. return s;
  13. }
  14. let res = show `人数: ${people} 年龄:${age} 年龄一共:${people * age}岁`;
  15. console.log(res);
  16. </script>

控制台打印结果:

解构赋值

什么是解构赋值?

解构是es6的一种语法规则,将一个对象或数组的某个属性提取到某个变量中;
解构赋值是允许使用数组或对象字面量的语法将数组和对象的属性赋值给各种变量。

  1. 对象解构
    实例:

    1. <script>
    2. // 对象解构
    3. const user = {
    4. name: "qing",
    5. adress:"重庆",
    6. };
    7. let {name,adress}=user;
    8. name= "qing";
    9. adress="重庆";
    10. console.log(name,adress);
    11. </script>

    打印结果:

  2. 数组结构

    数组实质上就是一个对象,我们可以用解构对象的方式来解构数组;

实例:

  1. <script>
  2. // 数组解构
  3. const number=[12,13,14,15,16];
  4. let[n1,n2,n3,n4]=number;
  5. console.log(n1,n2,n3,n4);
  6. // 不完全解构
  7. [a, ...b]=[1,2,3];
  8. console.log(a,b);
  9. [a,b,c,d]=[1,2,3]
  10. console.log(a,b,c,d);
  11. [a,b,c=666]=[1,2]
  12. console.log(a,b,c);
  13. </script>

打印结果:

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