NPM 包 `babel-plugin-syntax-numeric-separator` 使用教程

在 Javascript 中，数字常常用作一种基本的数据类型。在 ES2021 中，引入了一个新的特性-数字分隔符，可以使数字更容易理解并使代码更易读。然而，并不是所有流行的浏览器都支持这一特性，因此使用 babel-plugin-syntax-numeric-separator 这个 NPM 包可以使你的代码更加现代化且更易读。

安装

在安装 babel-plugin-syntax-numeric-separator 前，你首先需要确认以下项目是否已经安装：

• Node.js
• npm 或者 yarn（第三方包管理器）

安装 babel-plugin-syntax-numeric-separator：

使用 npm：

npm install --save-dev babel-plugin-syntax-numeric-separator

使用 yarn：

yarn add --dev babel-plugin-syntax-numeric-separator

记得在安装过程中添加 —save-dev 或 --dev。

配置

在你的 Babel 配置文件 .babelrc 中，添加 babel-plugin-syntax-numeric-separator：

{
  "plugins": ["syntax-numeric-separator"]
}

注意：babel-plugin-syntax-numeric-separator 需要被添加到 plugins 数组的开头，以防止与其他插件发生冲突。

假设现在你有以下代码：

let num = 10000000;

添加该插件后，你可以使用下面的语法重新修改代码：

let num = 10_000_000;

相比于前者看起来更加美观，不是吗？

示例代码

下面是一个完整的示例代码，在代码中，数值分隔符用以使数字更容易被理解。

let budget = 1_000_000_000_000_000;

for (let i = 2; i <= budget; i = i * i) {
  console.log(`i=${i}`);
}

在使用 ES2021 之前，上述代码估计看起来像：

let budget = 1000000000000000;

for (let i = 2; i <= budget; i = i * i) {
  console.log(`i=${i}`);
}

结论

babel-plugin-syntax-numeric-separator 是一个非常容易使用的 NPM 包，可以使你的代码更加现代化，并更易读。特别是当你需要处理一组更大的整数数据，而又难以看清时，使用数字分隔符特别有用。务必在你的下一个项目中试试这个 NPM 包！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f981e8991b448e0c79