ES6 逐点突破系列 -- 字符串的拓展和新增方法

ES6 逐点突破系列 – 字符串的拓展和新增方法

1. 字符串的遍历接口

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// f 
// o
// o

2. 模板字符串

模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符，也可以结合${}实现在字符串中嵌入变量。

let a = `super
aaa`
let b = "star"
let c = `${a}${b}`
console.log(c)		
/*
super
aaastar
*/

可以在字符串内调用函数

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

3. include() ,startsWith(), endsWith()方法

let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，endsWith 的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

4. repeat()方法

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

'hello'.repeat(2) // "hellohello"

5. padStart()，padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart() 用于头部补全，padEnd() 用于尾部补全。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

上面代码中，padStart() 和 padEnd()一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。

如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。

如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')// '0123456abc'

如果省略第二个参数，默认使用空格补全长度。

用途
padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

'123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

6. trimStart()，trimEnd()

trimStart() 消除头部的空格。trimEnd() 消除尾部的空格