模板字符串

模板字符串是es6中很方便的一个功能，以往我们写模板的话，需要我们把html文本一个个的拼接

$("#list").append(
    '<div class="goodsname">'+goodsname+'</div>' +
    '<div class="goodscount">'+goodscount+'</div> ' +
    '<div class="goodsprice">'+goodsprice+'</div> '
)

在使用模板字符串之后，我们可以写成

$("#list").append(`
     <div class="goodsname">${goodsname}</div>
     <div class="goodscount">${goodscount}</div>
     <div class="goodsprice">${goodsprice}</div>
`)

模板字符串也是字符串，只是这个字符串功能更加的强大了。用反引号（`）包含，模板字符串可以当做普通字符串使用，也可以定义多行字符串，还可以内嵌变量。

1、普通字符串

`吃了吗'\n'吃了`

2、多行字符串

console.log(`第一行
第二行`);

这里多行字符串中的所有空格换行都会保留。

3、内嵌变量

模板字符串中嵌入变量，需要将变量名写在${}之中。

let food = '红烧肉';
`你中午吃的${food}`

这样就能得到一个完整的 你中午吃的红烧肉，其实我们可以认为${}就是一个可以被单独计算的表达式，这里是可执行代码。

console.log(`1+1=${1+1}`)
//1+1=2

你会发现上面的例子中，控制台打印的是1+1=2，其中 1+1= 是字符串原有的，2是${1+1}的结果。

${}中既然只要是可执行代码都行的话，当然函数也是可以的。

function add(a,b) {
    return a+b;
}
console.log(`1+1=${add(1,1)}`)
//1+1=2

${}大括号中将默认调用对象的toString方法。所以如果{}中是未声明的变量，代码就会报错

模板字符串也可以多重嵌套

let func = (name) => `Hello ${name}!`;
console.log(`${func('Jack')},good moring`)
//Hello Jack!,good moring

可以看到函数func中使用了模板字符串，在调用func的时候也使用了模板字符串。

模板字符串还有个功能叫‘标签模板’。

所谓的标签模板，就是说当模板字符串紧跟在一个函数后面的时候，该函数会被调用来处理这个模板字符串。

alert`hello`

alert('hello')

上面两行代码执行效果是一样的。所谓的‘标签’指的就是这个函数，模板指的也就是模板字符串了。

但是如果模板字符串中含有变量，这个时候使用标签模板就需要注意了

let a=1,b=2;
function tag(...values){
    console.log(...values)
}
tag`Hello ${ a + b } world ${ a * b }`;

可以看到，上面的例子中，tag函数就收的参数并不是一个字符串，而是多个参数，其中还有一个数组。

仔细分析一下，我们发现，原来在标签模板中的模板字符串如果有变量，在调用函数的时候会对模板字符串先做一层处理，

首先会把模板字符串中没有变量的部分转换成一个字符串数组，而转换的规则就是变量本身作为一个分割，对字符串进行截取，需要注意的是如果变量在开头或者结尾，也会分出一个空字符串数组。在字符串数组完成转换后，会根据变量在模板字符串中出现的顺序，自动的把模板中的变量作为参数传递到函数中去，而且传递的是变量的结果。

在使用标签模板的时候这一点我们一定要注意。

通过标签模板的特性，标签模板一般都是作为html的安全过滤使用，用户输入恶意代码。