ES6 提供了许多对字符串的方法,让我们一起学习一下
文章主要参考阮一峰老师的 ECMAScript 6入门,站在巨人的肩膀上看世界…
字符串的方法新增了很多种,我挑几个我认为常用的来分享
字符串模板
别的先不说,先来看一下字符串模板,是我认为的都ES6中比较好用的一个功能了
我们之前拼接字符串的时候 都是用”+”号,并且拼接的时候还不能换行,容易出错.ES6引入了字符串模板 ``,解决了这一个问题
1
2
3
4
5
6
7
8
9
10
| let key = 'chensheng'
let a = 1
let b = 2
function fn() {
return "Hello World";
}
// trim()可以去掉 ``前后的空格
let htmlMsg = `<b>我是${key}</b>,输出${1+2},${fn()}`.trim()
|
字符串不仅可以换行,还可以进行简单的运算,调用函数,使用el表达式可以将参数添加到字符串当中
字符串查找
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
1
2
3
4
5
| let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
str.includes('o') // true
|
相比较已经用indexOf,includes将代码更简洁化了
复制字符串
repeat方法返回一个新字符串，表示将原字符串重复n次。
使用起来也是很简单,具体什么时候用,还是看项目需求
1
2
3
| 'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
|
有几个地方需要注意一下的
1
2
3
4
5
6
7
8
9
10
11
| // 参数如果是小数，会被取整。
'na'.repeat(2.9) // "nana"
// 如果repeat的参数是负数会报错。
'na'.repeat(-1) // 报错
// 但是，如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。
'na'.repeat(-0.9) // ""
// 参数NaN等同于 0。
'na'.repeat(NaN) // ""
|
字符串补全
如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// padStart()和padEnd()一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
// 如果省略第二个参数，默认使用空格补全长度。
'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '
|
以上就是我对ECMAScript 6字符串扩展的一些理解，如果文章由于我学识浅薄，导致您发现有严重谬误的地方，请一定在评论中指出，我会在第一时间修正我的博文，以避免误人子弟。
