3.ES6-模板字符串及其原理

最初，我们拼接字符串的时候，是通过连接符”+”来接的，并且如果换行等需要使用转义字符，否则就会报错。这样让我们书写十分不便。所以，ES6中就引入了模板字符串，帮助我们解决这一问题。

---

1、拼接和变量作用

let name = 'zhuangzhuang';
let age = 27;
let desc = `${name}今年${age}岁了`;//在这句话中将变量用${}包裹起来
console.log(desc);//"zhuangzhuang今年27岁了"

假设我们把上述模板字符串改成普通字符串，然后去实现他，该怎么实现？

let name = 'zhuangzhuang';
let age = 27;
let desc = "${name}今年${age}岁了";

function replace(content){
    return content.replace(/\$\{([^}]+)\}/g,function(matched,childItem){
        return eval(childItem);
    })
}
console.log(replace(desc));

2、换行解析

如果我们想要输出一个ul-li列表，那应该怎么生成？
一般我们是这样写的：

let userList = [{name:'zhuangzhuang',age:27},{name:'zz',age:18},{name:'zhzh',age:1}];

let usersHTML = userList.map(function(user,index){
    return `<li>${user.name}的年龄是${user.age}岁</li>`
}).join('');
let ul = (
    `
    <ul>
    ${usersHTML}
    </ul>
    `
);

document.body.innerHTML = ul;

那么其显示的就是：
zhuangzhuang的年龄是27岁
zz的年龄是18岁
zhzh的年龄是1岁

上面的字符串有折行，也能解析，并且在HTML中也是折行的

4、标签模板

什么叫做标签模板？它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。
也就是说，可以有一个函数来处理模板字符串
举例如下：

let desc = '好';
let doSomething = '玩';
function say(strings,...rest){
    console.log(strings);// ["今天的天气真", ",我想去", ""]
    console.log(rest);//['好','玩']
    let number = Math.random();
    if(number > 0.5){
        rest[0] = '温暖';
        rest[1] = '游泳';
    }else{
        rest[0] = '寒冷';
        rest[1] = '泡温泉';
    }
    let result = '';
    for(let i = 0;i<rest.length;i++){
        result += strings[i] + rest[i]
    }
    result += strings[strings.length - 1];
    return result;
}
let words = say`今天的天气真${desc},我想去${doSomething}`;
console.log(words);

标签模板的主要作用就是：处理模板字符串
参数：
第一个参数：非变量组成的数组
…剩余参数：变量组成的数组
注意：上面使用的是…操作符，…rest表示剩余参数，只能作为最后一个参数使用

3、反引号转义

如果在模板字符串中想要使用反引号(`)该怎么办？
使用转义字符(用\进行转义)

console.log(`\`\`这个是模板字符串`);//``这个是模板字符串

4、变量的种类

在模板字符串中,${}中的变量其实可以为一个表达式，而不仅仅只是变量而已。

let zhuangzhuang = {
    name:'zz',
    age:27
}
console.log(`${zhuangzhuang.age}`);//27
console.log(`${zhuangzhuang.age + 3}`);//30
function say(){
    return '我是壮壮';
}
console.log(`${say()}`);//我是壮壮

5、模板字符串的嵌套

let infoList = [{
name:'zhuangzhuang',
    age:27
},{
    name:'jingjing',
    age:26
}];
let infoTable = `
    <table border = 'inherit'>
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
            </tr>
        </thead>
        <tbody>
            ${infoList.map(function(info,index){
                return `<tr><td>${info.name}</td><td>${info.age}</td></tr>`
            })}
        </tbody>
    </table>
`
document.body.innerHTML = infoTable;    

结果为: