Blogger Information
Blog 18
fans 1
comment 0
visits 17380
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
模板字面量与标签函数,解构赋值相关整理
α清尘
Original
811 people have browsed it

模板字面量与标签函数

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

实例:

  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>

打印结果:

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post