導(dǎo)讀：
- 傳統(tǒng)的字符串模板 ：在傳統(tǒng)的Javascript中，如果我們對(duì)DOM進(jìn)行操作，字符串模板通常采用加號(hào)( + )進(jìn)行字符串拼接。
- ES6模板字符串 ：以反引號(hào)( ` )表示普通的字符串，也可以表示多行字符串，同時(shí)還可以插入變量（代替?zhèn)鹘y(tǒng)的加號(hào)拼接）。
例子：
- 傳統(tǒng)字符串拼接：
<script>
let name = 'wrf';
let age = 18;
let str1 = '名字:'+name + ' ,今年'+age+'歲';
console.log(str1);
// let str2 = `名字:${name}, 今年${age}歲`;
// console.log(str2);
</script>
-
執(zhí)行結(jié)果：傳統(tǒng)拼接
模板字符串拼接：
<script>
let name = 'wrf';
let age = 18;
// let str1 = '名字:'+name + ' ,今年'+age+'歲';
// console.log(str1);
let str2 = `名字:${name}, 今年${age}歲`;
console.log(str2);
</script>
-
執(zhí)行結(jié)果：模板字符串
可以看到使用模板字符串和傳統(tǒng)字符串實(shí)現(xiàn)的效果是一樣的，那么怎么才能體現(xiàn)出它的優(yōu)勢(shì)呢？在看下面的例子 ：
<!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號(hào)新聞', read: 1},
{title: '我是2號(hào)新聞', read: 2},
{title: '我是3號(hào)新聞', read: 3},
{title: '我是4號(hào)新聞', read: 4},
{title: '我是5號(hào)新聞', 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>新聞標(biāo)題：${data[i].title}</span>
<span>閱讀人數(shù)：${data[i].read}</span>
<a href="javascript:;">詳情</a>`
oUl.appendChild(oLi);
}
}
</script>
<ul>
<!-- <li>
<span>新聞標(biāo)題：今天早間新聞</span>
<span>閱讀人數(shù)：10</span>
<a href="javascript:;">詳情</a>
</li> -->
</ul>
</body>
</html>
-
執(zhí)行結(jié)果 ：優(yōu)勢(shì)
可以看到當(dāng)你動(dòng)態(tài)添加DOM節(jié)點(diǎn)的時(shí)候，使用傳統(tǒng)字符串拼接（尤其是多行文本的時(shí)候），會(huì)大篇幅的在拼接處用( '+變量+' )的格式拼接，同時(shí)還要改每一行的開頭或格式，這個(gè)時(shí)候就會(huì)顯得操作很繁瑣，而ES6引入模板字符串后，使用反引號(hào)將需要添加的內(nèi)容包起來(lái)（單行文本 / 多行文本都一樣）然后在變量的地方用
${變量}的形式替換掉就直接實(shí)現(xiàn)了與之前相同的功能，這樣看來(lái)模板字符串的用處還是很大的。
總結(jié)：
- 這個(gè)新特性可以說(shuō)是挺重要的，因?yàn)楹芏鄷r(shí)候無(wú)論從本地或是從后臺(tái)獲取的數(shù)據(jù)都需要?jiǎng)討B(tài)添加，那么其中多少都會(huì)涉及到字符串拼接，那么拋棄傳統(tǒng)的字符串拼接方法，使用ES6模板字符串將會(huì)讓你事半功倍！
