ECMAScript 6 字符串的扩展

---

ES6 提供了许多对字符串的方法,让我们一起学习一下

文章主要参考阮一峰老师的 ECMAScript 6入门,站在巨人的肩膀上看世界…

字符串的方法新增了很多种,我挑几个我认为常用的来分享

字符串模板

别的先不说,先来看一下字符串模板,是我认为的都ES6中比较好用的一个功能了

我们之前拼接字符串的时候 都是用”+”号,并且拼接的时候还不能换行,容易出错.ES6引入了字符串模板 ``,解决了这一个问题

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()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let str = 'Hello world!';

str.startsWith('Hello') // true
str.endsWith('!') // true
str.includes('o') // true

相比较已经用indexOf,includes将代码更简洁化了

复制字符串

repeat方法返回一个新字符串，表示将原字符串重复n次。

使用起来也是很简单,具体什么时候用,还是看项目需求

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

有几个地方需要注意一下的

// 参数如果是小数，会被取整。
'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()用于尾部补全。

// 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字符串扩展的一些理解，如果文章由于我学识浅薄，导致您发现有严重谬误的地方，请一定在评论中指出，我会在第一时间修正我的博文，以避免误人子弟。