search

博客列表 >PartIII 03 模板字面量与标签模板（0902wed）

PartIII 03 模板字面量与标签模板（0902wed）

老黑
老黑原创
2020年09月05日 21:58:59850浏览

主要内容：

  1. 数组结构中的不定元素
  2. 函数中的解构参数
  3. 解构声明应用场景
  4. 传统多行字符串与变量的嵌入（换行及空格的解决）
  5. 模板字面量/模板字符串
  6. 标签模板/模板标签
  7. 模板原始值

1. 数组结构中的不定元素

  • …rest, .concat
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>数组解构中不定元素</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       let fruits = ["apple", "cherry", "peach", "pear", "Lemon", "mango"];
  11.       // 任务:从第3个元素开始,将所有元素放到另一个数组中
  12.       let arr = fruits.slice(2);
  13.       console.log(arr);
  15.       // ...name: ...rest:归并, ...sprad: 打散
  16.       let [firstFruit, secondFruit, ...restFruits] = fruits;
  17.       console.log(firstFruit, secondFruit);
  18.       console.log(restFruits);
  19.       console.log(...restFruits);
  21.       // 数组合并
  22.       let old = [1, 2, 3];
  23.       let tmp1 = [8, 9, 10];
  24.       let tmp2 = ["a", "b", "c"];
  25.       let res = old.concat(tmp1, tmp2);
  26.       console.log(res);
  27.       console.log(old);
  28.       console.log(old.concat(old, old));
  30.       // 数组克隆
  31.       let n = old.concat();
  32.       console.log(n);
  34.       // ...rest
  35.       let [...newArr] = old;
  36.       console.log(newArr);
  38.       console.log(newArr === old);
  39.       newArr[0] = 88;
  40.       console.log(newArr);
  41.       console.log(old);
  42.     </script>
  43.   </body>
  44. </html>

2. 函数中的解构参数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>函数中的解构参数</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 1. 传统方式
  11.       let setUser = function (id, userInfo) {
  12.         // 要求第二个参数必须是对象
  13.         userInfo = userInfo || {};
  15.         let name = userInfo.name;
  16.         let email = userInfo.email;
  17.         let status = userInfo.status;
  19.         return { id, name, email, status };
  20.       };
  22.       let user = setUser(1);
  23.       user = new setUser(1, {
  24.         name: "admin",
  25.         email: "admin@php.cn",
  26.         status: true,
  27.       });
  28.       console.dir(user);
  30.       // 2. 解构参数进行简化
  31.       setUser = function (id, { name, email, status }) {
  32.         return { id, name, email, status };
  33.       };
  35.       user = setUser(1, {
  36.         name: "admin",
  37.         email: "admin@php.cn",
  38.         status: true,
  39.       });
  40.       console.dir(user);
  42.       //   user = setUser(3);
  43.       //   console.log(user);
  45.       // 在解构中,禁止使用undefind,null来初始化
  46.       //   let { x, y } = undefined;
  48.       setUser = function (
  49.         id,
  50.         { name = "defaultName", email = "defaultEmal", status = false } = {}
  51.       ) {
  52.         return { id, name, email, status };
  53.       };
  55.       user = setUser(3);
  56.       console.log(user);
  58.       const userInfo = {
  59.         name: "username",
  60.         email: "my@qq.com",
  61.         status: true,
  62.       };
  63.       setUser = function (id, { name, email, status } = userInfo) {
  64.         return { id, name, email, status };
  65.       };
  67.       setUser1 = function (id, { name, email, status } = userInfo) {
  68.         return { id, name, email, status };
  69.       };
  71.       user = setUser(3);
  72.       console.log(user);
  73.     </script>
  74.   </body>
  75. </html>

