【ES】笔记-模板字符串(template string)是增强版的字符串`${expresions}`

模板字符串

  1. 传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法)。
$('#result').append('There are <b>' + basket.count + '</b> ' +'items in your basket, ' +'<em>' + basket.onSale +'</em> are on sale!'
);

上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。

$('#result').append(`There are <b>${basket.count}</b> itemsin your basket, <em>${basket.onSale}</em>are on sale!
`);
  1. 模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`// 多行字符串
`In JavaScript this isnot legal.`console.log(`string text line 1
string text line 2`);// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
  1. 上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
let greeting = `\`Yo\` World!`;
  • 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
$('#list').html(`
<ul><li>first</li><li>second</li>
</ul>
`);
  • 上面代码中,所有模板字符串的空格和换行,都是被保留的,比如
    • 标签前面会有一个换行。如果你不想要这个换行,可以使用trim方法消除它。
$('#list').html(`
<ul><li>first</li><li>second</li>
</ul>
`.trim());
  • 模板字符串中嵌入变量,需要将变量名写在${}之中。
function authorize(user, action) {if (!user.hasPrivilege(action)) {throw new Error(// 传统写法为// 'User '// + user.name// + ' is not authorized to do '// + action// + '.'`User ${user.name} is not authorized to do ${action}.`);}
}
  • 大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。
let x = 1;
let y = 2;`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
  1. 模板字符串之中还能调用函数。
function fn() {return "Hello World";
}`foo ${fn()} bar`
// foo Hello World bar
  • 如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。

  • 如果模板字符串中的变量没有声明,将报错。

// 变量place没有声明
let msg = `Hello, ${place}`;
// 报错
  • 由于模板字符串的大括号内部,就是执行 JavaScript 代码,因此如果大括号内部是一个字符串,将会原样输出
`Hello ${'World'}`
// "Hello World"
  1. 模板字符串甚至还能嵌套。
const tmpl = addrs => `<table>${addrs.map(addr => `<tr><td>${addr.first}</td></tr><tr><td>${addr.last}</td></tr>`).join('')}</table>
`;

上面代码中,模板字符串的变量之中,又嵌入了另一个模板字符串,使用方法如下。

const data = [{ first: '<Jane>', last: 'Bond' },{ first: 'Lars', last: '<Croft>' },
];console.log(tmpl(data));
// <table>
//
//   <tr><td><Jane></td></tr>
//   <tr><td>Bond</td></tr>
//
//   <tr><td>Lars</td></tr>
//   <tr><td><Croft></td></tr>
//
// </table>

如果需要引用模板字符串本身,在需要时执行,可以写成函数。

let func = (name) => `Hello ${name}!`;
func('Jack') // "Hello Jack!"

上面代码中,模板字符串写成了一个函数的返回值。执行这个函数,就相当于执行这个模板字符串了。

实例:模板编译

下面,我们来看一个通过模板字符串,生成正式模板的实例。

let template = `
<ul><% for(let i=0; i < data.supplies.length; i++) { %><li><%= data.supplies[i] %></li><% } %>
</ul>
`;

上面代码在模板字符串之中,放置了一个常规模板。该模板使用<%…%>放置 JavaScript 代码,使用<%= … %>输出 JavaScript 表达式。

怎么编译这个模板字符串呢?

一种思路是将其转换为 JavaScript 表达式字符串。

echo('<ul>');
for(let i=0; i < data.supplies.length; i++) {echo('<li>');echo(data.supplies[i]);echo('</li>');
};
echo('</ul>');

这个转换使用正则表达式就行了。

let evalExpr = /<%=(.+?)%>/g;
let expr = /<%([\s\S]+?)%>/g;template = template.replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`').replace(expr, '`); \n $1 \n  echo(`');template = 'echo(`' + template + '`);';

然后,将template封装在一个函数里面返回,就可以了。

let script =
`(function parse(data){let output = "";function echo(html){output += html;}${ template }return output;
})`;return script;

将上面的内容拼装成一个模板编译函数compile。

function compile(template){const evalExpr = /<%=(.+?)%>/g;const expr = /<%([\s\S]+?)%>/g;template = template.replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`').replace(expr, '`); \n $1 \n  echo(`');template = 'echo(`' + template + '`);';let script =`(function parse(data){let output = "";function echo(html){output += html;}${ template }return output;})`;return script;
}

compile函数的用法如下

let parse = eval(compile(template));
div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
//   <ul>
//     <li>broom</li>
//     <li>mop</li>
//     <li>cleaner</li>
//   </ul>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/25724.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TypeScript 类型断言

TypeScript 类型断言 简单来说类型断言就是 使用as关键词 强行指定获取到的结果类型 应用场景 // 类型断言: 强行指定获取到的结果类型// 应用场景// 页面上有一个 id 为 link 的 a 标签// 我们知道它是 a 标签// 但是 TS 不知道 // document.getElementById 的返回值是 HTMLE…

区块链实验室(17) - FISCO BCOS的P2P网络层分析

首先启动FISCO BCOS的示例网络&#xff0c;即4个节点的强连通网络。每个节点与其余3个节点存在网络连接。 打开控制台&#xff0c;可以看到当前有21个区块。 其中1个节点的P2P端口是30301&#xff0c;监测这个节点的端口。 该端口的部分流量见下图所示。白底部分是某1秒钟接收到…

f12 CSS网页调试_css样式被划了黑线怎么办

我的问题是这样的 class加上去了,但是样式不生效,此时可能是样式被其他样式覆盖了, 解决方案就是 给颜色后边添加一个!important

IDEA中怎么使用git下载项目到本地,通过URL克隆项目(giteegithub)

点击 新建>来自版本控制的项目 点击后会弹出这样一个窗口 通过URL拉取项目代码 打开你要下载的项目仓库 克隆>复制 gitee github也是一样的 返回IDEA 将刚刚复制的URL粘贴进去选择合适的位置点击克隆 下载完成

Java方法重写

目录 1.什么是方法重写 2.方法重写的规则 3.重写与重载的区别 1.什么是方法重写 重写&#xff08;override&#xff0c;也称为覆盖&#xff09;&#xff1a;在子类中对父类中允许访问的方法的实现过程进行重新编写&#xff0c;子类中方法的名称、返回值类型、参数列表与父类…

Linux crontab命令:循环执行定时任务(详解)

crontab 命令的基本格式如下&#xff1a; [rootlocalhost ~]# crontab [选项] [file] file 指的是命令文件的名字&#xff0c;表示将 file 作为 crontab 的任务列表文件并载入 crontab&#xff0c;若在命令行中未指定文件名&#xff0c;则此命令将接受标准输入&#xff08;键盘…

微服务基础总结

1.服务注册和发现 服务注册维护一个登记簿&#xff0c;管理系统内所有服务地址&#xff0c;服务启动后会向登记簿交待自己的地址信息。 服务注册形式&#xff1a;客户端注册和第三方注册 客户端注册&#xff08;zookeeper&#xff09; 服务自身要负责注册和注销工作&#xf…

清理c盘的垃圾。

1 清理系统缓存 1.首先使用键盘上[ WindowsR ]打开[运行] 2&#xff0c;在对话框中输入%temp%字符&#xff0c;并点击[确定] 3.选中该弹窗&#xff0c;再用[ctrlA] 进行全选 4.删除 2 清理软件 链接: https://pan.baidu.com/s/1sG70n-aEMGStv4T1YM-cPQ?pwd83rm 提取码: 83r…

部署Tomcat和jpress应用

静态页面&#xff1a;静态页面是指在服务器上提前生成好的HTML文件&#xff0c;每次用户请求时直接返回给用户。静态页面的内容是固定的&#xff0c;不会根据用户的请求或其他条件进行变化。静态页面的优点是加载速度快&#xff0c;对服务器资源要求较低&#xff0c;但缺点是无…

深入理解派生类

深入理解派生类 Created time: August 6, 2023 10:10 AM 运行时多态和编译时多态 多态是面向对象编程中的一个重要概念&#xff0c;它可以让我们以一种更加灵活的方式来处理对象&#xff0c;使得程序更加易读易维护。在C中&#xff0c;多态可以分为两种类型&#xff1a;运行…

从URL取值传给后端

从URL传值给后端 http://127.0.0.1:8080/blog_content.html?id8点击浏览文章详情&#xff0c;跳转至详情页面 从 url 中拿出文章 id&#xff0c;传给后端 首先拿到url然后判断是否有值&#xff0c;从问号后面取值params.split(&) 以 & 作为分割然后遍历字符数组 param…

TFTP 的使用操作指南(轻松入门版)

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…

RabbitMQ 生产者-消息丢失 之 场景分析

生产者-消息丢失 之 场景分析 生产者消息丢失的场景消息无法到达RabbitMQ连接断开信道关闭 RabbitMQ无法将消息入队交换机不存在无匹配队列 消息过期丢失消息丢失场景对比 生产者消息丢失的场景 生产者发送消息的流程如下&#xff1a;首先生产者和RabbitMQ服务器建立连接&…

opencv基础 42- Scharr算子-cv2.Scharr()(边缘检测基础)

Scharr算子是用于计算图像梯度的一种常用算子&#xff0c;特别是在边缘检测任务中。它是Sobel算子的改进版本&#xff0c;旨在提供更加准确和敏感的边缘检测。 在离散的空间上&#xff0c;有很多方法可以用来计算近似导数&#xff0c;在使用 33 的 Sobel 算子时&#xff0c;可能…

简述Mysql索引

一、索引概述 1.1 索引概述 MySQL官方对索引的定义为&#xff1a;索引&#xff08;Index&#xff09;是帮助MySQL高效获取数据的数据结构。 索引的本质&#xff1a;索引是数据结构。你可以简单理解为“排好序的快速查找数据结构”&#xff0c;满足特定查找算法。 这些数据结…

uniapp小程序console.log在微信开发者工具中不打印问题

最近在开发一款uniapp小程序&#xff0c;发现console.log在微信开发者工具中不打印&#xff0c;但在H5页面就能够有打印输出&#xff0c;于是在网上寻找原因… 主要是由于vue.config.js文件中有设置发布时删除console的配置&#xff0c;如下&#xff1a; 官网参考地址&#x…

静态路由 (华为设备)

默认路由&#xff1a;当路由器 收到目标地址不在路由表中的数据包时&#xff0c;将会 全部 发送 到 默认路由所定义的吓一跳 &#xff0c;作为位置地址 数据包的 最后求助方式&#xff0c;这就是默认路由器的功能&#xff0c;默认路由的使用&#xff0c;可以大大的节省系统资源…

LeetCode 130. 被围绕的区域

题目链接&#xff1a;130. 被围绕的区域 题目描述 给你一个 m x n 的矩阵 board &#xff0c;由若干字符 ‘X’ 和 ‘O’ &#xff0c;找到所有被 ‘X’ 围绕的区域&#xff0c;并将这些区域里所有的 ‘O’ 用 ‘X’ 填充。 示例1&#xff1a; 输入&#xff1a;board [[“…

SQL Server数据库如何添加mysql链接服务器(Windows系统)

SQL Server数据库如何添加mysql链接服务器&#xff08;Windows系统&#xff09; 一、说明二、下载mysql的odbc驱动三、安装mysql odbc四、配置ODBC4.1 控制面板→ODBC数据源&#xff08;64位&#xff09;→双击打开4.2 添加msql odbc数据源 五、测试添加是否成功六、打开SSMS&a…

ChatGPT的 6 个强势升级:重点是超强的文件上传和分析功能也来啦!

发布会核心概览 前日凌晨&#xff0c;OpenAI在社交平台上宣布了一系列新功能&#xff0c;旨在提升用户体验。这6 个新功能包括 “提示示例、回答建议、GPT-4默认选择、可分析上传多个文件、保持登录状态和键盘快捷键”。 其中&#xff0c;可分析上传多个文件的功能非常强大。结…