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++ //常用算术生成算法 //#include<numeric> accumulate //fill //向容器中填充指定的元素
1 //常用算术生成算法 //#include<numeric> accumulate 2 //fill //向容器中填充指定的元素 3 #include<iostream> ...
- 4、 mysql的explain分析执行计划
EXPLAIN或者 DESC命令获取 MySQL如何执行 SELECT 语句的信息,包括在 SELECT 语句执行过程中表如何连接和连接的顺序. 查询SQL语句的执行计划 : explain sele ...
- vscode 快捷键更换 ctrl + h 全局搜索 改为 f1 - 个人习惯 - 针对某些跨文件函数不能自动跳转
vscode 快捷键更换 ctrl + h 全局搜索 改为 f1 - 个人习惯 - 针对某些跨文件函数不能自动跳转 原来 f1 换成 ctrl + f1 它一般用 ctrl + shift + p 调 ...
- Dreamweaver基础教程：系列介绍
目录 前言 Dreamweaver 软件介绍 软件安装 学习支持 相关资料 前言 我一直对前端的一些技术比较感兴趣,之前有用过GitHub上的开源项目部署了自己的导航网站猿导航,但并没有系统的去深入学 ...
- ble的notification和indication的区别和联系
Ble服务端传输消息有两个常用手段,notification和indication.那么这两者之间有什么区别呢? Notification 不需要应答,所以服务端发送的消息,它自己并不知道消息是否发送 ...
- git 删除本地创建的仓库常用方法
基本方法 清除本地文件夹下的git文件,然后在重新初始化新建的git仓库 具体实施 //删除文件夹下的所有 .git 文件 find . -name ".git" | xarg ...
- java 发送 http 请求练习两年半（HttpURLConnection）
1.起一个 springboot 程序做 http 测试: @GetMapping("/http/get") public ResponseEntity<String> ...
- 记录--Uniapp + TypeScript 配置文档
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 0 目标 使用 uniapp + TypeScript 为基础栈进行小程序开发 uniapp 是一个使用 Vue.js 开发所有前端应用 ...
- CYarp：力压frp的C#高性能http内网反代中间件
我以前开发过HttpMouse的http内网反代中间件,但由于当时的知识点与设计水平受限,所以把它下马了.随着自身又遇到http内网反代的需求,在frp不能满足我需求情况下,我又启动了一个叫CYarp ...
- sys_stat_statements 扩展使用介绍
sys_stat_statements 模块提供追踪服务器所执行的所有SQL语句的执行统计信息,可以用于统计数据库的资源开销,如分析TOP SQL. KingbaseES V8R6版本该插件已经内置化 ...