1.4 如何应对 JavaScript 的不同版本 How do we work with JavaScript?

上面介绍的语言特性都很不错，但正如前文提到的那样，适用性最广的 JavaScript 的版本，往往并不是最新的 ES13，而更有可能是早期的 JS5。这当中 Node.js 算个例外。它基于 Chrome 浏览器的 V8 高性能 JavaScript 引擎。该引擎已经实现了多项 ES13 特性。尽管如此，截至目前（2023 年 5 月），V8 引擎对 ES13 特性的覆盖率仍达不到 100%，总会有一些特性缺失（更多 Node.js 和 V8 信息，详见 https://nodejs.org/en/learn/getting-started/ecmascript-2015-es6-and-beyond）。这种情况今后肯定会改变，因为 Internet Explorer 浏览器将逐渐淡出人们的视野（对它的支持已于 2022 年 6 月正式结束），取而代之的，是共享 Chrome 引擎的 Microsoft Edge 浏览器。无论如何，就目前而言，我们仍须同旧的、效率较低的 JS 引擎打交道。

怎样在当前可用的早期版本中尝鲜新的语言特性呢？或者，如果您的大多数用户使用的是旧版浏览器，不支持您推崇备至的那些花哨的特性，该如何是好？让我们来看看一些现成的解决方案。

若要在尝试任何特定的新特性之前进行选择，可以查看 https://compat-table.github.io/compat-table/es6/ 上的兼容性列表（如 图1.1 所示）；查看 Node.js 规范，详见 http://node.green/。

【图 1.1 JavaScript 的最新特性可能无法全面支持，使用前需要检查一下】

1.4.1. 使用转译工具 Using transpilers

为了解决可用性和兼容性的问题，可以使用一些 转译工具（transpilers）。转译器将您的原始 ES10 代码（可能涉及最新的 JavaScript 特性）转换为等效的 JS5 代码。这是一个从源码到源码（source-to-source）的转换，而不是编译过程使用的源码到对象（source-to-object）的方式。编码时可以用高级 ES10 特性，而用户的浏览器接收的是 JS5 代码。尽管浏览器在桌面端和移动端采用新标准尚需时日，转译器可以让您同步到即将发布的语言版本。

关于 transpiler 一词的来历，它是 translate 和 compiler 的结合体。类似的组合在技术领域屡见不鲜：电邮 email（electronic 与 mail 的组合）、表情符号 emoticon（emotion 和 icon 的组合）、恶意软件 malware（malicious 与 software 的组合）以及字母数字 alphanumeric（alphabetic 与 numeric 的组合）……不一而足。

最常见的 JavaScript 转译器是 Babel（详见 https://babeljs.io/）和 Traceur（详见 https://github.com/google/traceur-compiler）。结合 npm 或 webpack 等工具，相关配置十分轻松，可将代码自动转译成终端用户需要的版本。您也可以在线转译，如 图 1.2 所示的 Babel 在线转译环境示例：

【图 1.2 Babel 在线转译器将 ES10 代码转译为兼容的等效 JS5 代码示意图】

如果喜欢 Traceur，可以在 https://google.github.io/traceur-compiler/demo/repl.html# 进行尝试，不过需要在开发者控制台查看转译后的代码结果（图 1.3 为转译后的代码示例）。选中 EXPERIMENTAL 选项来启用 ES10 特性：

【图 1.3 Traceur 转译工具是 ES10 转 JS5 的另一种行之有效的替代方案】

小贴士

了解转译工具也是学习新语言特性的绝佳途径。在左边敲入代码即可在右边得到等效的转译代码。此外，还可以使用命令行工具来转译源代码，对比查看输出的结果。

最后还有一种方案：选用 Microsoft 的 TypeScript（http://www.typescriptlang.org/），而不是 JavaScript。它是 JavaScript 的超集，可以被编译为 JS5 的代码。TypeScript 的主要优点是能够向 JavaScript 选择性地添加静态类型检查，这有助于在编译时检测某些代码问题。注意：与 Babel 或 Traceur 一样，并非所有 ES10 语言特性都支持。

除了 TypeScript，还可以使用 Facebook 的 Flow 进行类型检查（详见 https://flow.org）。

若选用 TypeScript，可以利用其 playground 训练场模块进行线上功能测试（详见 http://www.typescriptlang.org/play/）。TypeScript 可以对类型检查的严格程度进行配置，也可以实时运行代码，如 图 1.4 所示：

【图 1.4 TypeScript 新增的类型检查特性有助于更安全地编写代码】

通过使用 TypeScript，可以规避掉一些常见的类型方面的错误。当下有个积极的趋势，是大多数工具（框架、库等）正在慢慢朝这个方向发展，从而使今后的编码工作越来越轻松。

1.4.2. 应用在线环境 Working online

网上有不少工具可以用来测试 JavaScript 代码，比如 JSFiddle（https://jsfiddle.net/）、CodePen（https://jsbin.com/）等等。您需要设定是否使用 Babel 或 Traceur，否则新语言特性将不生效。如 图 1.5 中的 JSFiddle 示例：

【图 1.5 JSFiddle 可以在无需引入其他工具的情况下试验新的 JavaScript 特性（带 HTML 及 CSS）】

这些工具的应用为我们快速尝试新特性、试验新功能提供了新的途径——这一点我可以保证，因为本书大部分代码就是采用这种方式进行测试的结果！

1.4.3. 测试环境 Testing

本书也会涉及测试方面的知识，毕竟易于测试是函数式编程的主要优点。本书之前的版本用的测试框架为 Jasmine （https://jasmine.github.io/），这一版改用 Facebook 的 Jest（jestjs.io/）框架——一款基于 Jasmine 构建的新测试框架。

Jest 以其卓越的易用性与广泛的适用性而持续受到热捧：无论是前端应用还是后端代码，几乎不需要什么配置就能进行同等效果的测试（更多安装配置详情，可参阅 jestjs.io/docs/getting-started）。本书不会对每一段代码编写测试用例，但遵循 测试驱动开发（test-driven development, 即 TDD） 的观点，大多数情况还是会考虑测试的。