Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 模板字面量与标签模板
Blogger Information
Blog 55
fans 3
comment 0
visits 54659
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
模板字面量与标签模板
王佳祥
Original
948 people have browsed it

模板字面量与标签模板

一、数组解构中不定元素

  1.       let fruits = ["apple", "cherry", "peach", "pear", "lemon", "mango"];
  2.       //任务：从第三个元素开始，将所有元素放到另一个数组中
  3.       //第一种方法
  4.       let arr = fruits.slice(2);
  5.       console.log(arr);
  6.       //第二种方法 ...两种应用场景 ...rest:归纳 ...sprad:打散
  7.       let [firstFruit, secondFruit, ...restFruits] = fruits;
  8.       console.log(firstFruit, secondFruit);
  9.       console.log(restFruits);
  10.       console.log(...restFruits);

  1.       //数组合并
  2.       let old = [1, 2, 3];
  3.       let tmp1 = [8, 9, 10];
  4.       let tmp2 = ["a", "b", "c"];
  5.       let res = old.concat(tmp1, tmp2);
  6.       console.log(res);
  7.       console.log(old);
  8.       console.log(old.concat(old, old));

  1.       //数组克隆
  2.       let n = old.concat();
  3.       console.log(n);
  4.       //...rest
  5.       let [...newArr] = old;
  6.       console.log(newArr);
  7.       console.log(newArr === old);
  8.       newArr[0] = 50;
  9.       console.log(newArr);
  10.       console.log(old);

二、函数中的解构参数

  1.       //1.传统方式
  2.       let setUser = function (id, userInfo) {
  3.         //要求第二个参数必须是一个对象
  4.         userInfo = userInfo || {};
  5.         let name = userInfo.name;
  6.         let email = userInfo.email;
  7.         let status = userInfo.status;
  8.         return { id, name, email, status };
  9.       };
  10.       let user = new setUser(1);
  11.       user = new setUser(1, {
  12.         name: "admin",
  13.         email: "admin@qq.com",
  14.         status: true,
  15.       });
  16.       console.dir(user);

  1.       //2.解构参数进行简化
  2.       setUser = function (id, { name, email, status }) {
  3.         return { id, name, email, status };
  4.       };
  5.       user = new setUser(1, {
  6.         name: "wang",
  7.         email: "wang@qq.com",
  8.         status: true,
  9.       });
  10.       console.dir(user);
  11.       //user = setUser(3);会报错
  12.       //在解构中禁止使用undefined,null来初始化
  13.       //let { x, y } = null;
  14.       //let { x, y } = undefined;
  16.       setUser = function (id, { name, email, status } = {}) {
  17.         return { id, name, email, status };
  18.       };
  19.       console.log(setUser(3));

  1.       //尽可能传一个有意义的值，不要传空对象{}
  2.       setUser = function (
  3.         id,
  4.         { name = "defaultName", email = "defaultEmail", status = false } = {}
  5.       ) {
  6.         return { id, name, email, status };
  7.       };
  8.       console.log(setUser(3));
  9.       //也可以统一给解构参数赋值
  10.       setUser = function (
  11.         id,
  12.         { name, email, status } = {
  13.           name: "defaultName",
  14.           email: "defaultEmail",
  15.           status: false,
  16.         }
  17.       ) {
  18.         return { id, name, email, status };
  19.       };
  20.       console.log(setUser(3));

  1.       //也可以把参数独立拿出来
  2.       const userInfo = {
  3.         name: "defaultName",
  4.         email: "defaultEmail",
  5.         status: false,
  6.       };
  7.       setUser = function (id, { name, email, status } = userInfo) {
  8.         return { id, name, email, status };
  9.       };
  10.       setUser1 = function (id, { name, email, status } = userInfo) {
  11.         return { id, name, email, status };
  12.       };
  13.       console.log(setUser(2));
  14.       //数组
  15.       const userArr = ["defaultName", "defaultEmail", "defaultStatus"];
  16.       let arr = function (id, [name, email, status] = userArr) {
  17.         return { id, name, email, status };
  18.       };
  19.       console.log(arr(1));

三、解构声明应用场景

  1.       //变量交换
  2.       //1.传统方式
  3.       let x = 10,
  4.         y = 20,
  5.         tmp;
  6.       console.log("x=%d,y=%d", x, y);
  7.       tmp = x;
  8.       x = y;
  9.       y = tmp;
  10.       console.log("x=%d,y=%d", x, y);
  11.       //2.解构方式
  12.       [y, x] = [x, y];
  13.       console.log("x=%d,y=%d", x, y);
  15.       //从函数返回多值
  16.       let demo = (function () {
  17.         return [10, 20, 30];
  18.       })();
  19.       console.log(demo);

四、传统多行字符串与变量的嵌入

  1.       //换行
  2.       let info =
  3.         "This is a first line string \
  4.          This is a second line string \
  5.          This is a three line string";
  6.       // \n \ 可以换行
  7.       info =
  8.         "This is a first line string \n \
  9.          This is a second line string \n \
  10.          This is a three line string";
  11.       info = [
  12.         "This is a first line string ",
  13.         "This is a second line string",
  14.         "This is a three line string",
  15.       ].join("<br>");
  16.       //join() 方法用于把数组中的所有元素放入一个字符串
  17.       //并指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符
  19.       const p = document.createElement("p");
  20.       p.innerHTML = info;
  21.       document.body.appendChild(p);
  22.       console.log(info);

  1.       //变量嵌入
  2.       let list = ["汽车", "电脑", "水果"];
  3.       let str = "";
  4.       list.forEach(function (item) {
  5.         str += "<li>" + item + "</li>";
  6.       });
  7.       console.log(str);
  8.       const ul = document.createElement("ul");
  9.       ul.innerHTML = str;
  10.       document.body.appendChild(ul);

