ES6的字符串模板

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

字符串模版
先来看一个在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（）两个参数：补全之后字符串的长度、补充的字符。这两个不常用这里就
不讲了，有需要的可以去搜一下。