js es6 模板字符
前言
es的模板字符，也就是定义了块的概念。
模板字符的二个条件:
1.必须在``中,这个`不是单引号而是反单引号，是tab的上面一个。
2.在#{}中，这个就有点意思了，里面不像后台的块级，在这里不可以去命名，只能是一个输出块，可以理解为一行语句 retrun {此处是要编译的代码}。
正文
来感受一下:
<script>
//调用了map方法，返回一个数组，后调用join将数组内的item用空字符连接起来，然后构成了一个字符串 //对<>进行转义 //对<>进行转义
const temp1 = addrs => `
<table>
${addrs.map(addr=>`<tr><td>
${zhuanyi(addr.first)}</td><td>
${zhuanyi(addr.last)}</td></tr>`
).join('')
}
</table>`
//一个json数组
const data = [{
first: '<Jame>',
last: 'Bond'
}, {
first: 'Lars',
last: '<Croft>'
}];
// 转义方法
function zhuanyi(str) {
let newstr = "";
for (var i in str) {
if (str[i] == "<") {
newstr += "<";
continue;
}
else if(str[i] == ">") {
newstr += ">";
continue;
}
newstr += str[i];
}
return newstr;
};
// 将生成的table加入到tableinsert中
$(function () {
$('#tableinsert').append($(temp1(data)));
});
</script>
</head>
<body>
<div id="tableinsert"></div>
</body>
上述中我使用了``，在内部我可以随意使用${} 进行字符串的嵌入。
效果:
js es6 模板字符的更多相关文章
- js ES6 对字符的操作注意事项
1.codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法. function is32Bit(c) { return c.codePointAt(0) > 0xFFF ...
- es6 学习2 模板字符
es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点. 1.第一个用途,基本的字符串格式化.将表达式嵌入字符串中进行拼接.用${}来界定 //es5 var name = 'lux' ...
- ES6模板字面量
前面的话 JS 的字符串相对其他语言来说功能总是有限的,事实上,ES5中一直缺乏许多特性,如多行字符串.字符串格式化.HTML转义等.ES6通过模板字面量的方式进行了填补,模板字面量试着跳出自己JS已 ...
- es6 模板字变量和字符串占位符
开发者一直在寻找一种创建多行字符串的形式,但要使用单引号双引号字符串一定要在同一行才行. 老办法: 还有其他办法,虽然能实现,但是太啰嗦 es6模板自变量 使用反撇好(`)替换了单双引号 反撇好中的所 ...
- vue 事件监听和es6模板语法
es6模板语法的反引号是通过左上角的飘字符弄出来了,学废了吗?
- js使用模板快速填充数据
1.html <!DOCTYPE html> <html> <head> <title>模板标签</title> </head> ...
- JS之模板技术（aui / artTemplate）
artTemplate是个好东西啊,一个开源的js前端模板引擎,使用简单,渲染效率特别的高. 我经常使用这个技术来在前端动态生成新闻列表,排行榜,历史记录等需要在前端列表显示的信息. 下面是artTe ...
- js正则表达式验证字符长度
原理,就是把一个汉字替换为两个字母,来实现长度验证. //js正则验证字符长度 第一种:直接输出长度 alert('1sS#符'.replace(/[^\x00-\xff]/g, 'AA').leng ...
- 【每天半小时学框架】——React.js的模板语法与组件概念
[重点提前说:组件化与虚拟DOM是React.js的核心理念!] 先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...
- js es6 map 与 原生对象区别
区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...
随机推荐
- C++ STL //vector容器存放内置数组
1 //STL初始 2 // 3 //vector容器存放内置数组 4 5 #include <iostream> 6 #include <string> 7 #include ...
- C++ //提高编程 模板（泛型编程 STL） //模板不可以直接使用 它只是一个框架 //模板的通用并不是万能的 //语法 //template<typename T> //函数模板两种方式 //1.自动类型推导 必须推导出一致的数据类型T，才可以使用 //2.显示指定类型 模板必须确定出T的数据类型，才可以使用
1 //C++提高编程 模板(泛型编程 STL) 2 //模板不可以直接使用 它只是一个框架 3 //模板的通用并不是万能的 4 //语法 5 //template<typename T> ...
- Abp.Zero 手机号免密登录验证与号码绑定功能的实现（三）：Vue网页端开发
前端代码的框架采用vue.js + elementUI 这套较为简单的方式实现,以及typescript语法更方便阅读. 首先来编写发送验证码函数, 登录,绑定,解绑的业务都需要发送验证码功能,通过c ...
- [.Net]使用Soa库+Abp搭建微服务项目框架（五）：服务发现和健康监测
上篇文章说过,服务发现和健康监测是面向服务体系架构重要的模块,Soa库可以配置使用Consul作为服务发现服务,或者轮询已配置的服务列表作为本机服务发现. 将用Hangfire来作为服务发现与健康监 ...
- Obsidian 设置快捷键 Ctrl+Shift+J 打开OB（未启动则启动，启动未激活则激活，已激活则最小化）- autoHotKey
Obsidian 设置快捷键 Ctrl+Shift+J 打开OB(未启动则启动,启动未激活则激活,已激活则最小化)- autoHotKey 需求 将Obsidian作为主笔记软件使用,设置个快捷键,配 ...
- 基于4G的智能工牌解决方案特色解析
前记 随着数字化的不断发展以及cat1模块的竞争加剧.cat1无论从成本或者功耗上,都进化的特别快.这样的前提下,让基于4G可穿戴产品逐渐成为现实可穿戴产品必备.能解决以前很多不能解决的问题. 作 ...
- Linux查看用户的7个命令
Linux是中国IT实验室的一个技术频道.包含桌面应用,Linux系统管理,内核研究,嵌入式系统和开源等一些基本分类 在Linux系统里,我们会经常用Linux查看用户的命令,在这里我们一些 ...
- LinuxDNS分析从入门到放弃（记一次有趣的dns问题排查记录，ping 源码分析，getaddrinfo源码分析）
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 环境说明 ubuntu 18.04 前言 我们这里有一块 ...
- Java 22正式发布，一文了解全部新特性
就在昨晚,Java 22正式发布!该版本提供了 12 项功能增强,其中包括 7 项预览功能和 1 项孵化器功能.它们涵盖了对 Java 语言.API.性能以及 JDK 中包含的工具的改进. 下面就来一 ...
- .Net 8.0 下的新RPC，IceRPC之接口定义语言 [Slice] VS [Protobuf]
作者引言 很高兴啊,我们来到了接口定义语言(IDL)篇,RPC之基石,有了它,可以在各种各种语言中实现RPC通讯. Slice 和 Protobuf 是什么? IceRPC的核心是一个面向字节byte ...