es6的新特性--模板字符串
这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串
在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常用引号(''或"")和加号(+)来拼接字符串,麻烦不说而且还容易出错,就拿个其中的代码例子说:
menuUl+="<li><i class='"+menudata[i].icon+"'></i><p onclick=\"click()\">"+ menudata[i].text +"</p></li>";
其中用到了单引号和双引号,加号以及转义字符,当时写起来颇有费劲。现在es6中的模板字符串大大解决了这种复杂又麻烦的问题
传统拼接字符串的缺点:
* 不能多行拼接
* 不能在拼接中插入变量
* 不能进行简单的运算
* 不能处理引号之间的嵌套问题
* 麻烦,拼接过多一稍微写错就报错或显示不出来。
模板字符串就是使用两个反撇号把任何变量以及字符串都包含起来。反撇号就是键盘上tab键上方的键
写法:
let word = `超级`
特性:
1 模板字符串可以引入变量,就是在字符串中用${变量名}
⚠️ ${} 模板占位符 在字符串中,javascript将模板占位符里的值插入其中,如果值是数组或者对象,他会调用toString()方法转化为字符串。如果是函数,则会使用标签模板。
let word = `超级`;
console.log(`今天天气${word}不错`); // 今天天气超级不错
console.log(`[1,2,3,4,5]`) // [1,2,3,4,5]
console.log(typeof `[1,2,3,4,5]`) //string
console.log(`{name:'peter'}`) //{name:'peter'}
console.log(typeof `{name:'peter'}`) // string
2 模板字符串可以进行简单的运算,通过${运算}
console.log(`今天天气的温度是${parseInt(23.3)}`) //今天天气的温度是23
console.log(`${1 + 2}`) //
3 模板字符串可以进行嵌套,反撇号中再可用反撇号
console.log(`2 + 3 ${2 + 3 > 6 ? `>`:`<`} 6`) // 2 + 3 < 6
4 模板字符串可以多行拼接,就是字符串可以换行
⚠️ 模板字符串中所有的空格、新行、缩进,都会原样输出在生成的字符串中
console.log(`今天天气超级不错,
明天的天气也肯定不错。`)
5 模板字符串主要就是简单方便,和其他的引号和加号都互不干扰,就那刚才的代码就可以这样写:
menuUl+=`<li><i class="${menudata[i].icon}"></i><p onclick="click()">${menudata[i].text}</p></li>`;
这样看起来就整洁,可维护。
es6 模板字符串的优点:
1 可以多行拼接
2 可以在拼接中插入变量
3 可以进行简单的运算
4 可以互相嵌套
5 简单,方便,整洁
标签模板
在模板字符串开始的反撇号前附加一个额外的标签
let message = SaferHTML`<p>${bonk.sender} 向你示好。</p>`;
等价于
let message = SaferHTML(templateData, bonk.sender);
SaferHTML的方法如下:对其中的一些转义字符的转义。
function SaferHTML(templateData) {
var s = templateData[0];
for (var i = 1; i < arguments.length; i++) {
var arg = String(arguments[i]);
// 如果有转义字符
s += arg.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
// 如果没有转义字符
s += templateData[i];
}
return s;
}
let div = document.querySelector('div');
div.innerHTML = SaferHTML`<这是关于字符串模板&标签模板的介绍>` // <这是关于字符串模板&标签模板的介绍>
function show(stringArr,...values){
let output ="";
let index = 0;
for(;index<values.length;index++){
output += stringArr [index]+values[index];
}
output += stringArr [index];
return output;
}
let name = '张三',
age = 20,
message = show`我来给大家介绍:${name}的年龄是${age}.`;
div.innerHTML = message; // 我来给大家介绍:张三的年龄是20.
对于标签模板,我基本上操作的很少,这是两个例子我是在mdn上看到的,掌握了要领,以后开发就方便了。
所谓的标签模板,就是添加额外的标签,这个标签其实就是一个函数方法的调用,这个方法es6没有实行,交给了开发者去编写操作,提高了拓展性。
就拿show说:
stringArr代表的就是一个数组,${}前后方的值,打印一下stringArr就可以得知。
在标签函数的第一个参数中,存在一个特殊的属性raw ,raw是es6的一个关于字符串的方法,我们可以通过它来访问模板字符串的原始字符串,而不经过特殊字符的替换。
使用String.raw() 方法创建原始字符串和使用默认模板函数和字符串连接创建是一样的。
根据方法里写法可知,标签模板就是遍历数组,将对应的已知的值stringArr和字符串模板values的值依次打印出来。
这是本人学习得出的结论,如果有错误,欢迎指正!
参考:深入浅出ES6和mdn:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings
es6的新特性--模板字符串的更多相关文章
- ES6 && ECMAScript2015 新特性
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES201 ...
- ES6常用新特性
https://segmentfault.com/a/1190000011976770?share_user=1030000010776722 该文章为转载文章!仅个人喜好收藏文章! 1.前言 前几天 ...
- [转] Scala 2.10.0 新特性之字符串插值
[From] https://unmi.cc/scala-2-10-0-feature-string-interpolation/ Scala 2.10.0 新特性之字符串插值 2013-01-20 ...
- ES6相关新特性介绍
你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本和复杂的应用都很有用.在 ...
- H5、C3、ES6的新特性
H5的新特性 1.语义化标签 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其 ...
- ES6实用新特性
兼容性 http://kangax.github.io/compat-table/es5/ http://kangax.github.io/compat-table/es6/ ES6(ES2015)兼 ...
- JS - ECMAScript2015(ES6)新特性
友情提示:本文仅mark几个常用的新特性,详细请参见:ES6入门 - ryf: 碎片 var VS let VS const var:声明全局变量, let:声明块级变量,即局部变量 const:声明 ...
- ES6的新特性
ECMAScript 6(简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,又称ECMAScript 2015.ES6就是ES2015. 虽然目前并不是所有 ...
- 前端(七):ES6一些新特性
一.变量 1.var关键字的弊端 var关键字的弊端:1.可以重复声明变量:2.无法限制变量修改:3.没有块级作用域,只有函数作用域. <html lang="en"> ...
随机推荐
- BZOJ 3640: JC的小苹果 [概率DP 高斯消元 矩阵求逆]
3640: JC的小苹果 题意:求1到n点权和\(\le k\)的概率 sengxian orz的题解好详细啊 容易想到\(f[i][j]\)表示走到i点权为j的概率 按点权分层,可以DP 但是对于\ ...
- Lua利用cjson读写json
前言 本文结合本人的实际使用经验和代码示例,介绍如何在Lua中对json进行encode和decode.我这里采用的是Lua CJson库,是一个高性能的JSON解析器和编码器,其性能比纯Lua库要高 ...
- URL中特殊符号的处理
问题描述 我们在对接第三方系统的时候通常需要get或post来传输数据,但此时如果参数中存在&% #*!包括空格等特殊符号的时候就无法正常请求具体表现在参数获取不正确或者获取不到参数,甚至有时 ...
- thinkPHP数据库操作
thinkPHP如果要对数据库操作,一般来说首先要做的是在配置文件中链接数据库,然后用M方法实例化一张表,然后就是对表的操作了 可以开启调试功能查看程序执行的sql语句: 1.开启调试功能(默认是已经 ...
- 并行执行 Job - 每天5分钟玩转 Docker 容器技术(134)
有时,我们希望能同时运行多个 Pod,提高 Job 的执行效率.这个可以通过 parallelism 设置. 这里我们将并行的 Pod 数量设置为 2,实践一下: Job 一共启动了两个 Pod,而且 ...
- elasticsearch2.3.3集群搭建踩到的坑
本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 作者原来搭建的环境是0.95版本 现在升级到2.3.3版本, ...
- eclipse快捷注释生成方法
自动生成方法的注释格式,例如 /*** @param str* @return* @throws ParseException*/ 快捷键是alt+shift+j,将光标放在方法名上,按快捷键.会生成 ...
- Java注释用处
1.Java注释: import cn.lonecloud.Doc; /** * Created by lonecloud on 2017/8/17. * 测试注释类型 {@link Doc#test ...
- Python基础——字符串
Python版本:3.6.2 操作系统:Windows 作者:SmallWZQ 在Python中,字符串也是一种数据类型.相比其它数据类型,字符串算是比较复杂的.为何呢?因为字符串不仅包含英文字母 ...
- hihoCoder 1513 : 小Hi的烦恼 位运算好题
思路:考虑第i个同学,第一门课排名比他靠前的同学的集合是S1,第二门课是S2...第五门课是S5,很明显比这个同学每门课程都优秀的同学就是S1&S2&S3&S4&S5, ...