字符串的扩展
加强对 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"