ES6加强了对Unicode的支持,并扩展了字符串的 对象
1. 字符的Unicode表示法
js允许用\uxxxx
来表示一个字符,但只限于码点在\u0000
~\uFFFF
之间,超出这个范围的字符可用两个双字节表示。
如果\u
后面加超过0xFFFF
的数值,js会理解成一个码点和一个字符,比如\u20BB7
会理解成\u20BB+7
,打印出“7”
但是如果加了大括号,如\u{20BB7}
就能正确解读字符
"\u{20BB7}"
// "𠮷"
"\u{41}\u{42}\u{43}"
// "ABC"
let hello = 123;
hell\u{6F} // 123
'\u{1F680}' === '\uD83D\uDE80'
// true
2. codePointAt()
js内部,字符以 UTF-16 的格式储存,每个字符固定为2
个字节。
背景:汉字“𠮷”的码点是0x20BB7
,UTF-16 编码为0xD842 0xDFB7
,需要4
个字节储存。对于这种4
个字节的字符,JavaScript 不能正确处理,字符串长度会误判为2
,而且charAt
方法无法读取整个字符,charCodeAt
方法只能分别返回前两个字节和后两个字节的值。
结果:ES6提供了codePointAt方法,能正确处理四个字节存储的字符,返回一个字符的码点(十进制)
-
codePointAt方法:这个方法的参数是字符在字符串中的位置,如果一个汉字占了两个字符,那么0代表汉字的前两个字节,1代表汉字的后两个字节
如果想要将这个函数返回的十进制数转换成十六进制,可以使用toString方法
let s = '𠮷a'; s.codePointAt(0).toString(16) // "20bb7" s.codePointAt(2).toString(16) // "61"
-
注意:codePointAt方法传入的序号有时候是不正确的(比如上面代码中a的序号应该是1),为了解决这个问题,可以使用
for...of
循环let s = '𠮷a'; for (let ch of s) { console.log(ch.codePointAt(0).toString(16)); } // 20bb7 // 61
3. String.fromCodePoint()
ES5 提供String.fromCharCode
方法,用于从码点返回对应字符,但是这个方法不能识别 32 位的 UTF-16 字符(Unicode 编号大于0xFFFF
)。
String.fromCharCode(0x20BB7)
// "ஷ"
ES6提供了String.fromCodePoint
方法,可以识别大于0xFFFF
的字符
- 注意:
String.fromCodePoint
方法定义在String对象上,但codePointAt
方法定义在字符串的实例对象上。
4. 字符串的遍历器接口
ES6 为字符串添加了遍历器接口,使得字符串可以被for...of
循环遍历。
- 优点:
for...of
可以识别大于0xFFFF
的码点,但for循环不行
5. normalize()
Unicode提供了两种方法用来表示语调符号和重音符号。一种是直接提供重音符号的字符,另一种是提供合成符号
JavaScript将合成字符当成两个字符,所以虽然用两种方法可以表示同一个字符,但实际上JavaScript是识别不了的
ES6提供normalize()
方法来解决上述问题
'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true
normalize
方法可以接受一个参数指定方式,参数可选值如下:
NFC
,默认参数,表示“标准等价合成”,返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价。NFD
,表示“标准等价分解”,即在标准等价的前提下,返回合成字符分解的多个简单字符。NFKC
,表示“兼容等价合成”,返回合成字符。所谓“兼容等价”指的是语义上存在等价,但视觉上不等价,比如“囍”和“喜喜”。NFKD
,表示“兼容等价分解”,即在兼容等价的前提下,返回合成字符分解的多个简单字符。
6. includes(),startsWith(),endsWith()
除了indexOf方法可以用来确定一个字符串是否包含在另一个字符串中,还有另外三种方法:
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数,表示开始搜索的位置。但是endwith针对的是前n个字符。
7. repeat()
这个方法返回一个新字符串,表示将原字符串重复n次。参数可能情况如下:
如果参数是小数,小数会被取整。
如果参数是负数,会报错
如果参数是零到负一之间的小数,等同于零
如果是NaN也等同于零
如果参数是字符串,会先转换成数字
'x'.repeat(3) // "xxx"
'na'.repeat(2.9) // "nana"
'na'.repeat(NaN) // ""
'na'.repeat('na') // ""
8. padStart(),padEnd()
这两个方法用于补全字符串,padStart()
用于头部补全,padEnd()
用于尾部补全。
这两个方法一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。
如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。
'abc'.padStart(10, '0123456789')
// '0123456abc'
如果第二个参数省略,默认用空格补全长度
9. 模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串(所有空格和缩进都会保留哎输出中),或者在字符串中嵌入变量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
如果在多行文本中消除换行,可以使用trim消除
在${}中可以使用字符串、变量和表达式,也可以调用函数
模板字符串能嵌套,可以在模板字符串的变量之中,嵌入了另一个模板字符串,如下:
const tmpl = addrs => `
${addrs.map(addr => `
`).join('')}
${addr.first}
${addr.last}
`;
const data = [
{ first: '', last: 'Bond' },
{ first: 'Lars', last: '' },
];
console.log(tmpl(data));
//
//
//
//
//
//
//
//
// BondLars
10. 标签模板
标签模板:模板字符串也可以紧跟在一个函数名后面,这个函数将被调用来处理这个模板字符串
alert`123`
// 等同于
alert(123)
如果模板字符里面有变量,会将模板字符串先处理成多个参数再调用函数。下面这个函数的第一个参数是一个数组,其他参数都是模板字符串被替换后的值
let a = 5;
let b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
标签模板可以用来过滤掉HTML字符串,防止用户恶意输入
11. String.raw()
这个方法用来充当模板字符串的处理函数,返回一个斜杠都被转义的字符串,对应于替换变量后的模板字符串。
这个方法也可以作为正常函数使用,它的第一个参数是一个具有raw
属性的对象,且raw
属性的值应该是一个数组。
String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'
// 等同于
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);
12. 模板字符串的限制
模板字符串默认会将字符串转义,导致无法嵌入其他语言,如下:
function latex(strings) {
// ...
}
let document = latex`
\newcommand{\fun}{\textbf{Fun!}} // 正常工作
\newcommand{\unicode}{\textbf{Unicode!}} // 报错
\newcommand{\xerxes}{\textbf{King!}} // 报错
Breve over the h goes \u{h}ere // 报错
`
ES2018放松了对标签模板里面的字符串转义限制,遇到不合法字符就返回undefined,并且从raw属性上面可以得到元字符串
但是,这种对字符串转义的放松,只在标签模板解析字符串时生效,不是标签模板的场合,依然会报错。