前言
hello，大家好，接下来我们学习一个ES6中非常重要的知识点，模板字符串，可以让我们的拼接数据更加高效，灵活。
内容概要
本章节主要内容是来学习一下ES6中模板字符串(``)的使用，语法格式，以及优点。
当我们向后台服务器发送了异步ajax请求，将数据获取到之后，需要将数据动态的渲染到
页面上。此时页面中的标签结构几乎是一样的，我们需要做的就是需要将获取到的这些数据通
过循环的方式渲染到页面标签当中去。
当前我们还是以一个小demo的形式来具体而详细的介绍一下模板字符串的使用。在编辑器中新建一个html页面，并写代
码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>模板字符串的使用</title>
</head>
<body>
<input type="button" value="单击按钮获取数据">
<p></p>
<table border="1" width="600">
<thead>
<th>id号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>专业</th>
</thead>
<tbody align="center">
<tr>
<td>1</td>
<td>小张</td>
<td>男</td>
<td>20</td>
<td>搬砖</td>
</tr>
<tr>
<td>2</td>
<td>小刘</td>
<td>男</td>
<td>22</td>
<td>砌墙</td>
</tr>
<tr>
<td>3</td>
<td>小马</td>
<td>男</td>
<td>21</td>
<td>抹灰</td>
</tr>
</tbody>
</table>
</body>
</html>到浏览器中的具体效果呈现是：
上图是一张数据表格，但当前里面的数据内容是写静态的，没有变化的，在我们正常开发当中应该是向服务端发送请求
获取数据，再将数据渲染到页面上，接下来我们就通过给按钮注册单击事件，通过事件的触发，来向服务器端发送ajax请求，
然后将数据使用模板字符串渲染到页面上，具体实现过程分如下几步：
第1步：先引入jQuery这个js库
<script src="./js/jquery.js"></script>第2步：获取页面中的按钮，并给按钮注册事件
<script>
// 1. 获取页面中的按钮
var btn = document.querySelector('input')
// 2. 给按钮注册单击事件
btn.onclick = function () {
}
</script>第3步：当触发按钮的时候，要发送ajax请求，来获取数据
<script>
// 1. 获取页面中的按钮
var btn = document.querySelector('input')
// 2. 给按钮注册单击事件
btn.onclick = function () {
// 3. 调用jQuery中的ajax方法发送请求
$.ajax({
type: 'get', // 设置发送请求的方式
url: 'https://www.easy-mock.com/mock/5d62446e09c1067760274c0b/example/getStuInfo',// 设置请求的路径
success: function (data) {
console.log(data); // 测试一下有没有获取到数据
}
})
}
</script>第4步：当获取到数据之后，将数据以循环的方式渲染到页面上，先用原来的方式来拼接数据渲染页面
// 2. 给按钮注册单击事件
btn.onclick = function (res) {
// 3. 调用jQuery中的ajax方法发送请求
$.ajax({
type: 'get', // 设置发送请求的方式
url: 'https://www.easy-mock.com/mock/5d62446e09c1067760274c0b/example/getStuInfo',// 设置请求的路径
success: function (res) {
console.log(res);
// 4. 循环遍历数组 并在标签上面拼接数据
var arr = []
for(var i=0;i<res.data.length;i++){
var data = res.data[i]
var str = '<tr>'
+'<td>'+data.id+'</td>'
+'<td>'+data.name+'</td>'
+'<td>'+data.gender+'</td>'
+'<td>'+data.age+'</td>'
+'<td>'+data.zhuanye+'</td>'
+'</tr >';
arr.push(str)
}
console.log(arr);
// 5. 将生成的数据渲染到页面上
$('tbody').html(arr.join(''))
}
})
} 效果呢，是实现了，但是有个问题需要注意的就是使用+进行字符串的拼接，无法进行业
务逻辑的判断，比如说，如果是男生，则在性别是男的话显示"靓仔"，如果是性别是"女"的话，
则显示"靓女"，再一个问题是，使用+进行拼接字符串，需要写好多个+，很容易出错，鉴于此
等问题呢，我们还有另外一种更好的解决方案，那就是使用ES6中的模板字符串``,下面来
看使用模板字符串的书写方式：
<script>
// 1. 获取页面中的按钮
var btn = document.querySelector('input')
// 2. 给按钮注册单击事件
btn.onclick = function (res) {
// 3. 调用jQuery中的ajax方法发送请求
$.ajax({
type: 'get', // 设置发送请求的方式
url: 'https://www.easy-mock.com/mock/5d62446e09c1067760274c0b/example/getStuInfo',// 设置请求的路径
success: function (res) {
console.log(res);
// 4. 循环遍历数组 并在标签上面拼接数据
var arr = []
for(var i=0;i<res.data.length;i++){
var data = res.data[i]
var str = `<tr>
<td>${data.id}</td>
<td>${data.name}</td>
<td>${data.gender}</td>
<td>${data.age}</td>
<td>${data.zhuanye}</td>
</tr>`;
arr.push(str)
}
console.log(arr);
// 5. 将生成的数据渲染到页面上
$('tbody').html(arr.join(''))
}
})
}
</script>很明显，我们看到了之前的+没有了，把标签字符串直接放在``这个符号里面即可，在标签之间把要渲染的数据放在
${}当中，让书写更加的方便，直观，如果要是有逻辑判断的话，也是直接在${}中书写即可，比如我们加一个逻辑判断，如果
性别是"男"则要在页面显示一个"靓仔"，如果性别是"女"则在页面显示一个"靓女"，修改如下：
<script>
// 1. 获取页面中的按钮
var btn = document.querySelector('input')
// 2. 给按钮注册单击事件
btn.onclick = function (res) {
// 3. 调用jQuery中的ajax方法发送请求
$.ajax({
type: 'get', // 设置发送请求的方式
url: 'https://www.easy-mock.com/mock/5d62446e09c1067760274c0b/example/getStuInfo',// 设置请求的路径
success: function (res) {
console.log(res);
// 4. 循环遍历数组 并在标签上面拼接数据
var arr = []
for(var i=0;i<res.data.length;i++){
var data = res.data[i]
var str = `<tr>
<td>${data.id}</td>
<td>${data.name}</td>
<td>${data.gender=="男"?"靓仔":"靓女"}</td>
<td>${data.age}</td>
<td>${data.zhuanye}</td>
</tr>`;
arr.push(str)
}
console.log(arr);
// 5. 将生成的数据渲染到页面上
$('tbody').html(arr.join(''))
}
})
}
</script>查看的页面效果如下，可以看到，原来在页面中显示的"男"或"女"更换成了"靓仔"或"靓女"
至此，我们已经把模板字符串``应用到我们的案例当中了，到些可以来对比一下当前使用模
板字符串和原来的+拼接字符串的形式，很明显使用模板字符串可以让我们的开发变的更加的方
便，业务逻辑也更加的清晰，接下来，我们就使用模板字符串在我们卡其漫画项目当中去发挥
它应用的功能。
本章节内容到此已经讲完，下节课我们来讲解发送ajax请求，获取数据，动态渲染页面。
