JavaScript 中的数字格式化
探索 JavaScript 函数的强大功能toLocaleString()。无需任何第三方本地化库,即可格式化数字、货币和单位。
简而言之,该toLocaleString()方法使用本地化格式将数字转换为字符串。默认情况下,它使用 Web 浏览器语言的本地化设置,但您也可以手动指定。
句法
number.toLocaleString(locale, options);
参数
locale(可选)- 如果未提供,则该方法将使用主机环境的当前区域设置(例如:默认浏览器语言)options(可选)- 包含格式化选项的对象
var exampleNumber = 123456.789;
exampleNumber.toLocaleString('pl-PL');
// output: 123.456,789
number.toLocaleString('ar-EG');
// output: ١٢٣٤٥٦٫٧٨٩
限制为两位有效数字
const price = 123456.789;
price.toLocaleString('en-IN', {
maximumSignificantDigits: 2
});
// output: 1,23,000
使用默认语言环境和自定义数字格式
将此选项设为undefined第一个参数,以使用浏览器中设置的默认语言环境。
const price = 30000.65;
price.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
// English output: 30,000.65
// German output: 30.000,65
// French output: 30 000,65
更改格式样式
style 属性可以有 3 个不同的值:
decimal(默认)currencypercentunit
本文将介绍每一种风格。
样式:货币
使用style选项对象中的属性值currency将数字格式化为字符串。
const price = 123456.789;
price.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
// output: 123.456,79 €
price.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
// output: ¥123,457
您可以调整currencyDisplay属性以更改货币格式。可选值包括:
symbol(默认)codename
const price = 123456.789;
price.toLocaleString('de-DE', {
style: 'currency',
currencyDisplay: 'code',
currency: 'EUR'
});
// output: 123.456,79 EUR
price.toLocaleString('ja-JP', {
style: 'currency',
currencyDisplay: 'name',
currency: 'JPY'
});
// output: 123,457円
格式:百分比
在某些语言中,百分比本地化并非易事。
并非所有语言中百分号都位于数字之后。
例如,阿拉伯语就是如此。
const value = 0.767;
value.toLocaleString('pl-PL', { style: 'percent' });
// output: 77%
value.toLocaleString('ar-SA', { style: 'percent' });
// output: ٧٣٪
样式:单位
单位样式是 JavaScript 语言环境功能中最容易被忽视的功能之一。它允许您将
数字格式化为任何常用单位,并根据给定的语言环境进行适当的格式设置。
liter带单位的示例
使用unit选项对象中的属性来设置所需的单位。
const value = 3;
value.toLocaleString('pl-PL', {
style: 'unit',
unit: 'liter'
});
// output: 3 l
您可能还需要调整unitDisplay属性,使其显示完整的单词,而不仅仅是一个字母。
const value = 3;
value.toLocaleString('pl-PL', {
style: 'unit',
unit: 'liter',
unitDisplay: 'long'
});
// output: 3 litry
您将得到的最短版本,其narrow值为unitDisplay.
const value = 3;
value.toLocaleString('pl-PL', {
style: 'unit',
unit: 'liter',
unitDisplay: 'narrow'
});
// output: 3l
JavaScript 数字区域设置单位列表
下面您可以查看该unit属性的所有可能值。
英亩
比特
字节
摄氏度
厘米
天 度
华氏度
液
盎司 英尺
加仑 吉比特 吉
字节克 公顷 小时 英寸 千 比特千 字节千克 公里 升 兆 比特 兆 字节 米 英里 斯堪 的纳维亚 英里 毫升 毫米 毫秒 分钟 月 盎司 百分比 拍 字节 磅 秒 英石太比特 太 字节 周 码 年
每小时公里
per您可以使用关键字组合两个值,例如X-per-Y。例如kilometer-per-hour,
JavaScript 会选择最合适的本地化模式来格式化这个复合单元。
const speed = 50.2137;
speed.toLocaleString('pt-PT', {
style: 'unit',
unit: 'kilometer-per-hour'
});
// output: 50,214 km/h
每克 TB
这个unit属性不需要符合逻辑,它可以接受任何组合。😊
const value = 50.2137;
value.toLocaleString('pl-PL', {
style: 'unit',
unit: 'terabyte-per-gram',
unitDisplay: "long"
});
// output: 50,214 terabajta na gram
