本文为学习笔记;
<<<<转载请注明原文出处!
ES6 加强了对 Unicode 的支持,并且扩展了字符串对象。
字符的 Unicode 表示法
JavaScript 允许采用 \uxxxx
形式表示一个字符,其中 xxxx
表示字符的 Unicode 码点,但是JavaScript这种表示法只限于码点在 \u0000
~ \uFFFF
之间的字符。超出这个范围的字符,必须用两个双字节的形式表示;
例如直接在
\u
后面跟上超过0xFFFF
的位数(比如\u20BB7
),JavaScript 会理解成\u20BB
+7
。由于\u20BB
是一个不可打印字符,所以只会显示一个空格,后面跟着一个7
。
ES6 对这一点做出了改进:
- 只要将码点放入大括号,就能正确解读该字符;
- 大括号表示法与四字节的 UTF-16 编码是等价的。
有了ES6的这种表示法后,JavaScript 总共有6种方法可以表示一个字符:
'\z' === 'z' // true'\172' === 'z' // true'\x7A' === 'z' // true'\u007A' === 'z' // true'\u{7A}' === 'z' // true
codePointAt()
JavaScript 内部,字符以 UTF-16 的格式储存,每个字符固定为2个字节;对于那些需要4个字节储存的字符(Unicode 码点大于0xFFFF
的字符),JavaScript的处理方式:
- JavaScript 会将字符串长度会误判为2认为它们是两个字符。
charAt
方法无法读取整个字符,charCodeAt
方法只能分别返回前两个字节和后两个字节的值。
ES6 提供了codePointAt
方法,能够正确处理 4 个字节储存的字符,返回一个字符的码点:
codePointAt
方法的参数,是字符在字符串中的位置(从0
开始)。codePointAt
方法返回的是码点的十进制值,如果想要十六进制的值,可以使用toString
方法转换一下。s.codePointAt(2).toString(16) // "61"
在上面的代码中
codePointAt
方法的参数仍然是不正确的(字符a在字符串s的正确位置序号应该是 1,但是必须向codePointAt
方法传入 2),解决这个问题的一个办法是使用for...of
循环,因为它会正确识别 32 位的 UTF-16 字符。
codePointAt
方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。
codePointAt
方法会正确返回 32 位的 UTF-16 字符的码点。对于那些两个字节储存的常规字符,它的返回结果与charCodeAt
方法相同。 String.fromCodePoint()
ES5 提供String.fromCharCode
方法,用于从码点返回对应字符,但是这个方法不能识别 32 位的 UTF-16 字符(Unicode 编号大于0xFFFF
),Unicode超出0xFFFF
的部分将被舍弃。
String.fromCodePoint
方法,可以识别大于0xFFFF
的字符,弥补了String.fromCharCode
方法的不足。在作用上,正好与codePointAt
方法相反。 - 如果
String.fromCodePoint
方法有多个参数,则它们会被合并成一个字符串返回。
注意,fromCodePoint
方法定义在String对象上,而codePointAt
方法定义在字符串的实例对象上。
字符串的遍历器接口
ES6 为字符串添加了遍历器接口(Iterator
),使得字符串可以被for...of
循环遍历。
0xFFFF
的码点,传统的for循环无法识别这样的码点。 normalize()
许多欧洲语言有语调符号和重音符号。为了表示它们,Unicode 提供了两种方法:
- 一种是直接提供带重音符号的字符,比如
Ǒ(\u01D1)
。 - 另一种是提供合成符号(combining character),即原字符与重音符号的合成,两个字符合成一个字符,比如
O(\u004F)
和ˇ(\u030C)
合成Ǒ(\u004F\u030C)
。
这两种表示方法,在视觉和语义上都等价,但是 JavaScript 不能识别。(JavaScript 将合成字符视为两个字符)
ES6 提供字符串实例的normalize()
方法,用来将字符的不同表示方法统一为同样的形式,这称为 Unicode 正规化。 '\u01D1'.normalize() === '\u004F\u030C'.normalize()// true
normalize
方法可以接受一个参数来指定normalize
的方式,参数的四个可选值如下。NFC
,默认参数,表示“标准等价合成”(Normalization Form Canonical Composition),返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价。NFD
,表示“标准等价分解”(Normalization Form Canonical Decomposition),即在标准等价的前提下,返回合成字符分解的多个简单字符。NFKC
,表示“兼容等价合成”(Normalization Form Compatibility Composition),返回合成字符。所谓“兼容等价”指的是语义上存在等价,但视觉上不等价,比如“囍”和“喜喜”。(这只是用来举例,normalize
方法不能识别中文。)NFKD
,表示“兼容等价分解”(Normalization Form Compatibility Decomposition),即在兼容等价的前提下,返回合成字符分解的多个简单字符。
normalize
方法目前不能识别三个或三个以上字符的合成。这种情况下,还是只能使用正则表达式,通过 Unicode 编号区间判断。
includes(), startsWith(), endsWith()
传统上,JavaScript 只有indexOf
方法,可以用来确定一个字符串是否包含在另一个字符串中。
includes()
:返回布尔值,表示是否找到了参数字符串。startsWith()
:返回布尔值,表示参数字符串是否在原字符串的头部。endsWith()
:返回布尔值,表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数,表示开始搜索的位置。
使用第二个参数n时,endsWith
的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。
repeat()
repeat
方法返回一个新字符串,表示将原字符串重复n次:
- 如果
repeat
的参数是负数或者Infinity
,会报错。 - 如果参数是
0
到-1
之间的小数,则等同于0
,这是因为会先进行取整运算。0
到-1
之间的小数,取整以后等于-0
,repeat
视同为0
。 - 参数
NaN
等同于 0。 - 如果
repeat
的参数是字符串,则会先转换成数字。
padStart(),padEnd()
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()
用于头部补全,padEnd()
用于尾部补全。
padStart()
和padEnd()
一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。 - 如果省略第二个参数,默认使用空格补全长度。
- 如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。
- 如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。
padStart()
的常见用途是为数值补全指定位数和提示字符串格式。
matchAll()
matchAll
方法返回一个正则表达式在当前字符串的所有匹配。
模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
- 如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
- 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
- 模板字符串中嵌入变量,需要将变量名写在
${}
之中。(大括号内部,就是执行 JavaScript 代码)- 大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。
- 模板字符串之中还能调用函数。
${f()}
- 如果大括号中的值不是字符串,将按照一般的规则转为字符串。
- 如果模板字符串中的变量没有声明,将报错。
- 由于模板字符串的大括号内部,就是执行 JavaScript 代码,因此如果大括号内部是一个字符串,将会原样输出。
模板编译
可以通过模板字符串,生成正式模板
标签模板
模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。
alert`123`// 等同于alert(123)
标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。
tag函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分,也就是说,变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间,以此类推。
tag函数的其他参数,都是模板字符串各个变量被替换后的值。String.raw()
ES6 还为原生的 String 对象,提供了一个raw
方法。
String.raw
方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。 String.raw`Hi\n${2+3}!`;// 返回 "Hi\\n5!"String.raw`Hi\u000A!`;// 返回 "Hi\\u000A!"
String.raw
方法可以作为处理模板字符串的基本方法,它会将所有变量替换,而且对斜杠进行转义,方便下一步作为字符串来使用。
模板字符串的限制
前面提到标签模板里面,可以内嵌其他语言。但是,模板字符串默认会将字符串转义,导致无法嵌入其他语言。
为了解决这个问题,ES2018 放松了对标签模板里面的字符串转义的限制:如果遇到不合法的字符串转义,就返回undefined
,而不是报错,并且从raw
属性上面可以得到原始字符串。注意
:这种对字符串转义的放松,只在标签模板解析字符串时生效,不是标签模板的场合,依然会报错。