es6字符串模板新增功能：
1：字符串拼接可支持換行
2：支持插入變量和函數
接下來我會寫幾個例子來展示一下與es5之間的區別
es5寫法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li class="item">
<p class="name">aa</p>
<p class="age">10</p>
</li>
</ul>
</body>
<script>
var data=[{id:1,name:'測試一',age:10},{id:2,name:'測試二',age:20},{id:3,name:'測試三',age:30}];
var html='';
for(var i=0;i<data.length;i++){
/*
字符串模板拼接不支持換行，必須引號拼接
插入變量必須要經過單雙引號轉換
*/
html+='<li class="item" id="'+data[i].id+'">' +
'<p class="name">'+data[i].name+'</p>' +
'<p class="age">'+data[i].age+'</p>' +
'</li>';
}
document.getElementById('list').innerHTML=html;
</script>
</html>
es6寫法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list"></ul>
</body>
<script>
const data=[{id:1,name:'測試一',age:10},{id:2,name:'測試二',age:20},{id:3,name:'測試三',age:30}];
function testFun() {
return 'testString'
}
let html='';
for(let i=0;i<data.length;i++){
/*
字符串模板拼接支持換行，無須引號拼接
插入變量通過${}形式即可,也可以直接插入函數
*/
let id= data[i].id;
let name= data[i].name;
let age= data[i].age;
html+='<li class="item" id="${id}">
<p class="name">${name}</p>
<p class="age">${age}</p>
<p class="test">${testFun()}</p>
</li>';
}
document.getElementById('list').innerHTML=html;
</script>
</html>