ECMAScript 6 笔记(4)- 字符串的扩展

原创 乘风逐月 随笔 ES6 208阅读 2018-08-17 17:21:24 举报

阅读原文: 阮一峰:ECMAScript 6 入门

ES6 加强了对 Unicode 的支持,并且扩展了字符串对象。

一、字符的 Unicode 表示法

JavaScript 允许采用 \uxxxx 形式表示一个字符, xxxx 表示字符的 Unicode 码点。但是这种表示法,只限于码点在 \u0000~\uFFFF 之间的字符。超出这个范围的字符,必须用双字节形式表示。

如果 \u 后面跟着超过 0xFFFF 的数值,比如 \u20BB7 ,JavaScript 会理解成 \u20BB+7 。
由于 \u20BB 是一个不可打印字符,所以只会显示成一个空格,后面跟一个7。

ES6改进了这一点,只要将码点放入大括号,就能正确解读该字符。 这种大括号表示法与四字节的UTF-16 编码是等价的。

现在 JavaScript 有六种方法表示一个字符:

二、codePointAt()

JavaScript 内部,字符以 UTF-16 的格式存储,每个字符固定为 2 个字节。对于那些需要 4 个字节存储的字符(码点大于 0xFFFF 的字符),JavaScript 会认为他们是两个字符。

上面的代码中,‘𠮷’字的码点是 0x20BB7,UTF-16编码为 0xD842 0Xdfb7(十进制为 55362 57271),需要四个字节存储。那么 charAt() 无法读取整个字符,charCodeAt() 方法只能分别返回前两个字节和后两个字节值。

ES6 提供了 codePointAt() 方法,能够正确处理4个字节存储的字符,返回32位的UTF-16字符的码点。对于那些两个字节存储的常规字符,codePointAt() 返回的结果与 charCodeAt() 方法相同。

上例中,JavaScript 将 '𠮷a' 视为 3 个字符。codePointAt()方法的参数,是字符在字符串中的位置(从 0 开始)。
问题:字符 ‘a’ 在字符串 s 的正确位置是1,但必须传入向 codePointAt 方法传入 2。解决这个问题的办法是使用 for...of循环,他会正确识别32位的UTF-16字符。

codePointAt 方法返回的是十进制的码点,想要十六进制的值,可以用 toString 方法转换。

codePointAt 方法可以简便测试一个字符是两个字节组成还是四个字节组成。

三、 String.formCodePoint()

ES5提供 String.formCharCode() 方法,用于从码点返回对应字符,但是这个方法不能识别 32 位的UTF-16字符(Unicode 编号大于 0xFFFF)。

ES6提供了 String.formCharPoint()方法,可以识别大于0XFFFF的字符。作用上与 codePointAt()方法相反。
如果 String.formCodePoint() 方法有多个参数,则会被合并成一个字符串返回。

注意: formCodePoint 方法定义在 String 对象上,而 codePointAt 方法定义周四字符串的实例对象上。

四、字符串的遍历接口

ES6为字符串添加了遍历接口,使得字符串可以被 for...of循环遍历。除了变量字符串,这个遍历器的最大优点是可以识别大于 0xFFFF 的码点,传统的 for 循环无法识别。

五、includes()、startsWith()、endsWith()

传统上,JavaScript 只有 indexOf() 方法,可以用来确定一个字符串是否包含在另一个字符串中。
ES6 提供了三种新方法:
a. inclueds(str, n): 返回布尔值,表示是否找到了参数字符串
b. startsWith(str, n): 返回布尔值,表示参数字符串是否在原字符串的头部
c. endsWith(str, n): 返回布尔值,表示参数字符串是否在原字符串的尾部
这三个方法的参数为目标字符串和开始搜索的位置。

但是有第二参数 n 时,endsWith 的行为与其他两个方法有所不同。endsWith 的第二个参数表示查找前 n 个字符,而其他两个方法表示从 n 开始直到结束。

六、repeat()

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

参数如果是一个小数,会被下取整。

如果参数负数或 Infinity,会报错。

但是如果参数是 0 到 -1 之间的小数,则等同于0,这是因为会先进性取整运算。0 到 -1 之间的小数,取整以后等于 -0,repeat() 视为0。

如果参数是 NaN,则等同于0。
'hello'.repeat(NaN);// ""
如果参数是字符串,则会先转换位数字。

七、padStart()、padEnd()

padStart()、padEnd(),用于补全字符串。如果某个字符串不够指定长度,会在头部或尾部补全。padStart() 用于补全头部,padEnd() 用于补全尾部。
这两个方法接受两个参数,第一个参数指定用来补全字符串的最小长度,第二个参数是用来补全的字符串。

注意:
a. 如果原字符串的长度等于或大于指定的最小长度,则返回原字符串。
b. 如用用来补全的字符串与原字符串,两者之和的长度,超过了指定的最小长度,则会截去超出位数的补全字符串。
c. 如果省略第二个参数,默认使用空格补全长度。

常见用途:
a. 为数值补全长度
b. 提示字符串格式

八、模板字符串

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

1.基本用法

注:
a. 如果在模板字符串中需要使用反引号,则前面需要使用反斜杠转义。
b. 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。

2.在模板字符串中使用变量

(1) 在模板字符串中嵌入变量,需要将变量名写在 ${} 之中。
(2) 大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。
(3) 模板字符串之中还能调用函数。
(4) 如果大括号中的值不是字符串,将按照一般的规则转为字符串。如: 如果大括号中是一个对象,将默认调用对象的 toString 方法。
(5) 如果模板字符串中的变量没有声明将会报错。
(6) 如果大括号内部是一个字符串,将原样输出。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复