永远不要再使用数字或货币格式化库！

内容

1. 简介
2. 数字格式
3. 货币格式
4. 单位格式
5. 概括

简介

减少前端的依赖总是好事！如果你正在使用数字或货币格式化库，不妨在Bundlephobia
上查看一下，看看它会给你的应用程序增加多少时间和字节数。

所有这些都可以通过新的跨浏览器 API 来实现！Intl.NumberFormat

数字格式

格式化数字很难！添加千位分隔符、小数点等等。
更别提国际化了！有些语言使用逗号分隔符，有些使用点分隔符，而这仅仅是个开始！

输入Intl.NumberFormat。

Intl API 有一些非常有用的方法，但我们将在本博客中重点介绍数字格式。

让我们直接来看一个例子：

const numberFormat = new Intl.NumberFormat('ru-RU');
console.log(numberFormat.format(654321.987));
// → "654 321,987"

这里我们指定了语言环境为俄语，但是如果你在构造函数中不传入语言环境，它会根据用户浏览器自动检测。
这意味着它会根据用户的偏好进行更改，从而根据你的用户进行本地化：

const numberFormat = new Intl.NumberFormat();
console.log(numberFormat.format(654321.987));

现在所有浏览器都支持此功能，包括 Safari！

但我们可以更进一步……

货币格式

我们不仅可以用这种方式格式化数字，还可以支持货币。
这在跨浏览器方面相对较新，所以你的用户使用的 Safari 版本是什么呢？

这对于格式化数字非常有用：

const number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"

它支持我能想到的每一种货币。

请记住，这不会在它们之间进行任何货币转换，只会格式化它们的显示方式。

单位格式

直到查阅这篇博客我才知道这一点。你甚至可以格式化单位！
Safari 尚不支持此功能，所以请再次检查浏览器兼容性。

new Intl.NumberFormat('en-US', {
    style: 'unit', 
    unit: 'liter', 
    unitDisplay: 'long'
}).format(amount);
// → '3,500 liters'

它支持大量的单位，包括速度等等。
它甚至允许你格式化百分比，而我一直觉得这很麻烦。

new Intl.NumberFormat("en-US", {
    style: "percent",
    signDisplay: "exceptZero"
}).format(0.55);
// → '+55%'

概括

Intl.NumberFormat是 Web 开发人员工具库中非常强大的工具！

无需为您的应用程序添加额外的依赖项。使用 Intl API 提升速度和国际支持！

快乐建造！