ES6的字符串【模版 `` 、查找 includes()、开头是否存在 startsWith()、结尾是否存在 endsWith()、复制 repeat()】

ES6

这里主要讲ES6对字符串新增的操作，最重要的就是字符串模版，字符串模版的出现让我们再也不用拼接变量了，而且支持在模板里有简单计算操作。

字符串模版 `...${变量}...`

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

let name = 'www';
let str = '你好呀，' + name + '。你最喜欢做的是什么事情？';
document.write(str);

ES5下必须用 + name + 这样的形式进行拼接，这样很麻烦而且很容易出错。这时我们就可以用ES6新增的字符串模版，这样可以很好的解决这个问题。

字符串模版不再使用 'xxx' 这样的单引号，而是换成了 `xxx` 这种形式，也叫连接号。这时我们再引用name变量就需要用 ${name} 这种形式了。

我们对上边的代码进行改造。

let name = 'www';
let str = `你好呀，${name}。你最喜欢做的是什么事情？`;
document.write(str);

可以看到浏览器出现了和上边代码一样的结果。

字符串模板还支持 空格 跟 html标签，可以试着输入一些。

let name = 'www';
let str = `你好
呀，<b>${name}</b>。<br/>你最喜欢做的是什么事情？`;
document.write(str);

支持运算

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

强大的字符串模版，在实际开发中，我们可以让后台写一个活动页面，然后轻松的输出给用户。

字符串查找

ES6还增加了字符串的查找功能，而且支持中文哦。

1、查找是否存在 str.includes() , 返回 true | false

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

let name = 'www';
let blog = '你好呀，www。你最喜欢做的是什么事情？';
console.log(blog.indexOf(name));     // 4

这是网页中输出了4，我们还要自己判断。

注意： indexOf的o是大写的O

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

let name = 'www';
let blog = '你好呀，www。你最喜欢做的是什么事情？';
console.log(blog.includes(name));        // true

注意： includes的s不要忘记

2、判断开头是否存在 str.startsWith() , 返回 true | false

let name = 'www';
let blog = '你好呀，www。你最喜欢做的是什么事情？';
console.log(blog.startsWith(name));        // false

3、判断结尾是否存在 str.endsWith() , 返回 true | false

let name = 'www';
let blog = '你好呀，www。你最喜欢做的是什么事情？';
console.log(blog.endsWith(name));        // false

注意的是：starts和ends 后边都要加s，我开始时经常写错，希望小伙伴们不要采坑。

复制字符串 str.repeat(次数)

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

document.write('www|'.repeat(3));

当然ES6对字符串还有一些其它操作，因为实际工作中不太使用，这里就不作太多的介绍了。希望你能把这些新特性应用到工作中，否则可能很快就忘记了。