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

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