字符串的扩展---对四字节字符的处理

背景

• 在JavaScript中允许采用Unicode码点表示一个字符

"\u0061"
// "a"

• 但是这个表示方法也只限于码点在\u0000~\uFFFF之间的，超出这个范围必须用双字节表示。

"\uD842\uDFB7"
// "𠮷"

"\u20BB7"
// " 7"

• 上面代码表示，如果直接在\u后面跟上超过0xFFFF的数值（比如\u20BB7），JavaScript会理解成\u20BB+7。由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟着一个7。
• 在ES6中我们可以使用大括号来正确解读字符

"\u{20BB7}"
// "𠮷"

"\u{41}\u{42}\u{43}"
// "ABC"

let hello = 123;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80'
// true

codePointAt

• 在Javascript内部，所有的字符都utf-16的格式存储，每个字符占用两字节，对于那些需要四个字节存储的字符，会被认为是两个字符

var s = "𠮷";

s.length // 2
s.charAt(0) // ''
s.charAt(1) // ''
s.charCodeAt(0) // 55362
s.charCodeAt(1) // 57271

• ES6提供了codePointAt的方法可以正确处理四个字节的字符

var s = '𠮷a';

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271

s.codePointAt(2) // 97

• 该函数对两个字节的字符与charCodeAt没有区别，处理四字节字符字节是可以正确解读，但是如上述代码，该方法的参数还是不正确，比如a的下标应该为2，此时最好的解决方法就是是用for...of循环。

var s = '𠮷a';
for (let ch of s) {
  console.log(ch.codePointAt(0).toString(16));
}
// 20bb7
// 61

String.fromCodePoint()

• ES5提供String.fromCharCode方法，用于从码点返回对应字符，但是这个方法不能识别32位的UTF-16字符（Unicode编号大于0xFFFF）

String.fromCharCode(0x20BB7)
// "ஷ"

• ES6提供了String.fromCodePoint方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode方法的不足。在作用上，正好与codePointAt方法相反。

String.fromCodePoint(0x20BB7)
// "𠮷"
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true

• 注意，fromCodePoint方法定义在String对象上，而codePointAt方法定义在字符串的实例对象上。

字符串的遍历器接口

• ES6为字符串新增了遍历器接口，该接口使得字符串可以使用for...of循环读取字符

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

• 除了遍历器字符串，这个接口最大的优点是可以处理大于\uFFFF码点的字符

var text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// "𠮷"

includes(), startsWith(), endsWith()

• 定义
  • includes()：返回布尔值，表示是否找到了参数字符串。
  • startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
  • endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾
    部。

var s = 'Hello world!';

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

var s = 'Hello world!';

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

• 第二个的参数n表示前n个参数
• 其他俩个参数n表示有第几个字符开始查找。

repeat()

repeat方法返回一个新字符串，其内容为原字符串的重复。

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

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   '

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

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

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

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