diff --git a/docs/array.md b/docs/array.md index b0148b7..0aed4e4 100644 --- a/docs/array.md +++ b/docs/array.md @@ -58,7 +58,7 @@ const arr = [ // [1] ``` -注意,扩展运算符如果放在括号中,JavaScript 引擎就会认为这是函数调用。如果这时不是函数调用,就会报错。 +注意,只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。 ```javascript (...[1, 2]) @@ -71,7 +71,7 @@ console.log(...[1, 2]) // 1 2 ``` -上面前两种情况都会报错,因为扩展运算符所在的括号不是函数调用,而第三种情况`console.log(...[1, 2])`就不会报错,因为这时是函数调用。 +上面三种情况,扩展运算符都放在圆括号里面,但是前两种情况会报错,因为扩展运算符所在的括号不是函数调用。 ### 替代函数的 apply 方法 diff --git a/docs/generator.md b/docs/generator.md index 7b659d9..e08a149 100644 --- a/docs/generator.md +++ b/docs/generator.md @@ -764,7 +764,7 @@ gen.return(2); // Object {value: 2, done: true} ## yield\* 表达式 -如果在 Generator 函数内部,调用另一个 Generator 函数,默认情况下是没有效果的。 +如果在 Generator 函数内部,调用另一个 Generator 函数。需要在前者的函数体内部,自己手动完成遍历。 ```javascript function* foo() { @@ -774,20 +774,25 @@ function* foo() { function* bar() { yield 'x'; - foo(); + // 手动遍历 foo() + for (let i of foo()) { + console.log(i); + } yield 'y'; } for (let v of bar()){ console.log(v); } -// "x" -// "y" +// x +// a +// b +// y ``` -上面代码中,`foo`和`bar`都是 Generator 函数,在`bar`里面调用`foo`,是不会有效果的。 +上面代码中,`foo`和`bar`都是 Generator 函数,在`bar`里面调用`foo`,就需要手动遍历`foo`。如果有多个 Generator 函数嵌套,写起来就非常麻烦。 -这个就需要用到`yield*`表达式,用来在一个 Generator 函数里面执行另一个 Generator 函数。 +ES6 提供了`yield*`表达式,作为解决办法,用来在一个 Generator 函数里面执行另一个 Generator 函数。 ```javascript function* bar() { diff --git a/docs/let.md b/docs/let.md index 973b1c4..3c03090 100644 --- a/docs/let.md +++ b/docs/let.md @@ -289,12 +289,6 @@ function f1() { ES6 允许块级作用域的任意嵌套。 -```javascript -{{{{{let insane = 'Hello World'}}}}}; -``` - -上面代码使用了一个五层的块级作用域。外层作用域无法读取内层作用域的变量。 - ```javascript {{{{ {let insane = 'Hello World'} @@ -302,6 +296,8 @@ ES6 允许块级作用域的任意嵌套。 }}}}; ``` +上面代码使用了一个五层的块级作用域,每一层都是一个单独的作用域。第四层作用域无法读取第五层作用域的内部变量。 + 内层作用域可以定义外层作用域的同名变量。 ```javascript @@ -382,16 +378,6 @@ function f() { console.log('I am outside!'); } ES6 就完全不一样了,理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于`let`,对作用域之外没有影响。但是,如果你真的在 ES6 浏览器中运行一下上面的代码,是会报错的,这是为什么呢? -原来,如果改变了块级作用域内声明的函数的处理规则,显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题,ES6 在[附录 B](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-block-level-function-declarations-web-legacy-compatibility-semantics)里面规定,浏览器的实现可以不遵守上面的规定,有自己的[行为方式](http://stackoverflow.com/questions/31419897/what-are-the-precise-semantics-of-block-level-functions-in-es6)。 - -- 允许在块级作用域内声明函数。 -- 函数声明类似于`var`,即会提升到全局作用域或函数作用域的头部。 -- 同时,函数声明还会提升到所在的块级作用域的头部。 - -注意,上面三条规则只对 ES6 的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作`let`处理。 - -根据这三条规则,在浏览器的 ES6 环境中,块级作用域内声明的函数,行为类似于`var`声明的变量。 - ```javascript // 浏览器的 ES6 环境 function f() { console.log('I am outside!'); } @@ -407,7 +393,17 @@ function f() { console.log('I am outside!'); } // Uncaught TypeError: f is not a function ``` -上面的代码在符合 ES6 的浏览器中,都会报错,因为实际运行的是下面的代码。 +上面的代码在 ES6 浏览器中,都会报错。 + +原来,如果改变了块级作用域内声明的函数的处理规则,显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题,ES6 在[附录 B](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-block-level-function-declarations-web-legacy-compatibility-semantics)里面规定,浏览器的实现可以不遵守上面的规定,有自己的[行为方式](http://stackoverflow.com/questions/31419897/what-are-the-precise-semantics-of-block-level-functions-in-es6)。 + +- 允许在块级作用域内声明函数。 +- 函数声明类似于`var`,即会提升到全局作用域或函数作用域的头部。 +- 同时,函数声明还会提升到所在的块级作用域的头部。 + +注意,上面三条规则只对 ES6 的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作`let`处理。 + +根据这三条规则,浏览器的 ES6 环境中,块级作用域内声明的函数,行为类似于`var`声明的变量。上面的例子实际运行的代码如下。 ```javascript // 浏览器的 ES6 环境 @@ -426,7 +422,7 @@ function f() { console.log('I am outside!'); } 考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。 ```javascript -// 函数声明语句 +// 块级作用域内部的函数声明语句,建议不要使用 { let a = 'secret'; function f() { @@ -434,7 +430,7 @@ function f() { console.log('I am outside!'); } } } -// 函数表达式 +// 块级作用域内部,优先使用函数表达式 { let a = 'secret'; let f = function () { @@ -443,7 +439,21 @@ function f() { console.log('I am outside!'); } } ``` -另外,还有一个需要注意的地方。ES6 的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错。 +另外,还有一个需要注意的地方。ES6 的块级作用域必须有大括号,如果没有大括号,JavaScript 引擎就认为不存在块级作用域。 + +```javascript +// 第一种写法,报错 +if (true) let x = 1; + +// 第二种写法,不报错 +if (true) { + let x = 1; +} +``` + +上面代码中,第一种写法没有大括号,所以不存在块级作用域,而`let`只能出现在当前作用域的顶层,所以报错。第二种写法有大括号,所以块级作用域成立。 + +函数声明也是如此,严格模式下,函数只能声明在当前作用域的顶层。 ```javascript // 不报错 @@ -602,9 +612,9 @@ window.b // undefined 上面代码中,全局变量`a`由`var`命令声明,所以它是顶层对象的属性;全局变量`b`由`let`命令声明,所以它不是顶层对象的属性,返回`undefined`。 -## global 对象 +## globalThis 对象 -ES5 的顶层对象,本身也是一个问题,因为它在各种实现里面是不统一的。 +JavaScript 语言存在一个顶层对象,它提供全局环境(即全局作用域),所有代码都是在这个环境中运行。但是,顶层对象在各种实现里面是不统一的。 - 浏览器里面,顶层对象是`window`,但 Node 和 Web Worker 没有`window`。 - 浏览器和 Web Worker 里面,`self`也指向顶层对象,但是 Node 没有`self`。 @@ -637,27 +647,7 @@ var getGlobal = function () { }; ``` -现在有一个[提案](https://github.com/tc39/proposal-global),在语言标准的层面,引入`global`作为顶层对象。也就是说,在所有环境下,`global`都是存在的,都可以从它拿到顶层对象。 +现在有一个[提案](https://github.com/tc39/proposal-global),在语言标准的层面,引入`globalThis`作为顶层对象。也就是说,任何环境下,`globalThis`都是存在的,都可以从它拿到顶层对象,指向全局环境下的`this`。 -垫片库[`system.global`](https://github.com/ljharb/System.global)模拟了这个提案,可以在所有环境拿到`global`。 +垫片库[`global-this`](https://github.com/ungap/global-this)模拟了这个提案,可以在所有环境拿到`globalThis`。 -```javascript -// CommonJS 的写法 -require('system.global/shim')(); - -// ES6 模块的写法 -import shim from 'system.global/shim'; shim(); -``` - -上面代码可以保证各种环境里面,`global`对象都是存在的。 - -```javascript -// CommonJS 的写法 -var global = require('system.global')(); - -// ES6 模块的写法 -import getGlobal from 'system.global'; -const global = getGlobal(); -``` - -上面代码将顶层对象放入变量`global`。 diff --git a/docs/object-methods.md b/docs/object-methods.md index f04f980..1b901cb 100644 --- a/docs/object-methods.md +++ b/docs/object-methods.md @@ -1,5 +1,7 @@ # 对象的新增方法 +本章介绍 Object 对象的新增方法。 + ## Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(`==`)和严格相等运算符(`===`)。它们都有缺点,前者会自动转换数据类型,后者的`NaN`不等于自身,以及`+0`等于`-0`。JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。 diff --git a/docs/proposals.md b/docs/proposals.md index 3468a14..386a113 100644 --- a/docs/proposals.md +++ b/docs/proposals.md @@ -216,36 +216,6 @@ a?.b = c 为了保证兼容以前的代码,允许`foo?.3:0`被解析成`foo ? .3 : 0`,因此规定如果`?.`后面紧跟一个十进制数字,那么`?.`不再被看成是一个完整的运算符,而会按照三元运算符进行处理,也就是说,那个小数点会归属于后面的十进制数字,形成一个小数。 -## 直接输入 U+2028 和 U+2029 - -JavaScript 字符串允许直接输入字符,以及输入字符的转义形式。举例来说,“中”的 Unicode 码点是 U+4e2d,你可以直接在字符串里面输入这个汉字,也可以输入它的转义形式`\u4e2d`,两者是等价的。 - -```javascript -'中' === '\u4e2d' // true -``` - -但是,JavaScript 规定有5个字符,不能在字符串里面直接使用,只能使用转义形式。 - -- U+005C:反斜杠(reverse solidus) -- U+000D:回车(carriage return) -- U+2028:行分隔符(line separator) -- U+2029:段分隔符(paragraph separator) -- U+000A:换行符(line feed) - -举例来说,字符串里面不能直接包含反斜杠,一定要转义写成`\\`或者`\u005c`。 - -这个规定本身没有问题,麻烦在于 JSON 格式允许字符串里面直接使用 U+2028(行分隔符)和 U+2029(段分隔符)。这样一来,服务器输出的 JSON 被`JSON.parse`解析,就有可能直接报错。 - -JSON 格式已经冻结(RFC 7159),没法修改了。为了消除这个报错,现在有一个[提案](https://github.com/tc39/proposal-json-superset),允许 JavaScript 字符串直接输入 U+2028(行分隔符)和 U+2029(段分隔符)。 - -```javascript -const PS = eval("'\u2029'"); -``` - -根据这个提案,上面的代码不会报错。 - -注意,模板字符串现在就允许直接输入这两个字符。另外,正则表达式依然不允许直接输入这两个字符,这是没有问题的,因为 JSON 本来就不允许直接包含正则表达式。 - ## 函数的部分执行 ### 语法 diff --git a/docs/reference.md b/docs/reference.md index d08968b..1391174 100644 --- a/docs/reference.md +++ b/docs/reference.md @@ -45,6 +45,7 @@ - Nicolas Bevacqua, [ES6 Let, Const and the “Temporal Dead Zone” (TDZ) in Depth](http://ponyfoo.com/articles/es6-let-const-and-temporal-dead-zone-in-depth) - acorn, [Function statements in strict mode](https://github.com/ternjs/acorn/issues/118): 块级作用域对严格模式的函数声明的影响 - Axel Rauschmayer, [ES proposal: global](http://www.2ality.com/2016/09/global.html): 顶层对象`global` +- Mathias Bynens, [A horrifying `globalThis` polyfill in universal JavaScript](https://mathiasbynens.be/notes/globalthis):如何写 globalThis 的垫片库 ## 解构赋值 diff --git a/docs/string-methods.md b/docs/string-methods.md new file mode 100644 index 0000000..07b2938 --- /dev/null +++ b/docs/string-methods.md @@ -0,0 +1,318 @@ +# 字符串的新增方法 + +本章介绍字符串对象的新增方法。 + +## String.fromCodePoint() + +ES5 提供`String.fromCharCode()`方法,用于从 Unicode 码点返回对应字符,但是这个方法不能识别码点大于`0xFFFF`的字符。 + +```javascript +String.fromCharCode(0x20BB7) +// "ஷ" +``` + +上面代码中,`String.fromCharCode()`不能识别大于`0xFFFF`的码点,所以`0x20BB7`就发生了溢出,最高位`2`被舍弃了,最后返回码点`U+0BB7`对应的字符,而不是码点`U+20BB7`对应的字符。 + +ES6 提供了`String.fromCodePoint()`方法,可以识别大于`0xFFFF`的字符,弥补了`String.fromCharCode()`方法的不足。在作用上,正好与下面的`codePointAt()`方法相反。 + +```javascript +String.fromCodePoint(0x20BB7) +// "𠮷" +String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y' +// true +``` + +上面代码中,如果`String.fromCodePoint`方法有多个参数,则它们会被合并成一个字符串返回。 + +注意,`fromCodePoint`方法定义在`String`对象上,而`codePointAt`方法定义在字符串的实例对象上。 + +## String.raw() + +ES6 还为原生的 String 对象,提供了一个`raw()`方法。该方法返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,往往用于模板字符串的处理方法。 + +```javascript +String.raw`Hi\n${2+3}!`; +// 返回 "Hi\\n5!" + +String.raw`Hi\u000A!`; +// 返回 "Hi\\u000A!" +``` + +如果原字符串的斜杠已经转义,那么`String.raw()`会进行再次转义。 + +```javascript +String.raw`Hi\\n` +// 返回 "Hi\\\\n" +``` + +`String.raw()`方法可以作为处理模板字符串的基本方法,它会将所有变量替换,而且对斜杠进行转义,方便下一步作为字符串来使用。 + +`String.raw()`方法也可以作为正常的函数使用。这时,它的第一个参数,应该是一个具有`raw`属性的对象,且`raw`属性的值应该是一个数组。 + +```javascript +String.raw({ raw: 'test' }, 0, 1, 2); +// 't0e1s2t' + +// 等同于 +String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2); +``` + +作为函数,`String.raw()`的代码实现基本如下。 + +```javascript +String.raw = function (strings, ...values) { + let output = ''; + let index; + for (index = 0; index < values.length; index++) { + output += strings.raw[index] + values[index]; + } + + output += strings.raw[index] + return output; +} +``` + +## 实例方法:codePointAt() + +JavaScript 内部,字符以 UTF-16 的格式储存,每个字符固定为`2`个字节。对于那些需要`4`个字节储存的字符(Unicode 码点大于`0xFFFF`的字符),JavaScript 会认为它们是两个字符。 + +```javascript +var s = "𠮷"; + +s.length // 2 +s.charAt(0) // '' +s.charAt(1) // '' +s.charCodeAt(0) // 55362 +s.charCodeAt(1) // 57271 +``` + +上面代码中,汉字“𠮷”(注意,这个字不是“吉祥”的“吉”)的码点是`0x20BB7`,UTF-16 编码为`0xD842 0xDFB7`(十进制为`55362 57271`),需要`4`个字节储存。对于这种`4`个字节的字符,JavaScript 不能正确处理,字符串长度会误判为`2`,而且`charAt()`方法无法读取整个字符,`charCodeAt()`方法只能分别返回前两个字节和后两个字节的值。 + +ES6 提供了`codePointAt()`方法,能够正确处理 4 个字节储存的字符,返回一个字符的码点。 + +```javascript +let s = '𠮷a'; + +s.codePointAt(0) // 134071 +s.codePointAt(1) // 57271 + +s.codePointAt(2) // 97 +``` + +`codePointAt()`方法的参数,是字符在字符串中的位置(从 0 开始)。上面代码中,JavaScript 将“𠮷a”视为三个字符,codePointAt 方法在第一个字符上,正确地识别了“𠮷”,返回了它的十进制码点 134071(即十六进制的`20BB7`)。在第二个字符(即“𠮷”的后两个字节)和第三个字符“a”上,`codePointAt()`方法的结果与`charCodeAt()`方法相同。 + +总之,`codePointAt()`方法会正确返回 32 位的 UTF-16 字符的码点。对于那些两个字节储存的常规字符,它的返回结果与`charCodeAt()`方法相同。 + +`codePointAt()`方法返回的是码点的十进制值,如果想要十六进制的值,可以使用`toString()`方法转换一下。 + +```javascript +let s = '𠮷a'; + +s.codePointAt(0).toString(16) // "20bb7" +s.codePointAt(2).toString(16) // "61" +``` + +你可能注意到了,`codePointAt()`方法的参数,仍然是不正确的。比如,上面代码中,字符`a`在字符串`s`的正确位置序号应该是 1,但是必须向`codePointAt()`方法传入 2。解决这个问题的一个办法是使用`for...of`循环,因为它会正确识别 32 位的 UTF-16 字符。 + +```javascript +let s = '𠮷a'; +for (let ch of s) { + console.log(ch.codePointAt(0).toString(16)); +} +// 20bb7 +// 61 +``` + +`codePointAt()`方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。 + +```javascript +function is32Bit(c) { + return c.codePointAt(0) > 0xFFFF; +} + +is32Bit("𠮷") // true +is32Bit("a") // false +``` + +## 实例方法:normalize() + +许多欧洲语言有语调符号和重音符号。为了表示它们,Unicode 提供了两种方法。一种是直接提供带重音符号的字符,比如`Ǒ`(\u01D1)。另一种是提供合成符号(combining character),即原字符与重音符号的合成,两个字符合成一个字符,比如`O`(\u004F)和`ˇ`(\u030C)合成`Ǒ`(\u004F\u030C)。 + +这两种表示方法,在视觉和语义上都等价,但是 JavaScript 不能识别。 + +```javascript +'\u01D1'==='\u004F\u030C' //false + +'\u01D1'.length // 1 +'\u004F\u030C'.length // 2 +``` + +上面代码表示,JavaScript 将合成字符视为两个字符,导致两种表示方法不相等。 + +ES6 提供字符串实例的`normalize()`方法,用来将字符的不同表示方法统一为同样的形式,这称为 Unicode 正规化。 + +```javascript +'\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),即在兼容等价的前提下,返回合成字符分解的多个简单字符。 + +```javascript +'\u004F\u030C'.normalize('NFC').length // 1 +'\u004F\u030C'.normalize('NFD').length // 2 +``` + +上面代码表示,`NFC`参数返回字符的合成形式,`NFD`参数返回字符的分解形式。 + +不过,`normalize`方法目前不能识别三个或三个以上字符的合成。这种情况下,还是只能使用正则表达式,通过 Unicode 编号区间判断。 + +## 实例方法:includes(), startsWith(), endsWith() + +传统上,JavaScript 只有`indexOf`方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。 + +- **includes()**:返回布尔值,表示是否找到了参数字符串。 +- **startsWith()**:返回布尔值,表示参数字符串是否在原字符串的头部。 +- **endsWith()**:返回布尔值,表示参数字符串是否在原字符串的尾部。 + +```javascript +let s = 'Hello world!'; + +s.startsWith('Hello') // true +s.endsWith('!') // true +s.includes('o') // true +``` + +这三个方法都支持第二个参数,表示开始搜索的位置。 + +```javascript +let s = 'Hello world!'; + +s.startsWith('world', 6) // true +s.endsWith('Hello', 5) // true +s.includes('Hello', 6) // false +``` + +上面代码表示,使用第二个参数`n`时,`endsWith`的行为与其他两个方法有所不同。它针对前`n`个字符,而其他两个方法针对从第`n`个位置直到字符串结束。 + +## 实例方法:repeat() + +`repeat`方法返回一个新字符串,表示将原字符串重复`n`次。 + +```javascript +'x'.repeat(3) // "xxx" +'hello'.repeat(2) // "hellohello" +'na'.repeat(0) // "" +``` + +参数如果是小数,会被取整。 + +```javascript +'na'.repeat(2.9) // "nana" +``` + +如果`repeat`的参数是负数或者`Infinity`,会报错。 + +```javascript +'na'.repeat(Infinity) +// RangeError +'na'.repeat(-1) +// RangeError +``` + +但是,如果参数是 0 到-1 之间的小数,则等同于 0,这是因为会先进行取整运算。0 到-1 之间的小数,取整以后等于`-0`,`repeat`视同为 0。 + +```javascript +'na'.repeat(-0.9) // "" +``` + +参数`NaN`等同于 0。 + +```javascript +'na'.repeat(NaN) // "" +``` + +如果`repeat`的参数是字符串,则会先转换成数字。 + +```javascript +'na'.repeat('na') // "" +'na'.repeat('3') // "nanana" +``` + +## 实例方法:padStart(),padEnd() + +ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。`padStart()`用于头部补全,`padEnd()`用于尾部补全。 + +```javascript +'x'.padStart(5, 'ab') // 'ababx' +'x'.padStart(4, 'ab') // 'abax' + +'x'.padEnd(5, 'ab') // 'xabab' +'x'.padEnd(4, 'ab') // 'xaba' +``` + +上面代码中,`padStart()`和`padEnd()`一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。 + +如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。 + +```javascript +'xxx'.padStart(2, 'ab') // 'xxx' +'xxx'.padEnd(2, 'ab') // 'xxx' +``` + +如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。 + +```javascript +'abc'.padStart(10, '0123456789') +// '0123456abc' +``` + +如果省略第二个参数,默认使用空格补全长度。 + +```javascript +'x'.padStart(4) // ' x' +'x'.padEnd(4) // 'x ' +``` + +`padStart()`的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。 + +```javascript +'1'.padStart(10, '0') // "0000000001" +'12'.padStart(10, '0') // "0000000012" +'123456'.padStart(10, '0') // "0000123456" +``` + +另一个用途是提示字符串格式。 + +```javascript +'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12" +'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12" +``` + +## 实例方法:trimStart(),trimEnd() + +[ES2019](https://github.com/tc39/proposal-string-left-right-trim) 对字符串实例新增了`trimStart()`和`trimEnd()`这两个方法。它们的行为与`trim()`一致,`trimStart()`消除字符串头部的空格,`trimEnd()`消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。 + +```javascript +const s = ' abc '; + +s.trim() // "abc" +s.trimStart() // "abc " +s.trimEnd() // " abc" +``` + +上面代码中,`trimStart()`只消除头部的空格,保留尾部的空格。`trimEnd()`也是类似行为。 + +除了空格键,这两个方法对字符串头部(或尾部)的 tab 键、换行符等不可见的空白符号也有效。 + +浏览器还部署了额外的两个方法,`trimLeft()`是`trimStart()`的别名,`trimRight()`是`trimEnd()`的别名。 + +## 实例方法:matchAll() + +`matchAll()`方法返回一个正则表达式在当前字符串的所有匹配,详见《正则的扩展》的一章。 + diff --git a/docs/string.md b/docs/string.md index 4359949..0806a43 100644 --- a/docs/string.md +++ b/docs/string.md @@ -1,10 +1,10 @@ # 字符串的扩展 -ES6 加强了对 Unicode 的支持,并且扩展了字符串对象。 +本章介绍 ES6 对字符串的改造和增强,下一章介绍字符串对象的新增方法。 ## 字符的 Unicode 表示法 -JavaScript 允许采用`\uxxxx`形式表示一个字符,其中`xxxx`表示字符的 Unicode 码点。 +ES6 加强了对 Unicode 的支持,允许采用`\uxxxx`形式表示一个字符,其中`xxxx`表示字符的 Unicode 码点。 ```javascript "\u0061" @@ -51,92 +51,6 @@ hell\u{6F} // 123 '\u{7A}' === 'z' // true ``` -## codePointAt() - -JavaScript 内部,字符以 UTF-16 的格式储存,每个字符固定为`2`个字节。对于那些需要`4`个字节储存的字符(Unicode 码点大于`0xFFFF`的字符),JavaScript 会认为它们是两个字符。 - -```javascript -var s = "𠮷"; - -s.length // 2 -s.charAt(0) // '' -s.charAt(1) // '' -s.charCodeAt(0) // 55362 -s.charCodeAt(1) // 57271 -``` - -上面代码中,汉字“𠮷”(注意,这个字不是“吉祥”的“吉”)的码点是`0x20BB7`,UTF-16 编码为`0xD842 0xDFB7`(十进制为`55362 57271`),需要`4`个字节储存。对于这种`4`个字节的字符,JavaScript 不能正确处理,字符串长度会误判为`2`,而且`charAt`方法无法读取整个字符,`charCodeAt`方法只能分别返回前两个字节和后两个字节的值。 - -ES6 提供了`codePointAt`方法,能够正确处理 4 个字节储存的字符,返回一个字符的码点。 - -```javascript -let s = '𠮷a'; - -s.codePointAt(0) // 134071 -s.codePointAt(1) // 57271 - -s.codePointAt(2) // 97 -``` - -`codePointAt`方法的参数,是字符在字符串中的位置(从 0 开始)。上面代码中,JavaScript 将“𠮷a”视为三个字符,codePointAt 方法在第一个字符上,正确地识别了“𠮷”,返回了它的十进制码点 134071(即十六进制的`20BB7`)。在第二个字符(即“𠮷”的后两个字节)和第三个字符“a”上,`codePointAt`方法的结果与`charCodeAt`方法相同。 - -总之,`codePointAt`方法会正确返回 32 位的 UTF-16 字符的码点。对于那些两个字节储存的常规字符,它的返回结果与`charCodeAt`方法相同。 - -`codePointAt`方法返回的是码点的十进制值,如果想要十六进制的值,可以使用`toString`方法转换一下。 - -```javascript -let s = '𠮷a'; - -s.codePointAt(0).toString(16) // "20bb7" -s.codePointAt(2).toString(16) // "61" -``` - -你可能注意到了,`codePointAt`方法的参数,仍然是不正确的。比如,上面代码中,字符`a`在字符串`s`的正确位置序号应该是 1,但是必须向`codePointAt`方法传入 2。解决这个问题的一个办法是使用`for...of`循环,因为它会正确识别 32 位的 UTF-16 字符。 - -```javascript -let s = '𠮷a'; -for (let ch of s) { - console.log(ch.codePointAt(0).toString(16)); -} -// 20bb7 -// 61 -``` - -`codePointAt`方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。 - -```javascript -function is32Bit(c) { - return c.codePointAt(0) > 0xFFFF; -} - -is32Bit("𠮷") // true -is32Bit("a") // false -``` - -## String.fromCodePoint() - -ES5 提供`String.fromCharCode`方法,用于从码点返回对应字符,但是这个方法不能识别 32 位的 UTF-16 字符(Unicode 编号大于`0xFFFF`)。 - -```javascript -String.fromCharCode(0x20BB7) -// "ஷ" -``` - -上面代码中,`String.fromCharCode`不能识别大于`0xFFFF`的码点,所以`0x20BB7`就发生了溢出,最高位`2`被舍弃了,最后返回码点`U+0BB7`对应的字符,而不是码点`U+20BB7`对应的字符。 - -ES6 提供了`String.fromCodePoint`方法,可以识别大于`0xFFFF`的字符,弥补了`String.fromCharCode`方法的不足。在作用上,正好与`codePointAt`方法相反。 - -```javascript -String.fromCodePoint(0x20BB7) -// "𠮷" -String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y' -// true -``` - -上面代码中,如果`String.fromCodePoint`方法有多个参数,则它们会被合并成一个字符串返回。 - -注意,`fromCodePoint`方法定义在`String`对象上,而`codePointAt`方法定义在字符串的实例对象上。 - ## 字符串的遍历器接口 ES6 为字符串添加了遍历器接口(详见《Iterator》一章),使得字符串可以被`for...of`循环遍历。 @@ -169,170 +83,60 @@ for (let i of text) { 上面代码中,字符串`text`只有一个字符,但是`for`循环会认为它包含两个字符(都不可打印),而`for...of`循环会正确识别出这一个字符。 -## normalize() +## 直接输入 U+2028 和 U+2029 -许多欧洲语言有语调符号和重音符号。为了表示它们,Unicode 提供了两种方法。一种是直接提供带重音符号的字符,比如`Ǒ`(\u01D1)。另一种是提供合成符号(combining character),即原字符与重音符号的合成,两个字符合成一个字符,比如`O`(\u004F)和`ˇ`(\u030C)合成`Ǒ`(\u004F\u030C)。 - -这两种表示方法,在视觉和语义上都等价,但是 JavaScript 不能识别。 +JavaScript 字符串允许直接输入字符,以及输入字符的转义形式。举例来说,“中”的 Unicode 码点是 U+4e2d,你可以直接在字符串里面输入这个汉字,也可以输入它的转义形式`\u4e2d`,两者是等价的。 ```javascript -'\u01D1'==='\u004F\u030C' //false - -'\u01D1'.length // 1 -'\u004F\u030C'.length // 2 +'中' === '\u4e2d' // true ``` -上面代码表示,JavaScript 将合成字符视为两个字符,导致两种表示方法不相等。 +但是,JavaScript 规定有5个字符,不能在字符串里面直接使用,只能使用转义形式。 -ES6 提供字符串实例的`normalize()`方法,用来将字符的不同表示方法统一为同样的形式,这称为 Unicode 正规化。 +- U+005C:反斜杠(reverse solidus) +- U+000D:回车(carriage return) +- U+2028:行分隔符(line separator) +- U+2029:段分隔符(paragraph separator) +- U+000A:换行符(line feed) + +举例来说,字符串里面不能直接包含反斜杠,一定要转义写成`\\`或者`\u005c`。 + +这个规定本身没有问题,麻烦在于 JSON 格式允许字符串里面直接使用 U+2028(行分隔符)和 U+2029(段分隔符)。这样一来,服务器输出的 JSON 被`JSON.parse`解析,就有可能直接报错。 ```javascript -'\u01D1'.normalize() === '\u004F\u030C'.normalize() -// true +const json = '"\u2028"'; +JSON.parse(json); // 可能报错 ``` -`normalize`方法可以接受一个参数来指定`normalize`的方式,参数的四个可选值如下。 - -- `NFC`,默认参数,表示“标准等价合成”(Normalization Form Canonical Composition),返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价。 -- `NFD`,表示“标准等价分解”(Normalization Form Canonical Decomposition),即在标准等价的前提下,返回合成字符分解的多个简单字符。 -- `NFKC`,表示“兼容等价合成”(Normalization Form Compatibility Composition),返回合成字符。所谓“兼容等价”指的是语义上存在等价,但视觉上不等价,比如“囍”和“喜喜”。(这只是用来举例,`normalize`方法不能识别中文。) -- `NFKD`,表示“兼容等价分解”(Normalization Form Compatibility Decomposition),即在兼容等价的前提下,返回合成字符分解的多个简单字符。 +JSON 格式已经冻结(RFC 7159),没法修改了。为了消除这个报错,[ES2019](https://github.com/tc39/proposal-json-superset) 允许 JavaScript 字符串直接输入 U+2028(行分隔符)和 U+2029(段分隔符)。 ```javascript -'\u004F\u030C'.normalize('NFC').length // 1 -'\u004F\u030C'.normalize('NFD').length // 2 +const PS = eval("'\u2029'"); ``` -上面代码表示,`NFC`参数返回字符的合成形式,`NFD`参数返回字符的分解形式。 +根据这个提案,上面的代码不会报错。 -不过,`normalize`方法目前不能识别三个或三个以上字符的合成。这种情况下,还是只能使用正则表达式,通过 Unicode 编号区间判断。 +注意,模板字符串现在就允许直接输入这两个字符。另外,正则表达式依然不允许直接输入这两个字符,这是没有问题的,因为 JSON 本来就不允许直接包含正则表达式。 -## includes(), startsWith(), endsWith() +## JSON.stringify() 的改造 -传统上,JavaScript 只有`indexOf`方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。 +根据标准,JSON 数据必须是 UTF-8 编码。但是,现在的`JSON.stringify()`方法有可能返回不符合 UTF-8 标准的字符串。 -- **includes()**:返回布尔值,表示是否找到了参数字符串。 -- **startsWith()**:返回布尔值,表示参数字符串是否在原字符串的头部。 -- **endsWith()**:返回布尔值,表示参数字符串是否在原字符串的尾部。 +具体来说,UTF-8 标准规定,`0xD800`到`0xDFFF`之间的码点,不能单独使用,必须配对使用。比如,`\uD834\uDF06`是两个码点,但是必须放在一起配对使用,代表字符`𝌆`。这是为了表示码点大于`0xFFFF`的字符的一种变通方法。单独使用`\uD834`和`\uDFO6`这两个码点是不合法的,或者颠倒顺序也不行,因为`\uDF06\uD834`并没有对应的字符。 + +`JSON.stringify()`的问题在于,它可能返回`0xD800`到`0xDFFF`之间的单个码点。 ```javascript -let s = 'Hello world!'; - -s.startsWith('Hello') // true -s.endsWith('!') // true -s.includes('o') // true +JSON.stringify('\u{D834}') // "\u{D834}" ``` -这三个方法都支持第二个参数,表示开始搜索的位置。 +为了确保返回的是合法的 UTF-8 字符,[ES2019](https://github.com/tc39/proposal-well-formed-stringify) 改变了`JSON.stringify()`的行为。如果遇到`0xD800`到`0xDFFF`之间的单个码点,或者不存在的配对形式,它会返回转义字符串,留给应用自己决定下一步的处理。 ```javascript -let s = 'Hello world!'; - -s.startsWith('world', 6) // true -s.endsWith('Hello', 5) // true -s.includes('Hello', 6) // false +JSON.stringify('\u{D834}') // ""\\uD834"" +JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834"" ``` -上面代码表示,使用第二个参数`n`时,`endsWith`的行为与其他两个方法有所不同。它针对前`n`个字符,而其他两个方法针对从第`n`个位置直到字符串结束。 - -## repeat() - -`repeat`方法返回一个新字符串,表示将原字符串重复`n`次。 - -```javascript -'x'.repeat(3) // "xxx" -'hello'.repeat(2) // "hellohello" -'na'.repeat(0) // "" -``` - -参数如果是小数,会被取整。 - -```javascript -'na'.repeat(2.9) // "nana" -``` - -如果`repeat`的参数是负数或者`Infinity`,会报错。 - -```javascript -'na'.repeat(Infinity) -// RangeError -'na'.repeat(-1) -// RangeError -``` - -但是,如果参数是 0 到-1 之间的小数,则等同于 0,这是因为会先进行取整运算。0 到-1 之间的小数,取整以后等于`-0`,`repeat`视同为 0。 - -```javascript -'na'.repeat(-0.9) // "" -``` - -参数`NaN`等同于 0。 - -```javascript -'na'.repeat(NaN) // "" -``` - -如果`repeat`的参数是字符串,则会先转换成数字。 - -```javascript -'na'.repeat('na') // "" -'na'.repeat('3') // "nanana" -``` - -## padStart(),padEnd() - -ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。`padStart()`用于头部补全,`padEnd()`用于尾部补全。 - -```javascript -'x'.padStart(5, 'ab') // 'ababx' -'x'.padStart(4, 'ab') // 'abax' - -'x'.padEnd(5, 'ab') // 'xabab' -'x'.padEnd(4, 'ab') // 'xaba' -``` - -上面代码中,`padStart()`和`padEnd()`一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。 - -如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。 - -```javascript -'xxx'.padStart(2, 'ab') // 'xxx' -'xxx'.padEnd(2, 'ab') // 'xxx' -``` - -如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。 - -```javascript -'abc'.padStart(10, '0123456789') -// '0123456abc' -``` - -如果省略第二个参数,默认使用空格补全长度。 - -```javascript -'x'.padStart(4) // ' x' -'x'.padEnd(4) // 'x ' -``` - -`padStart()`的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。 - -```javascript -'1'.padStart(10, '0') // "0000000001" -'12'.padStart(10, '0') // "0000000012" -'123456'.padStart(10, '0') // "0000123456" -``` - -另一个用途是提示字符串格式。 - -```javascript -'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12" -'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12" -``` - -## matchAll() - -`matchAll`方法返回一个正则表达式在当前字符串的所有匹配,详见《正则的扩展》的一章。 - ## 模板字符串 传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法)。 @@ -836,54 +640,6 @@ function tag(strings) { 上面代码中,`tag`函数的第一个参数`strings`,有一个`raw`属性,也指向一个数组。该数组的成员与`strings`数组完全一致。比如,`strings`数组是`["First line\nSecond line"]`,那么`strings.raw`数组就是`["First line\\nSecond line"]`。两者唯一的区别,就是字符串里面的斜杠都被转义了。比如,strings.raw 数组会将`\n`视为`\\`和`n`两个字符,而不是换行符。这是为了方便取得转义之前的原始模板而设计的。 -## String.raw() - -ES6 还为原生的 String 对象,提供了一个`raw`方法。 - -`String.raw`方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。 - -```javascript -String.raw`Hi\n${2+3}!`; -// 返回 "Hi\\n5!" - -String.raw`Hi\u000A!`; -// 返回 "Hi\\u000A!" -``` - -如果原字符串的斜杠已经转义,那么`String.raw`会进行再次转义。 - -```javascript -String.raw`Hi\\n` -// 返回 "Hi\\\\n" -``` - -`String.raw`方法可以作为处理模板字符串的基本方法,它会将所有变量替换,而且对斜杠进行转义,方便下一步作为字符串来使用。 - -`String.raw`方法也可以作为正常的函数使用。这时,它的第一个参数,应该是一个具有`raw`属性的对象,且`raw`属性的值应该是一个数组。 - -```javascript -String.raw({ raw: 'test' }, 0, 1, 2); -// 't0e1s2t' - -// 等同于 -String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2); -``` - -作为函数,`String.raw`的代码实现基本如下。 - -```javascript -String.raw = function (strings, ...values) { - let output = ''; - let index; - for (index = 0; index < values.length; index++) { - output += strings.raw[index] + values[index]; - } - - output += strings.raw[index] - return output; -} -``` - ## 模板字符串的限制 前面提到标签模板里面,可以内嵌其他语言。但是,模板字符串默认会将字符串转义,导致无法嵌入其他语言。 diff --git a/docs/symbol.md b/docs/symbol.md index f86005b..e74e7f9 100644 --- a/docs/symbol.md +++ b/docs/symbol.md @@ -99,6 +99,33 @@ Number(sym) // TypeError sym + 2 // TypeError ``` +## Symbol.prototype.description + +创建 Symbol 的时候,可以添加一个描述。 + +```javascript +const sym = Symbol('foo'); +``` + +上面代码中,`sym`的描述就是字符串`foo`。 + +但是,读取这个描述需要将 Symbol 显式转为字符串,即下面的写法。 + +```javascript +const sym = Symbol('foo'); + +String(sym) // "Symbol(foo)" +sym.toString // "Symbol(foo)" +``` + +上面的用法不是很方便。[ES2019](https://github.com/tc39/proposal-Symbol-description) 提供了一个实例属性`description`,直接返回 Symbol 的描述。 + +```javascript +const sym = Symbol('foo'); + +sym.description // "foo" +``` + ## 作为属性名的 Symbol 由于每一个 Symbol 值都是不相等的,这意味着 Symbol 值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。 diff --git a/sidebar.md b/sidebar.md index baf3210..ce32f80 100644 --- a/sidebar.md +++ b/sidebar.md @@ -10,6 +10,7 @@ 1. [let 和 const 命令](#docs/let) 1. [变量的解构赋值](#docs/destructuring) 1. [字符串的扩展](#docs/string) +1. [字符串的新增方法](#docs/string-methods) 1. [正则的扩展](#docs/regex) 1. [数值的扩展](#docs/number) 1. [函数的扩展](#docs/function)