ES6之字符串的扩展

分手后的思念是犯贱 2021-09-16 09:04 407阅读 0赞

作者： kim  
来源： kimshareclub微信公众号

已经有一段时间没更新关于ES6的知识点了，主要还是因为时间有点紧，小编现在即沉迷于工作，也在坚持运动，最最最最重要的还是少了点写作的动力。但是不管怎么样，每周至少还是会更新一篇，内容不限。今天接着讲ES6中对字符串的扩展知识点。

### 判断某字符串是否包含在另外字符串中 ###

会JS的兄跌应该知道原生的JavaScript使用的是indexOf()方法来判断字符串中是否包含某字符串。具体的用法如下：string.indexOf(‘str’) 如果返回-1说明在string中找不到str字符串

ES6对字符串新增了includes()\\startsWith()\\endsWith()方法，用来判断某字符串是否包含在另外字符串中：  
![这里写图片描述][70]

由以上代码得知：  
1.1、如果只有一个参数，则判断完整的原字符串中是否包含了某字符串

1.2、如果有两个参数，第一个参数为需要判断的字符串，第二个参数为原字符串从那个位置开始进行判断，特别需要注意的是：endsWith(arg,index)不包含index，它判断的是索引在index之前的原字符串以arg结尾，而includes(arg,index)和startsWith(arg,index)是与索引从index开始的原字符串进行判断

### ES6中的repeat() ###

ES6中的repeat方法是对原字符串重复后，返回新的字符串： str.repeat(arg) arg为字符串重复的次数:  
![这里写图片描述][70 1]

从上面的代码得知：

2.1、如果arg为小数，则需要先取整

2.2、如果arg为负数或者Infinity，则会报错，但不影响上面执行的代码

2.3、如果arg为0到-1之间的小数，则会等同于0

2.4、如果arg为NaN也会视为0

2.5、如果arg为非数字，则需要转为数字

### ES6中的模板字符串 ###

ES6中的模板字符串也是使用的比较多的一个新特性，它的写法较简洁方便:  
![这里写图片描述][70 2]  
![这里写图片描述][70 3]  
![这里写图片描述][70 4]  
由以上代码得知：

3.1、原生JavaScript中的模板字符串需要"“或’‘或.join(’’).join(”")进行拼接

3.2、ES6中使用反引号(\`\`)包裹字符串，字符串可换行，可嵌入变量。变量名必须以$\{…\}这种格式才被解析，它会保留换行、缩进、空格符

3.3、如果模板字符串中有使用反引号，则需要使用反斜杠转义

3.4、模板字符串中的花括号里可以是任意的Js表达式，可以进行运算，以及引用对象属性

3.5、模板字符串之中可以调用函数（执行函数）

3.6、如果花括号里不是字符串则需要先转为字符串,如对象属性不是字符串则默认调用.toString()方法

3.7、如果花括号中是字符串，则会原样输出

3.8、如果花括号里的变量没有声明则会报错

3.9、模板字符串可嵌套使用(必须是在花括号内才可正常嵌套)

### ES6中字符串遍历器接口 ###

ES6 为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历:  
![这里写图片描述][70 5]  
以上代码得知：

4.1、字符串可以被for…of循环遍历，打印的是字符而不是索引

4.2、for…of可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点

### 总结 ###

今天只讲到了ES6中对字符串扩展的4个知识点，其实还有：

字符的Unicode的表示法

codePointAt() – 正确处理4个字节储存的字符，返回一个字符的码点

String.fromCodePoint() – 用于从码点返回对应字符

…

今天就单纯的讲了常用到的一些新特性，如果需要了解关于字符串的其他新特性可以自行去查阅

### 往期精彩 ###

⊙一款免费在线高效作图工具，要不要了解一下

⊙ 如何优雅的实现前端国际化

⊙ 深入学习ES6【第三章】

⊙ 深入学习ES6【第二章】

⊙ 深入学习ES6【第一章】

⊙ 一文读懂http缓存（超详细）

⊙ 一款免费观看vip会员视频神器

### 扫码关注更多精彩内容 ###

![这里写图片描述][70 6]

[70]: /images/20210813/cb687af7d2b84feaa971f5661994c9fe.png
[70 1]: /images/20210813/9337936ce6db4aa2a1b669a97f6349c4.png
[70 2]: /images/20210813/295d3d5d9bba47cf95f942f06ed6ad16.png
[70 3]: /images/20210813/e7aa786b7cb8437e958922438e5c5dde.png
[70 4]: /images/20210813/cf0a10bfde934e58bbcd4748b3fe6efc.png
[70 5]: /images/20210813/02012e30afe8468baf11bf3512875e21.png
[70 6]: /images/20210813/4ecdaae0385a4ce9b188b171fb7148f5.png