在 JavaScript 中格式化数字
来自不同国家和地区的人们采用不同的方式来格式化数字。在某些情况下,我们可能希望根据访问者访问我们网站的世界哪个部分来格式化我们网站上的数字。
如果你尝试根据用户的位置手动执行此操作,则可能会变得具有挑战性。但是不用担心,你不必手动执行此操作,因为在 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
。
// USD format
$12, 345.000
在这里,我们还为你提供美国货币格式的输出,以便将其与沙特阿拉伯货币格式的输出轻松关联,因为人们可能难以理解阿拉伯语言。
你可以在代码中使用任何这些参数和对象属性,具体取决于你希望如何格式化你的数字。你还可以访问本文中提供的各种链接,以了解有关在 JavaScript 中格式化数字的 toLocalString()
的更多信息。
相关文章
在 JavaScript 中跟踪鼠标位置
发布时间:2024/03/16 浏览次数:188 分类:JavaScript
-
在本教程中,我们将了解如何在 JavaScript 中使用鼠标事件跟踪鼠标位置。
在 JavaScript 中将 Base64 转换为图像
发布时间:2024/03/16 浏览次数:77 分类:JavaScript
-
将 Base64 字符串转换为图像的最简单方法是调用启动图像构造函数并将 base64 字符串作为图像源的函数。此解决方案需要最少的代码行和努力来获得更好的结果。此外,还有一些复杂的实
使用 JavaScript 将图像转换为 Base64 字符串
发布时间:2024/03/16 浏览次数:144 分类:JavaScript
-
本文将讨论如何通过创建画布并将图像加载到其中,并使用文件读取器方法获取图像的相应字符串,将图像转换为其 base64 字符串表示。
在 JavaScript 中操作图像
发布时间:2024/03/16 浏览次数:175 分类:JavaScript
-
本文将介绍 JavaScript 中的图像处理功能。我们将使用 CamanJS 这是一个 JavaScript 库来操作图像。
在 JavaScript 中交换图像
发布时间:2024/03/16 浏览次数:134 分类:JavaScript
-
本教程展示了如何使用 JavaScript 简单地交换图像。你将学习如何使用不同的方法交换图像,例如使用 onclick、鼠标单击和按钮单击。
使用 JavaScript 将 SVG 转换为 PNG
发布时间:2024/03/16 浏览次数:121 分类:JavaScript
-
本教程教授如何从 SVG 创建 PNG 图像。我们将使用 Canvg JavaScript 库和 toDataURL 方法。