ES6 - 字符串相关的扩展

105 阅读4分钟

ECMAScript 6 入门

字符串的扩展

加强对 Unicode 的支持。

ES6 加强了对 Unicode 的支持,允许采用 \uxxxx 形式表示一个字符。但这种表示法只限于码点在 \u0000 ~ \uFFFF 之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。

"\u0061";
// "a"

"\uD842\uDFB7";
// "𠮷"

ES6 对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符。

"\u{20BB7}";
// "𠮷"

有了这种表示法之后,JavaScript 共有 6 种方法可以表示一个字符。

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

字符串的 Iterator(迭代器)接口

for (let c of "abcde") {
  console.log(c);
}
// 'a', 'b', 'c', 'd', 'e'

直接输入 U+2028 和 U+2029

JavaScript 规定有 5 个字符,不能在字符串里面直接使用,只能使用转义形式:

  • U+005C:反斜杠(reverse solidus)
  • U+000D:回车(carriage return)
  • U+2028:行分隔符(line separator)
  • U+2029:段分隔符(paragraph separator)
  • U+000A:换行符(line feed)

冲突: JSON 格式允许字符串里面直接使用 U+2028(行分隔符)和 U+2029(段分隔符)

为了解决和 JSON 的冲突,ES2019 允许 JavaScript 字符串直接输入 U+2028(行分隔符)和 U+2029(段分隔符)

JSON.stringify() 的改造

UTF-8 标准规定,0xD800 到 0xDFFF 之间的码点,不能单独使用,必须配对使用。

JSON.stringify() 的问题在于,它可能返回 0xD800 到 0xDFFF 之间的单个码点。

为了确保返回的是合法的 UTF-8 字符,ES2019 改变了 JSON.stringify()的行为。如果遇到 0xD800 到 0xDFFF 之间的单个码点,或者不存在的配对形式,它会返回转义字符串,留给应用自己决定下一步的处理。

模板字符串

const name = "abc";
console.log(`hello, ${name}`); // 'hello, abc'

标签模板

模板字符串可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。

alert`hello`;
// 等同于
alert(["hello"]);

字符串的新增方法

String.fromCodePoint()

ES5 提供 String.fromCharCode() 方法,用于从 Unicode 码点返回对应字符,但是这个方法不能识别码点大于 0xFFFF 的字符。

String.fromCharCode(0x20bb7);
// "ஷ"

ES6 提供了 String.fromCodePoint() 方法,可以识别大于 0xFFFF 的字符,弥补了 String.fromCharCode() 方法的不足。

String.fromCodePoint(0x20bb7);
// "𠮷"

String.raw()

该方法返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,往往用于模板字符串的处理方法。

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

String.raw()本质上是一个正常的函数,只是专用于模板字符串的标签函数。

实例方法:codePointAt()

ES6 提供了 codePointAt() 方法,能够正确处理 4 个字节储存的字符,返回一个字符的码点。

实例方法:normalize()

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

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

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

s.startsWith("Hello"); // true
s.endsWith("!"); // true
s.includes("o"); // true

这三个方法都支持第二个参数,表示开始搜索的位置。 使用第二个参数 n 时,endsWith 的行为与其他两个方法有所不同。它针对前 n 个字符,而其他两个方法针对从第 n 个位置直到字符串结束。

实例方法:repeat()

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

"x".repeat(3); // "xxx"
"na".repeat(2.9); // 参数如果是小数,会被取整 "nana"

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

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart() 用于头部补全,padEnd() 用于尾部补全。

"x".padStart(5, "ab"); // 'ababx'

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

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

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

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

实例方法:matchAll()

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

实例方法:replaceAll()

字符串的实例方法 replace() 只能替换第一个匹配。

如果要替换所有的匹配,不得不使用正则表达式的 g 修饰符。

"aabbcc".replace(/b/g, "_");

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

实例方法:at()

at() 方法接受一个整数作为参数,返回参数指定位置的字符,支持负索引(即倒数的位置)。

const str = "hello";
str.at(1); // "e"
str.at(-1); // "o"