五、模板字面量/模板字符串

  1.       //es6 使用一对反引号来解决前面的两大问题，多行字符串和变量嵌套
  2.       //1.换行
  3.       let str = `
  4.       This is a first line string
  5.       This is a second line string
  6.       This is a three line string`;
  7.       console.log(str);
  8.       str1 = `
  9.       <ul>
  10.           <li>peter</li>
  11.           <li>peter@qq.com</li>
  12.           <li>php</li>
  13.       </ul>`.trim();
  14.       //trim() 去除字符串的头尾空格
  15.       console.log(str1);

  1.       //2.变量嵌入
  2.       //占位符:${js表达式}
  3.        let username = "peter zhu";
  4.       //let message = "hello" + username;
  5.       let message = `Hello ${username}`;
  6.       console.log(message);
  7.       //表达式支持计算
  8.       console.log(`35 * 47 = ${35 * 47}`);
  9.       function getUsername() {
  10.         return username;
  11.       }
  12.       //占位表达式支持函数
  13.       console.log(`我的姓名是：'${getUsername("小王")}`);
  15.       //模板字面量支持嵌套
  16.       //`${`模板字面量`}`
  17.       console.log(`Hello ${`我的姓名是：'${getUsername("小王")}`}`); 
  18.     </script>

六、标签模板/模板标签

  1.       //1.传统函数
  2.       //alert("Hello php中文网");
  3.       //换个方式调用
  4.       //在模板字面量前面添加一个标签，就可以起到函数调用的效果
  5.       //alert Hello php中文网
  6.       //alert`你好，我又弹出来了`;
  7.       function getUser(name, email) {
  8.         console.log("My name is ", name);
  9.         console.log("My email is ", email);
  10.       }
  11.       let name = "孙悟空";
  12.       let email = "wukong@qq.com";
  13.       getUser(name, email);
  15.       //用标签模板来调用它
  16.       getUser`${name},${email}`;
  17.       //标签模板：模板字面量前是一个标识符，本质上是一个函数
  18.       //所以，我们可以认为标签模板是函数调用的特殊形式
  19.       //函数名：模板字面量前面的标识符
  20.       //调用参数：标签后面的模板字面量

  1.       //2.标签函数
  2.       //tag(strings,...vfalues)
  3.       let width = 100;
  4.       let height = 40;
  5.       //标签后面的模板字面量必须要保证第一个和最后一个必须是字符串
  6.       let area = calculateArea`Width:${width} * Height: ${height} = Area: ${
  7.         width * height
  8.       }`;
  10.       //定义这个标签对应的函数
  11.       function calculateArea(strings, ...values) {
  12.         //strings返回字面量
  13.         console.log(strings);
  14.         //values返回变量
  15.         console.log(values);
  16.         //任何时候values的值都比strings的值少1
  17.         //当前模板字面量中的子面量数组元素数量总是比表达式占位符数量多1
  18.         console.log(strings.length);
  19.         console.log(values.length);
  20.         console.log(strings.length === values.length + 1);
  21.         let result = "";
  22.         for (let i = 0; i < values.length; i++) {
  23.           result += strings[i];
  24.           result += values[i];
  25.         }
  26.         //添加最后一个字符字面量到结果中
  27.         result += strings[strings.length - 1];
  28.         return result;
  29.       }
  30.       console.log(area);

七、模板原始值

  1.       let msg = `Hello \n php.cn`;
  2.       console.log(msg);
  3.       //raw返回原始值
  4.       let str = String.raw`Hello \n php.cn`;
  5.       console.log(str);
  6.       //标签函数
  7.       function getRaw(strings, ...values) {
  8.         console.log(strings);
  9.         let result = "";
  10.         for (let i = 0; i < values.length; i++) {
  11.           result += strings.raw[i];
  12.           result += values[i];
  13.         }
  14.         //添加最后一个字符字面量到结果中
  15.         result += strings.raw[strings.length - 1];
  16.         return result;
  17.       }
  18.       let site = "php中文网";
  19.       msg = getRaw`Hello \n ${site}`;
  20.       console.log(msg);

八、学习总结

1.数组解构中不定元素

  • slice()返回一个新的数组，包含从 start 到 end 的 arrayObject 中的元素

  • ...两种应用场景 …rest:归纳 …sprad:打散

  • concat()数组合并，不传参的话会合并自身产生新的数组

  • let [...newArr] = arr;数组克隆

2.函数中的解构参数

  • 在解构中禁止使用undefined,null来初始化

  • 尽可能传一个有意义的值，不要传空对象{}

  • 可以把参数独立拿出来

3.解构声明应用场景

  • 变量交换

  • 从函数返回多值

4.传统多行字符串与变量的嵌入

  • 传统用\n \换行

  • join() 方法用于把数组中的所有元素放入一个字符串

    并指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符

  • 传统用forEach()来嵌套变量

5.模板字面量/模板字符串

  • es6 使用一对反引号来解决前面的两大问题，多行字符串和变量嵌套

  • trim() 去除字符串的头尾空格

  • 变量嵌入:占位符:${js表达式}

  • 表达式支持计算

  • 占位表达式支持函数

  • 模板字面量支持嵌套

    ${`模板字面量`}

6.标签模板/模板标签

  • 用一对 `` 来表示模板字面量

  • 在模板字面量前面添加一个标签，就可以起到函数调用的效果

  • 标签模板：模板字面量前是一个标识符，本质上是一个函数

    所以，我们可以认为标签模板是函数调用的特殊形式

    函数名：模板字面量前面的标识符

    调用参数：标签后面的模板字面量

  • 标签后面的模板字面量必须要保证第一个和最后一个必须是字符串

  • 当前模板字面量中的子面量数组元素数量总是比表达式占位符数量多1

7.模板原始值

  • raw返回原始值
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：模板标签也是函数调用很像的
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