ES6语法总结-字符串新增方法

1、String.fromCodePoint()

• ES5提供了String.fromCharCode()方法，用于从Unicode码点返回对应字符，但是这个方法不能识别码点大于0xFFFF的字符串
• ES5提供了String.fromCodePoint()方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode()的不足

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

2、String.raw()

• 返回一个斜杆都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法

String.raw`Hi\n${2+3}!` // 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hin5!" 
String.raw`Hi\u000A!`; // 实际返回 "Hi\\u000A!"，显示的是转义后的结果 "Hi\u000A!"

• 如果原字符串的斜杠已经转义，那么String.raw()会进行再次转义

String.raw`Hi\\n` // 返回 "Hi\\\\n" 
String.raw`Hi\\n` === "Hi\\\\n" // true

• 本质上是一个正常的函数，只是专用于模板字符串的标签函数。如果写成正常函数的形式，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组，对应模板字符串解析后的值

// `foo${1 + 2}bar` 
// 等同于 
String.raw({ raw: ['foo', 'bar'] }, 1 + 2) // "foo3bar"

3、实例方法：codePointAt()

• JavaScript 内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode 码点大于0xFFFF的字符），JavaScript 会认为它们是两个字符

var s = "𠮷";
s.length // 2 
s.charAt(0) // '' 
s.charAt(1) // '' 
s.charCodeAt(0) // 55362 
s.charCodeAt(1) // 57271

• codePointAt()方法返回的是码点的十进制值，如果想要十六进制可以使用toString()方法转换一下

// codePointAt()正确处理
let s = '𠮷a';

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

4、实例方法：normalize()

5、实例方法：includes()、startsWith()、endsWith()

• ES6提供了三种新方法：都是返回boolean值，都支持第二个参数，表示开始搜索的位置

  1. includes()：是否找到了参数字符串
  2. startsWith()：参数字符串是否在原字符串开头
  3. endsWith()：参数字符串是否在原字符串结尾，第二个参数n表示针对前n个字符

6、实例方法：repeat()

• 表示将原字符重复n次

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

• 参数如果是小数，会被取整
• 如果repeat的参数是负数或者Infinity，会报错
• 参数是 0 到-1 之间的小数，则等同于 0
• 参数NaN等同于 0
• 如果repeat的参数是字符串，则会先转换成数字

'na'.repeat('na') // "" 
'na'.repeat('3') // "nanana"

7、实例方法：padStart()、padEnd()

• 如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全

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

• 如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串
• 如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串
• 如果省略第二个参数，默认使用空格补全长度
• adStart()的常见用途是为数值补全指定位数。下面代码生成 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" 这里12替换了DD
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

8、实例方法：trimStart()、trimEnd()

• ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串

9、实例方法：matchAll()

• 方法返回一个正则表达式在当前字符串的所有匹配

10、实例方法：replaceAll()

• 正则表达式毕竟不是那么方便和直观，ES2021 引入了replaceAll()方法，可以一次性替换所有匹配
• 如果searchValue是一个不带有g修饰符的正则表达式，replaceAll()会报错。这一点跟replace()不同
• 第二个参数也可以使用一些特殊字符串

// $& 表示匹配的字符串，即`b`本身 
// 所以返回结果与原字符串一致 
'abbc'.replaceAll('b', '$&') 
// 'abbc'  

// $` 表示匹配结果之前的字符串 
// 对于第一个`b`，$` 指代`a` 
// 对于第二个`b`，$` 指代`ab` 
'abbc'.replaceAll('b', '$`') // 'aaabc'  

// $' 表示匹配结果之后的字符串 
// 对于第一个`b`，$' 指代`bc` 
// 对于第二个`b`，$' 指代`c` 'abbc'.replaceAll('b', `$'`) 
// 'abccc'  

// $1 表示正则表达式的第一个组匹配，指代`ab` 
// $2 表示正则表达式的第二个组匹配，指代`bc` 
'abbc'.replaceAll(/(ab)(bc)/g, '$2$1') 
// 'bcab'  

// $$ 指代 $ 
'abc'.replaceAll('b', '$$') 
// 'a$c'