ES6入门之字符串的扩展

Lieme2019-03-242024-01-04

1. 字符的 Unicode 表示法

Javascript 中允许采用 \uxxxx的形式表示一个字符，其中xxxx表示字符的Unicode码点。如下

"\u0061"

这种表示有区间只能在 0000 ~ FFFF之间，如果超出则需要用双字节的的形式表示

"\u20BB7\uDFB1"

在ES6中，对字符串的写法做出了改变。改为将码点放入大括号中，就能正确读取该字符，如下：

"\u{20BB7}" // 吉

2. codePointAt()

Javascript内部，字符以 UTF-16的格式存储，每个字符固定为2个字节。对于需要4个字节储存的字符，JavaScript会认为它们是两个字符。如下：

var s = "吉"

s.length // 2
s.charAt(0) // ''
s.charAt(1) // ''
s.charCodeAt(0) // 55362
s.charCodeAt(1) // 57271

上面代码中汉字吉需要4个字节存储，但是JavaScript不能正确处理，字符串长度误判为2，而且charAt 方法无法读取字符，charCodeAt 只能返回前面两个字节和后面两个字节的值，ES6 提供了 codePointAt 方法能够正确处理4个字节存储的字符，返回一个字符的码点，如下：
let s = ‘吉a’；

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271

codePointAt() 方法是测试一个字符由两个字节还是四个字节组成的最简单的方法

3. String.fromCodePoint()

ES5 提供了 String.fromCharCode 方法用于从码点返回对应字符，但是不能识别32位的UTR-16字符，ES6提供了 Sring.fromCodePoint() 方法可以识别大于32位的。如果有多个参数则将合并。如下：

String.fromCodePoint(0x20BB7)
// "𠮷"
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true

注意：fromCodePoint 方法定义在 String 对象上，而codePointAt 方法定义在字符串实例对象上

4. 字符串的遍历器接口

ES6为字符串添加了遍历器接口，字符串可以被for of 遍历

5. normalize()

用来将字符的不同表示方法统一为同样的形式，

6. includes(), startsWith(), endsWith()

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

7. repeat()

用来返回一个新字符串，表示将原字符串重复N次

'x'.repeat(2) // 'xx'
'cx'.repeat(3) // 'cxcxcx'

参数NaN等同于 0。
'na'.repeat(NaN) // ""

如果repeat的参数是字符串，则会先转换成数字。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

8. padStart()，padEnd()

用于字符串的补全，接受两个参数，第一个字符串补全生效的最大长度，第二个是用来补全的字符串，如下：

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

注意：
如果原字符串的长度等于或大于最大长度，则补全不生效，返回原字符串

如果补全字符串和原字符串，两者长度超过最大长度，则截取超出位数的补全字符串

9. matchAll()

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

10. 模板字符串

用来简化之前模板的写法，写法如下：

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);
上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);



大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

11. 模板编译

使用<%…%>放置 JavaScript 代码，使用<%= … %>输出 JavaScript 表达式，如下：

let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

12. 标签模板

模板字符串可以跟在一个函数名后面，该函数将被调用来处理这个模板字符串，这被称为标签模板。如下：

alert(123)
alert`123`

标签模板其实不是模板，而是函数的一种特殊形式。“标签”就是函数，跟在后面的模板字符串就变成了它的参数。但是如果模板字符串里面有变量，就会将模板字符串先处理成多个参数，再调用函数。如下：

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

String.raw()

ES6 为原生 String 对象，提供了一个raw方法。用来充当模板字符串的处理函数，返回一个斜杠都被转义的字符串，对应于替换变量后的模板字符串。如下：

String.rawHi\n${2+3}!;
// 返回 “Hi\n5!”

String.rawHi\u000A!;
// 返回 “Hi\u000A!”
模板字符串的限制

模板字符串默认会将字符串转义，导致无法嵌入其他语言。为了解决这个问题，ES2018 放松了对标签模板里面的字符串转义的限制。如果遇到不合法的字符串转义，就返回undefined，而不是报错，并且从raw属性上面可以得到原始字符串。