AlexChen's Blog

Appearance

字符的 Unicode 表示法 ​

ES6 加强了对 Unicode 的支持，允许采用\uxxxx 形式表示一个字符，其中 xxxx 表示字符的 Unicode 码点。但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示，或者将码点放入大括号。

javascript
"\u0061"
// "a"

"\uD842\uDFB7"
// "𠮷"

"\u{20BB7}"
// "𠮷"
"\u0061"
// "a"

"\uD842\uDFB7"
// "𠮷"

"\u{20BB7}"
// "𠮷"

JavaScript 共有 6 种方法可以表示一个字符。

javascript
'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true
'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

字符串的遍历器接口 ​

ES6 为字符串添加了遍历器接口（详见《Iterator》一章），使得字符串可以被for...of循环遍历。

javascript
for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"
for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

JSON.stringify() ​

如果遇到0xD800到0xDFFF之间的单个码点，或者不存在的配对形式，它会返回转义字符串，留给应用自己决定下一步的处理。

javascript
JSON.stringify('\u{D834}') // ""\\uD834""
JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834""
JSON.stringify('\u{D834}') // ""\\uD834""
JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834""

模板字符串 ​

传统的 JavaScript 语言，通常需要使用 "" 和 + 来拼接字符串，ES6 引入了模板字符串解决这个问题。

模板字符串（template string）是增强版的字符串，用反引号 [`] 标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。具体规则如下：

  1. 用反引号包围模板字符串；
  2. 用 ${} 包围变量，表示从变量取值，填充到字符串中；
  3. 如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
  4. 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中，想消除的话可以使用 trim() 消除它。
javascript
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

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

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}`
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}`

模板字符串之中也能调用函数。

javascript
function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar
function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar