这几天简单看了一下深入浅出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, "&amp;")
                 .replace(/</g, "&lt;")
                 .replace(/>/g, "&gt;");
    // 如果没有转义字符
    s += templateData[i];
  }
  return s;
}
let div = document.querySelector('div');
div.innerHTML = SaferHTML`&lt;这是关于字符串模板&amp;标签模板的介绍&gt;`       // <这是关于字符串模板&标签模板的介绍>
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的新特性--模板字符串的更多相关文章

  1. ES6常用新特性

    https://segmentfault.com/a/1190000011976770?share_user=1030000010776722 该文章为转载文章!仅个人喜好收藏文章! 1.前言 前几天 ...

  2. [转] Scala 2.10.0 新特性之字符串插值

    [From]  https://unmi.cc/scala-2-10-0-feature-string-interpolation/ Scala 2.10.0 新特性之字符串插值 2013-01-20 ...

  3. ES6相关新特性介绍

    你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本和复杂的应用都很有用.在 ...

  4. H5、C3、ES6的新特性

    H5的新特性 1.语义化标签 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其 ...

  5. ES6实用新特性

    兼容性 http://kangax.github.io/compat-table/es5/ http://kangax.github.io/compat-table/es6/ ES6(ES2015)兼 ...

  6. JS - ECMAScript2015(ES6)新特性

    友情提示:本文仅mark几个常用的新特性,详细请参见:ES6入门 - ryf: 碎片 var VS let VS const var:声明全局变量, let:声明块级变量,即局部变量 const:声明 ...

  7. 前端(七):ES6一些新特性

    一.变量 1.var关键字的弊端 var关键字的弊端:1.可以重复声明变量:2.无法限制变量修改:3.没有块级作用域,只有函数作用域. <html lang="en"> ...

  8. ES6:JavaScript 新特性

    我相信,在ECMAScript.next到来的时候,我们现在每天都在写的JavaScript代码将会发生巨大的变化.接下来的一年将会是令JavaScript开发者们兴奋的一年,越来越多的特性提案将被最 ...

  9. ES6的新特性(1)——ES6 的概述

    ES6 的概述 首先,感谢马伦老师的ES6新特性的教程. ECMAScript 和 JavaScript 的关系是 ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前 ...

随机推荐

  1. ArcSDE给Oracle添加SDE函数包

    SDE函数包中包含大量的空间计算分析函数,是我们做空间相关分析的一把利刃(目前好像我们只有这一把),有关SDE函数的使用,请见我空间另外的一篇帖子的附件.按照通常教程,过程是这样的1.找到listen ...

  2. transformClassesWithDexForDebug

    转自:http://blog.sina.com.cn/s/blog_6f3828770102w30b.html

  3. cloudera learning4:Hadoop集群规划

    涉及到一些关于硬件的东西,我也不是很懂,记录下来有待以后学习. Hadoop集群一般都是由小到大,刚开始可能只有4到6个节点,随着存储数据的增加,计算量的增大,内存需求的增加,集群慢慢变大. 比如按照 ...

  4. 利用ApnsPHP包向IOS推送消息

    header('content-type:text/html;charset=utf-8'); require_once 'ApnsPHP/Autoload.php'; require_once 'A ...

  5. PHP学习之-1.5 字符串

    字符串 一个字符串是用双引号扩起来的一个词或者一个句子,比如 "Hello Word" ,你可以使用PHP语言输入这个字符串,像这样 <?php echo "Hel ...

  6. 输入一个A和B,,A&lt;=B,A&gt;=1,B&lt;=pow(10,18)计算F=B!/A!结果的最后一位

    *************************************************************************代理运行函数,判断结果,进行输出*********** ...

  7. mysql 千万级数据查询效率实践,分析 mysql查询优化实践--本文只做了一部分,仅供参考

    数据量, 1300万的表加上112万的表 注意: 本文只做了部分优化,并不全面,仅供参考, 欢迎指点.   请移步tim查看,因为写的时候在tim写的,粘贴过来截图有问题,就直接上链接了. https ...

  8. Team Foundation Server 2015 Update 2.1 发布日志

    微软在 2016年5月5日发布了Visual Studio Team Foundation Server 2015 update 2.1. 下面我们来看看Update2.1中给我们带来了哪些新功能. ...

  9. CNN解析和模型分析

    https://wenku.baidu.com/view/b0add84eb94ae45c3b3567ec102de2bd9605de8a.html?pn=51 http://www.cnblogs. ...

  10. jar包的MANIFEST.MF文件

    打包可执行jar包时,MANIFEST.MF总是个让人头疼的东西,经常出现这种那种问题. 一个例子: ================================================= ...