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

CY 2019年01月04日 636次浏览

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

字符的 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()方法返回一个正则表达式在当前字符串的所有匹配。

上一篇： ES6读书简记·Symbol