阮一峰ES6教程读书笔记（二）字符串及新增方法
2019-08-02 本文已影响0人
前端艾希
一、字符串的扩展
1. 字符串的Unicode表示法
ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。写法有很多种，我个人认为将码点写在大括号内最保险：
"\u{20BB7}"
// "𠮷"
2. 为字符串增加遍历接口
在之前我们我们可以通过for遍历数组以及对象，但是现在for也可以遍历字符串了，虽然我之前在Python中一直这么干，ES6现在支持for of遍历字符串。例如：
a = '123'
for (let i of a) {
console.log(i)
}
// 1
// 2
// 3
当然如果我们坚持使用for in也行，但是会麻烦些：
a = '123'
for (let i in a) {
console.log(a[i])
}
// 1
// 2
// 3
3. 对JSON.stringify()的改造
现在如果JSON.stringify()遇到不能转码的码点就会将之转为字符串，留给应用自己去做下一步处理
JSON.stringify('\u{D834}') // ""\\uD834""
JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834""
4. 模板字符串
在ES5中我们通常使用+来进行字符串拼接，但是在ES6我们有了更好的方法：
name = 'bing'
// ES5写法
console.log('hello world' + ' ' + name) // hello world bing
// ES6写法
console.log(`hello world ${name}`) // hello world bing
${ }中可以写JavaScript表达式，所以也能在里面调用函数
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar
如果模板中是一个字符串，那么就输出一个字符串，并且字符串中换行，空格等字符会被保留。
5. 标签模板
模板字符串可以紧跟在一个函数后面，它可以被解析为函数的参数，比如：
let a = 5;
let b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
二、字符串的新增方法
1.静态方法
1.1 String.fromCodePoint()
String.fromCodePoint()可以识别码点大于0xFFFF的Unicode编码，如果String.fromCodePoint方法有多个参数，则它们会被合并成一个字符串返回。
String.fromCodePoint(0x20BB7)
// "𠮷"
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true
1.2 String.raw()
String.raw()方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。
String.raw`Hi\\n`
// 返回 "Hi\\\\n"
String.raw`Hi\\n` === "Hi\\\\n" // true
2. 实例方法
2.1 includes(), startsWith(), endsWith()
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
上述方法都可以接受第二个参数，表示开始搜索的位置。
2.2 repeat()
将源字符串重复n次
'x'.repeat(3) // 'xxx'
2.3 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()一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。
2.4 trimStart, trimEnd()
他们的作用与trim()一致，不过是一个是去掉头部空格，一个是去掉尾部空格。