3. 解构声明应用场景

  • 变量交换
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>解构声明应用场景</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 变量交换
  11.       let x = 10,
  12.         y = 20,
  13.         tmp;
  14.       console.log("x = ", x, ", y = ", y);
  15.       //   tmp = x;
  16.       //   x = y;
  17.       //   y = tmp;
  18.       //   console.log("x = ", x, ", y = ", y);
  19.       console.log("-----------------------------");
  20.       //   [x, y] = [x, y];
  21.       [y, x] = [x, y];
  22.       //   console.log("x = ", x, ", y = ", y);
  23.       console.log("x = %d, y = %d", x, y);
  24.     </script>
  25.   </body>
  26. </html>

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

  • 会出现换行或空格问题
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>传统多行字符串与变量的嵌入</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 多行字符串
  11.       let info =
  12.         "This is a first line string \
  13.          This is a second line string \
  14.           This is three line string. ";
  16.       info =
  17.         "This is a first line string \n \
  18.           \n \
  19.           This is three line string. ";
  21.       info = [
  22.         "This is a first line string",
  23.         "This is a second line string",
  24.         "This is three line string",
  25.       ].join("<br>");
  27.       const p = document.createElement("p");
  28.       p.innerHTML = info;
  29.       document.body.appendChild(p);
  31.       console.log(info);
  33.       // 变量嵌入
  34.       let list = ["汽车", "电脑", "水果"];
  35.       let str = "";
  36.       list.forEach(function (item) {
  37.         str += "<li>" + item + "</li>";
  38.       });
  40.       const ul = document.createElement("ul");
  41.       p.innerHTML = str;
  42.       document.body.appendChild(ul);
  43.     </script>
  44.   </body>
  45. </html>

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

  • 包括变量嵌入
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>模板字面量/模板字符串</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // es6 使用一对反引来解决前面的二大问题
  11.       // 1. 多行字符串
  12.       let str = `
  13.       This is a first line string
  14.       This is a second line string
  15.       This is three line string.`;
  17.       str = `
  18.       <ul>
  19.           <li>Peter</li>
  20.           <li>peter@php.cn</li>
  21.           <li>lecture</li>
  22.       </ul>`.trim();
  24.       console.log(str);
  26.       // 2. 变量嵌入
  27.       // 占位符: ${js表达式}
  28.       let username = "Peter Zhu";
  29.       //   let message = "Hello " + username;
  30.       let message = `Hello ${username} , 晚上好呀`;
  31.       console.log(message);
  33.       // 占位表达式支持计算
  34.       console.log(`30 * 40 = ${30 * 40}`);
  35.       function getUsername(username) {
  36.         return username;
  37.       }
  38.       // 占位表达式支持函数
  39.       console.log(`我的姓名是: ${getUsername("朱老师")}`);
  41.       // 模板字面量支持嵌套
  42.       // `${`模板字面量`}`
  43.       console.log(`Hello ${`我的姓名是: ${getUsername("朱老师")}`}`);
  44.     </script>
  45.   </body>
  46. </html>

6. 标签模板/模板标签

  • 包括标签函数
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>标签模板/模板标签</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 1. 传统函数
  11.       //   alert("Hello php中文网");
  12.       // 在一个模板字面量前面添加一个标签,就可以起到函数调用的效果
  13.       //   alert`Hello php中文网`;
  14.       function getUser(name, email) {
  15.         console.log("My name is ", name);
  16.         console.log("My email is ", email);
  17.       }
  19.       let name = "admin";
  20.       let email = "admin@php.cn";
  21.       //   getUser(name, email);
  22.       // 用标签模板来调用它
  23.       //   getUser`${name}, ${email}`;
  24.       // 标签模板: 模板字面量前是一个"标识符,本质上是一个函数"
  25.       // 所以,我们可以认为标签模板是函数调用的特殊形式
  26.       // 函数名: 模板字面量前面的标识符
  27.       // 调用参数: 标签后面的模板字面量
  29.       // 2. 标签函数
  30.       // tag(strings, ...values)
  31.       let width = 100;
  32.       let height = 30;
  33.       // 标签后面的模板字面量必须要保证第一个和最后一个必须是字符串
  34.       let area = calculateArea`Width: ${width} * Height: ${height} = Area: ${
  35.         width * height
  36.       }`;
  37.       // 定义这个标签对应的函数
  38.       function calculateArea(strings, ...values) {
  39.         // console.log(strings);
  40.         // console.log(values);
  41.         // 当前模板字面量中的字面量数组元素数量总是比表达式占位符数量多1
  42.         // console.log(strings.length === values.length + 1);
  44.         let result = "";
  46.         for (let i = 0; i < values.length; i++) {
  47.           result += strings[i];
  48.           result += values[i];
  49.         }
  50.         // 添加最后一个字符字面量到结果中
  51.         result += strings[strings.length - 1];
  52.         return result;
  53.       }
  55.       //   console.log(area);
  57.       // 3. 模板原始值
  59.       let msg = `Hello \n php.cn`;
  60.       console.log(msg);
  62.       let str = String.raw`Hello \n php.cn`;
  63.       console.log(str);
  64.       function getRaw(strings, ...values) {}
  65.     </script>
  66.   </body>
  67. </html>

7. 模板原始值

  • 最后一个貌似空字符串，但却很有用。后面vue等里面会用到
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>模板原始值</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       let msg = `Hello \n php.cn`;
  11.       console.log(msg);
  13.       let str = String.raw`Hello \n php.cn`;
  14.       console.log(str);
  16.       // 标签函数
  17.       function getRaw(strings, ...values) {
  18.         console.log(strings);
  19.         let result = "";
  21.         for (let i = 0; i < values.length; i++) {
  22.           result += strings.raw[i];
  23.           result += values[i];
  24.         }
  25.         // 添加最后一个字符字面量到结果中
  26.         result += strings.raw[strings.length - 1];
  27.         return result;
  28.       }
  30.       let site = "php中文网";
  31.       msg = getRaw`Hello \n ${site}`;
  33.       console.log(msg);
  34.     </script>
  35.   </body>
  36. </html>
上一条：let ,const功能与应用场景，对象解构与数组解构-Es6-47课9.1下一条：PartIII 02 let、const与解构赋值（0901tue）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多