ES6 字符串新增方法

cheney_ci
82 阅读1分钟
  1. String.fromCodePoint()方法定义在String对象上，它可以识别大于0xFFFF的字符。
String.fromCodePoint(0x20BB7)
// 𠮷
String.fromChartCode(0x20BB7)
// ஷ 在ES5中发生溢出，只能返回码点0BB7

String.fromCodePoint(0x78,0x1f680,0x79)
// 'x\uD83D\uDE80y'

如果String.fromCodePoint方法有多个参数，则他们会被合并成一个字符串返回。

  1. String.raw()方法返回对斜杠转义（即斜杠前面再加一个斜杠）的字符串，一般用于模板字符串的处理方法。
String.raw`Hi\n${2+3}!`
// 返回"Hi\\n5!"

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

String.raw`Hi\\n`
// 返回"Hi\\\\n"
  1. codePointAt()可以返回大于0xFFFF的字符的码点，对于两个字节储存的字符，其返回结果与chartCodeAt()方法相同。codePointAt()的参数是字符在字符串中的位置。
let s = '𠮷a'
// JavaScript把'𠮷a'看成三个字符

s.codePointAt(0)
// 134071 （即十六进制的20BB7）
s.codePointAt(1)
// 57271
s.codePointAt(2)
// 97

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

let s = '𠮷a'
s.codePointAt(0).toString(16)
// 20bb7
s.codePointAt(2).toString(16)
// 61

要使codePointAt()的参数正确，可以用for...of循环。

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

或者用扩展运算符进行展开运算。

let arr = [...'𠮷a']
arr.forEach(
    ch => console.log(ch.codePointAt(0).toString(16))
)
// 20bb7
// 61

codePointAt()可以测试一个字符是由两个字节还是四个字节组成。

function is32Bit(c){
    return c.codePoint(0) > 0xFFFF
}
is32Bit("𠮷") // true
is32Bit("a") // false
  1. JavaScript不能识别合成字符的表示方法。
'\u004F' // 'O'
'\u030C' // 'ˇ'
'\u004F\u030C' // 'Ǒ'
'\u01D1' // 'Ǒ'

'\u01D1' === '\u004F\u030C' // false 

'\u01D1'.length // 1
'\u004F\u030C'.length // 2
// JavaScript将合成字符视为两个字符，导致两种表示方法不相等

Unicode正规化：ES6提供字符串实例的normalize()方法将字符的不同表示方法统一为同样的形式。

'\u01D1'.normalize() === '\u004F\u030C'.normalize() // true

normalize接受一个参数来指定normalize的方式。

'\u004F\u030C'.normalize('NFD').length // 1，返回多个简单字符的合成字符（语义和视觉均等价）
'\u004F\u030C'.normalize('NFC').length // 2，返回合成字符分解的多个简单字符（语义和视觉均等价）
'\u004F\u030C'.normalize('NFKC').length // 1，返回合成字符（语义等价，视觉不等价）
'\u004F\u030C'.normalize('NFKD').length // 2，返回合成字符分解的多个简单字符（语义等价，视觉不等价）

5.includes()返回布尔值，表示是否找到参数字符串。

startsWith()返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith()返回布尔值，表示参数字符串是否在原字符串的尾部。

includes()和startsWith()的第二个参数表示从第n个位置开始搜索直到字符串结束，而endsWith()的第二个参数表示前n个字符。

let str = "Hello world!"

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

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
  1. repeat()返回一个新字符串，表示将原字符串重复n次。参数如果是小数会被取整；如果是负数或者Infinity会报错。
'x'.repeat(3) // 'xxx'
'na'.repeat(0) // ''

'na'.repeat(2.9)// 'nana'

'na'.repeat(Infinity) // RangeError

但如果参数是0到-1之间的小数，则等同于0，因为先取整等于-0，repeat视同为0。

'na'.repeat(-0.9) // ''
'na'.repeat(NaN) // ''

如果参数为字符串，则会先转换成数字。

'na'.repeat('na') // ''
'na'.repeat('3') // 'nanana'
  1. 如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全。padEnd()用于尾部补全。第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'

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

'xxx'.padStart(2,'ab') // 'xxx'

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

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

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

'x'.padStart(4) // '   x'

padStart的常见用途是为数值补全指定位数，如生成10位的数值字符串。

'1'.padStart(10,'0') // '0000000001'

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

'12'.padStart(10, 'YYYY-MM-DD') // 'YYYY-MM-12'
'09-12'.padStart(10, 'YYYY-MM-DD') // 'YYYY-09-12'
  1. trimStart()可以消除字符串头部的空格；trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。
const s = '  abc '

s.trim() // 'abc'
s.trimStart() // 'abc '
s.trimEnd() // '  abc'

除了空格键，这两个方法对字符串头部（或尾部）的tab键、换行符等不可见的空白符号也有效。

  1. 历史上的replace()只能替换第一个匹配的字符。
'aabbcc'.replace('b', '_') // 'aa_bcc'

ES2021引入replaceAll()可以一次性替换所有匹配。它返回一个新字符串，不会改变原字符串。

'aabbcc'.replaceAll('b', '_') // 'aa__cc'

replaceAll()的第二个参数表示替换的文本，其中可以使用一些特殊字符串。

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

// $`表示匹配结果前面的文本
// 第一个'b'的$`指'a'
// 第二个'b'的$`指'ab'
'abbc'.replaceAll('b', '$`') // 'aaabc'

// $'表示匹配结果后面的文本
'abbc'.replaceAll('b', `$'`) // 'abccc'

// $$表示美元符号
'abbc'.replaceAll('b', `$$`) // 'a$$c'

replaceAll()的第二个参数也可以是一个函数，该函数返回值会替换匹配的文本。

'abc'.replaceAll('b', () => '_') // 'a_c'
  1. at()接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数位置）。
'Hello'.at(4) // 'o'
'Hello'.at(-1) // 'o'
avatar
文章
阅读
粉丝