在 JavaScript 中格式化数字

JavaScript 7月前 118

来自不同国家和地区的人们采用不同的方式来格式化数字。在某些情况下，我们可能希望根据访问者访问我们网站的世界哪个部分来格式化我们网站上的数字。

如果你尝试根据用户的位置手动执行此操作，则可能会变得具有挑战性。但是不用担心，你不必手动执行此操作，因为在 JavaScript 中有一种更好的方法来格式化数字，那就是在 toLocalString() 方法的帮助下。此方法返回一个字符串，该字符串具有特定于语言的数字表示形式。

使用 JavaScript 中的 `toLocaleString()` 方法格式化数字

它需要两个参数，第一个是 locales，第二个是 options。这两个参数都是可选的，这意味着它不是强制性的。你也可以直接运行该方法而无需传递这些参数。如果你想格式化数字，在这种情况下，我们这样做，那么我们需要传递这些参数。

让我们首先了解每个参数的含义，然后我们将看到如何在我们的代码中使用它们。

1. `locales` 参数

locales 是 toLocalString() 方法接受的第一个参数。它表示一串 BCP 47 语言标签或一组此类字符串。BCP 47 语言标签是识别人类语言的代码。

例如，标签 ar-SA 表示它用于由 ar 表示的阿拉伯语，在沙特阿拉伯 SA 地区使用。因此，如果你将此字符串作为第一个参数传递，它将格式化数字，使其以阿拉伯语书写。

let eArabic = (number => {
  return number.toLocaleString('ar-SA');
});
console.log(eArabic(12345));

输出：

١٢٬٣٤٥

在这里，我们创建了一个名为 eArabic 的箭头函数，它接受一个数字作为参数。现在，我们将数字 12345 传递给这个箭头函数。此函数旨在借助 toLocalString() 方法将数字 12345 转换为其阿拉伯语等效格式 ar-SA。

你可以直接复制并粘贴上面的整个代码，然后在浏览器的控制台窗口中运行它以查看输出。

要了解有关所有 BCP 47 语言标签的更多信息，你可以查看此资源。

你还可以将 undefined 作为语言环境传递。它将采用访问者浏览器中设置的默认语言。因此，如果有人将浏览器的语言更改为德语，则会以德语格式显示数字。

2. `options` 参数

options 是一个对象，它是 toLocalString() 方法接受的第二个参数。由于它是一个对象，因此该参数可以采用各种属性，例如 currency、currencySign、style、unitDisplay 等等。

让我们以上面采用的相同示例为例，让我们尝试修改它以理解 options 参数。以前，我们只取数字 12345，然后将其格式化为阿拉伯语。现在让我们也给数字一个货币格式，通过给它一个带有货币符号的 currency 样式，并在 options 的帮助下在该数字的末尾添加一些小数位。

let eArabic = (number => {
  return number.toLocaleString('ar-SA', {style: 'currency',currency: 'SAR', minimumFractionDigits: 3});
});
console.log(eArabic(12345));

输出：

١٢٬٣٤٥٫٠٠٠ ر.س

在本例中，对于 toLocaleString() 方法，我们现在还添加了 options 参数，它是一个对象。目前，它需要 3 个属性，style 属性将以货币格式格式化数字，currency 属性将告诉它代表哪种货币，在这种情况下，沙特里亚尔 SAR 和 minimumFractionDigits 属性表示有多少要在数字末尾显示的小数位数。

在这里，如果你将 style 属性设置为货币值，你还必须为属性 currency 设置一些值。否则，你将收到类型错误：Currency code is required with currency style.。

在上述程序的输出中，我们首先有货币名称沙特里亚尔 ر.س.。如果它是美元，那么它将是 $ 符号。然后我们有阿拉伯语 ١٢٬٣٤٥ 的数字本身。如果是美元，那么它将是 12,345。最后，我们在点之后的 3 个小数位在阿拉伯语中表示为 ٫٠٠٠，美元表示为 .000。