微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 UI设计 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > 模板字面量与标签模板
博主信息
博文 55
粉丝 3
评论 0
访问量 70564
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
模板字面量与标签模板
王佳祥
原创
1175人浏览过

模板字面量与标签模板

一、数组解构中不定元素

  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返回原始值
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：模板标签也是函数调用很像的
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录