如何使用intl.numberformat格式化货币
#javascript #i18n #intl

根据用户语言/区域显示格式的货币,在Web开发中并不少见。

使用Intl可以很容易地实现,这是浏览器API的名称空间,并且是 ecmascript国际化API 的一部分。

INTL名称空间对象包含几个构造函数以及国际化构造函数和其他语言敏感功能共有的功能。他们总体而言,它们构成了Ecmascript国际化API,该API提供了语言敏感的字符串比较,数字格式,日期和时间格式等等。 MDN Intl page

代码

这已经准备好使用给定locale格式的currencyamount的代码。这些数据通常取自API或应用程序状态,或者在浏览器API的语言环境中获取。

function formatCurrency(locale,amount,currency){
const formatter = new Intl.NumberFormat(locale,
 {
   style:'currency',
   currency: currency
 });

 return formatter.format(amount);
}

这就是您所需要的。可以在任何框架中使用的简单功能,不需要NPM软件包,没有带有货币符号的字典等。
可以设置其他选项来自定义货币的呈现方式,所有这些选项都很好地描述了on MDN as well。交互式示例也在那里,所以我不会在这里重写它们。

让浏览器担心

即使您的应用程序未本地化或仅使用单一货币,也很方便浏览器担心应该如何显示货币:

  • 什么是货币符号?
  • 应该在金额之前或之后放置符号?
  • 使用空间或逗号分隔数千和十进制分离器。

另一件事是,使用标准化格式确保屏幕读取器和其他辅助技术将正确读取数据。