ES6读书简记·字符串扩展和新增方法

CY 2019年01月04日 572次浏览

字符串的扩展(部分摘录)

字符的 Unicode 表示法

如果 码点不是在\u0000~\uFFFF之间的字符, 只要将码点放入大括号,就能正确解读该字符

"\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

字符串的遍历器接口

字符串可以被for...of循环遍历, 这个遍历器最大的优点是可以识别大于0xFFFF的码点, 传统的for循环无法识别这样的码点。

模板字符串

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

  • 如果在模板字符串中需要使用反引号,则前面要用反斜杠转义

  • 使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中

  • 模板字符串中嵌入变量,需要将变量名写在${}之中,大括号之中还能调用函数可以写表达式

  • 模板字符串还能嵌套。

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

字符串新增方法

String.fromCodePoint()

fromCodePoint的目的是将码转换为字符

codePointAt的目的是某个位置上字符的码

之前的String.fromCharCode()方法, 这个方法不能识别码点大于0xFFFF的字符

ES6 提供了String.fromCodePoint()方法,可以识别大于0xFFFF的字符

fromCodePoint方法定义在String上,而codePointAt方法定义在字符串的实例对象上

String.raw()

该方法返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串。

实例方法:codePointAt()

正确的使用方法

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

或者:

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

codePointAt()方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}

is32Bit("𠮷") // true
is32Bit("a") // false

实例方法:normalize()

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

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

normalize方法中的参数有四种,其中 NFC返回字符的合成形式NFD返回字符的分解形式

normalize方法目前不能识别三个或三个以上字符的合成

实例方法:includes(), startsWith(), endsWith()

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

这三个方法都支持第二个参数,表示开始搜索的位置

使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

实例方法:repeat()

repeat方法返回一个新字符串,表示将原字符串重复n

'x'.repeat(3) // "xxx"

参数可以是小数,但是会自动取整,参数不能是Infinity或者小于等于-1的数字,因为会报RangeError错误。

如果参数是NaN按照0处理,如果参数是字符串,会自动转为数字。

实例方法:padStart(),padEnd()

两个挺有用的方法,会自动补全长度, padStart()用于头部补全padEnd()用于尾部补全,如果想要数字不足长度就自动补零可以使用这两个方法。

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

两个参数,第一个参数为字符串最终长度(当然原字符串长度大于这个数字除外),第二个参数为达不到长度需要补充的字符串

如果省略第二个参数,就会按照空格来处理。

两个重要的用途,第一种是数字的补全,第二种是用来做提示,比如说在Vue中做日期提示。

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

实例方法:trimStart(),trimEnd()

方法的作用正如它的名字, trimLeft()trimStart()的别名,trimRight()trimEnd()的别名。

实例方法:matchAll()

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