第五节、字符串模板

字符串模板让我们再也不用拼接变量了，而且支持在模板里有简单计算操作。

字符串模版

先来看一个在ES5下我们的字符串拼接案例:

let bgColor='red';
let divColor = '当前div背景颜色是'+bgColor+'';
console.log(divColor); //当前div背景颜色是red

ES5下必须用 +jspang+ 这样的形式进行拼接，这样很麻烦而且很容易出错。ES6新增了字符串模版，可以很好的解决这个问题。字符串模版不再使用 ‘xxx’ 这样的单引号，而是换成了 xxx 这种形式，也叫连接号。这时我们再引用jspang变量就需要用${jspang}这种形式了，我们对上边的代码进行改造。

let bgColor='red';
let divColor = `当前div背景颜色是${ bgColor }`;
console.log(divColor); //当前div背景颜色是red

注意 ：这里涉及两个东西，第一个是模板字符串用${ }来引用变量，第二个是模板字符串用反引号（ ` ）标识。上面的divColor变量看清楚使用反引号标识的，否则里面的${ bgColor }是无效的

对运算的支持：

let a=1;
let b=2;
let c=`${a+b}`;
console.log(c); //  3

字符串查找

ES6还增加了字符串的查找功能，而且支持中文哦，小伙伴是不是很兴奋。还是拿上边的文字作例子，进行操作。

查找是否存在:

先来看一下ES5的写法，其实这种方法并不实用，给我们的索引位置，我们自己还要确定位置。

let a = '红色';
let b = '这里有红色、蓝色、黑色、绿色';
console.log(b.indexOf(a));  //  3

这是控制台中输出了3，我们还要自己判断。

ES6直接用includes就可以判断，不再返回索引值，这样的结果我们更喜欢，更直接。 

let a = '红色';
let b = '这里有红色、蓝色、黑色、绿色';
console.log(b.includes(a));  //  true

判断开头是否存在：

console.log(b.startsWith(a));  //  false

判断结尾是否存在：

console.log(b.endsWith(a));  //  false

需要注意的是：starts和ends 后边都要加s。

复制字符串

我们有时候是需要字符串重复的，比如分隔符和特殊符号，这时候复制字符串就派上用场了，语法很简单。

let a = '红色';
document.write(a.repeat(3));    // 红色红色红色

还有两个不全字符串的方法，分别是padStart（）和padEnd（）两个参数：补全之后字符串的长度、补充的字符。这两个不常用这里就

不讲了，有需要的可以去搜一下。