字符串的扩展

134 阅读3分钟

字符的 Unicode 表示法

ES6 中只要将码点放入大括号,就能正确解读该字符。大括号表示法与四字节的 UTF-16 编码是等价的。

"\u20BB7" // "7"
"\u{20BB7}" // "𠮷"
"\u{1F680}" === "\uD83D\uDE80" // true

JavaScript 共有6种方法可以表示一个字符

"\z" === "z" // true
"\172" === "z" // true
"\x7A" === "z" // true
"\u007A" === "z" // true
"\u{7A}" === "z" // true

codePointAt()

codePointAt() 能够正确处理4个字节存储的字符,返回一个字符的码点,参数是字符在字符串中的位置(从0开始)。该方法定义在字符串实例对象上。

String.fromCodePoint()

从码点返回对应的字符,可以识别大于 0xFFFF 的字符,作用上与 codePointAt 相反。该方法定义在 String 对象上。

字符串的遍历器接口

ES6 为字符串添加了遍历器接口,使得字符串可以有 for...of 循环遍历,这个遍历器最大的优点是可以识别大于 0xFFFF 的码点。

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);
}
// "𠮷"

normalize()

ES6 为字符串实例提供了 normalize 方法,用来将字符的不同表示方法统一为同样的形式,这称为 Unicode 正规化。该方法可接收一个参数来指定 normalize 的方式。

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

includes()、startsWith()、endsWith()

这三个方法都可以接受两个参数:参数字符串、开始搜索的位置(可选)。使用第二个参数 n 时,endsWith 与其他两个方法不同,表示针对前 n 个字符进行查找,其他两个方法表示从第 n 个位置到字符串结束位置进行查找。

  • includes():返回布尔值,表示是否找到了参数字符串
  • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部
  • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部

repeat()

repeat() 方法返回一个新的字符串,表示将原字符串重复 n 次。接收一个表示重复次数的参数

  • 参数是正小数,向下取整
  • 参数是小于等于 -1 的负数或者 Infinity ,报错
  • 参数是 0 到 -1 之间的小数,等同于 0
  • 参数是 NAN 等同于 0
  • 参数是字符串,转换为数字(使用 Number() 转换)
"hello".repeat(2) // 'hellohello'
'na'.repeat(0) // ''
'na'.repeat(2.9) // 'nana'
'na'.repeat(-1) // RangeError
'na'.repeat(Infinity) // RangeError
'na'.repeat(-0.9) // ''
'na'.repeat(NAN) // ''
'na'.repeat('na') // ''
'na'.repeat('3') // 'nanana'

padStart()、padEnd()

这两个方法用于字符串不全长度,padStart() 用于头部补全,padEnd() 用于尾部补全。

接收两个参数:指定字符串的最小长度、补全的字符串(省略时用空格补全)。

原字符串的长度等于或大于指定的最小长度时,不进行补全操作,返回原字符串

用来补全的字符串与原字符串之和超过了指定的最小长度,截去超出位数的补全字符串

'x'.padStart(5, 'ab') // "ababx"
'x'.padEnd(5, 'yz') // "xyzyz"
'xxx'.padStart(2, 'ab') // "xxx"
'abc'.padStart(10, '0123456789') // "0123456abc"
'x'.padStart(4) // "   x"

padStart 常用于数值补全指定位数、提示字符串格式

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '2021-02-DD') // "2021-02-12"
'09-12'.padStart(10, '2021-MM-DD') // "2021-09-12"

模板字符串

模板字符串中所有的空格和缩进都会被保留在输出中。

${} 大括号内部是可以为一个字符串(将会原样输出)、任意 js 表达式,可以进行运算,引用对象属性,可以调用函数

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

`${fn()}` // Hello World
`Hello ${'World'}` // Hello World

String.raw()

可用来充当模板字符串的处理函数,返回一个反斜线都被转义的字符串,对应于替换变量后的模板字符串。如果反斜线已经转义,则 String.raw 不做任何处理。

String.raw `Hi\n${ 2 + 3 }`; // 相当于"Hi\\n2"
String.raw `Hi\\n`; // 相当于"Hi\\n"

String.raw 也可以作为函数使用。第一个参数一个具有 raw 属性的对象,raw 属性的值是一个数组。

String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'
// 等同于下一句
String.raw({ raw: ['t', 'e', 's', 't'] }, 0, 1, 2);