ES6 - 模板字符串
2018-12-25 本文已影响0人
饮杯梦回酒
导读：
- 传统的字符串模板 ：在传统的Javascript中，如果我们对DOM进行操作，字符串模板通常采用加号( + )进行字符串拼接。
- ES6模板字符串 ：以反引号( ` )表示普通的字符串，也可以表示多行字符串，同时还可以插入变量（代替传统的加号拼接）。
例子：
- 传统字符串拼接：
<script>
let name = 'wrf';
let age = 18;
let str1 = '名字:'+name + ' ,今年'+age+'岁';
console.log(str1);
// let str2 = `名字:${name}, 今年${age}岁`;
// console.log(str2);
</script>
-
执行结果：
传统拼接
-
模板字符串拼接：
<script>
let name = 'wrf';
let age = 18;
// let str1 = '名字:'+name + ' ,今年'+age+'岁';
// console.log(str1);
let str2 = `名字:${name}, 今年${age}岁`;
console.log(str2);
</script>
-
执行结果：
模板字符串
可以看到使用模板字符串和传统字符串实现的效果是一样的，那么怎么才能体现出它的优势呢？在看下面的例子 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 字符串基本模板
/*let name = 'wrf';
let age = 18;
let str1 = '名字:'+name + ' ,今年'+age+'岁';
console.log(str1);
let str2 = `名字:${name}, 今年${age}岁`;
console.log(str2);
*/
let data = [
{title: '我是1号新闻', read: 1},
{title: '我是2号新闻', read: 2},
{title: '我是3号新闻', read: 3},
{title: '我是4号新闻', read: 4},
{title: '我是5号新闻', read: 5}
]
window.onload = function() {
var oUl = document.querySelector('ul');
for(let i=0; i < data.length; i++) {
var oLi = document.createElement('li');
oLi.innerHTML = `<span>新闻标题：${data[i].title}</span>
<span>阅读人数：${data[i].read}</span>
<a href="javascript:;">详情</a>`
oUl.appendChild(oLi);
}
}
</script>
<ul>
<!-- <li>
<span>新闻标题：今天早间新闻</span>
<span>阅读人数：10</span>
<a href="javascript:;">详情</a>
</li> -->
</ul>
</body>
</html>
-
执行结果 ：
优势
-
可以看到当你动态添加DOM节点的时候，使用传统字符串拼接（尤其是多行文本的时候），会大篇幅的在拼接处用( '+变量+' )的格式拼接，同时还要改每一行的开头或格式，这个时候就会显得操作很繁琐，而ES6引入模板字符串后，使用反引号将需要添加的内容包起来（单行文本 / 多行文本都一样）然后在变量的地方用
${变量}的形式替换掉就直接实现了与之前相同的功能，这样看来模板字符串的用处还是很大的。
总结：
- 这个新特性可以说是挺重要的，因为很多时候无论从本地或是从后台获取的数据都需要动态添加，那么其中多少都会涉及到字符串拼接，那么抛弃传统的字符串拼接方法，使用ES6模板字符串将会让你事半功倍！
