文章目录
1、引言
在目前的项目中,经常需要给数字做格式化处理,特别是财务方面,比如
分割成千分位,保留小数,增加符号等
,这些都需要我们手写一些函数
来处理。但阅读文章的时候发现了,
Number.prototype.toLocaleString
2、语法参数
语法
js
toLocaleString()
toLocaleString(locales)
toLocaleString(locales, options)
locales 和 options 参数让应用程序可以指定要进行格式转换的语言,并且定制函数的行为。
参数
locales
:可选参数
缩写语言代码(BCP 47 language tag
)的字符串或者这些字符串组成的数组。与 Intl.NumberFormat() 构造函数的 locales (en-US) 参数相同。如果是 undefined的话会使用运行时默认的 locale
options
:可选参数
调整输出格式的对象。与 Intl.NumberFormat() 构造函数的 options (en-US) 参数相同。在无 Intl.NumberFormat 支持的实现中,这个参数是被忽略的。
借用chat gpt
js
BCP 47(BCP:Best Current Practice)是一种标准,用于标识语言标签,以指示特定语言环境的语言和区域设置。BCP 47 语言标签由多个组件组成,可以用来准确地描述一个语言环境。一个基本的 BCP 47 语言标签由两个主要组件组成:语言代码和地区代码。
语言代码通常是 ISO 639 标准定义的两个或三个字母的代码,代表一个语言,例如:
英语:en
中文:zh
西班牙语:es
日语:ja
阿拉伯语:ar
地区代码通常是 ISO 3166 标准定义的两个字母的国家/地区代码,用于指定语言使用的地理区域,例如:
美国:US
中国:CN
英国:GB
法国:FR
日本:JP
BCP 47 语言标签可以通过连接语言代码和地区代码来表示完整的语言环境。例如:
美国英语:en-US
中国中文:zh-CN
西班牙西班牙语:es-ES
日本日语:ja-JP
js
options(可选):一个对象,用于指定格式化选项,比如数字的显示方式、货币符号等。它可以包含以下属性:
localeMatcher:用于选择区域设置的算法,默认值为 "best fit"。
style:指定格式化的类型,可以是 "decimal"(十进制)、"percent"(百分比)、"currency"(货币)或 "unit"(单位)。默认值为 "decimal"。
unit:指定货币类型。
currency:指定货币格式化时要使用的货币代码。
currencyDisplay:指定货币符号的显示方式,可以是 "symbol"(符号)、"narrowSymbol"(窄符号)、"code"(货币代码)或 "name"(货币名称)。
useGrouping:一个布尔值,表示是否在数字中使用千位分隔符。默认为 true。
minimumIntegerDigits:最小整数位数,不足时使用零填充。
minimumFractionDigits:最小小数位数,不足时使用零填充。
maximumFractionDigits:最大小数位数。
minimumSignificantDigits:最小有效数字位数。
maximumSignificantDigits:最大有效数字位数。
货币类型
acre
: 英亩bit
: 位byte
: 字节celsius
: 摄氏度centimeter
: 厘米day
: 天degree
: 度fahrenheit
: 华氏度fluid-ounce
: 液体盎司foot
: 英尺gallon
: 加仑gigabit
: 千兆位gigabyte
: 千兆字节gram
: 克hectare
: 公顷hour
: 小时inch
: 英寸kilobit
: 千位kilobyte
: 千字节kilogram
: 千克kilometer
: 千米liter
: 升meter
: 米mile
: 英里millimeter
: 毫米millisecond
: 毫秒minute
: 分钟month
: 月ounce
: 盎司percent
: 百分比petabyte
: 拍字节pound
: 磅second
: 秒stone
: 英石terabit
: 太位terabyte
: 太字节week
: 周yard
: 码year
: 年
3、常见案例
基本使用
js
const number = 123456.65491;
console.log(number.toLocaleString());// 123,456.654
// 取消 分隔符
console.log(number.toLocaleString(undefined, { useGrouping: false }));// 123456.655
console.log(number.toLocaleString("zh-Hans-CN-u-nu-hanidec"));// 一二三,四五六.六五五
使用style 与 格式化
js
const number = 123456.65491;
/**
* style:指定格式化的类型,可以是 "decimal"(十进制)、"percent"(百分比)、"currency"(货币)或 "unit"(单位)。默认值为 "decimal"。
*/
// 如果 style 为 unit,需要搭配unit 参数使用。
console.log(number.toLocaleString("zh-CN", { style: "unit", unit: "mile" }));// 123,456.655米
console.log(`~~~~`);
console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "EUR" }));// €123,456.65
console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "CNY" }));// ¥123,456.65
console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "USD" }));// US$123,456.65
console.log(`~~~~`);
console.log(number.toLocaleString("en-US", { style: "currency", currency: "EUR" }));// €123,456.65
console.log(number.toLocaleString("en-US", { style: "currency", currency: "CNY" }));// CN¥123,456.65
console.log(number.toLocaleString("en-US", { style: "currency", currency: "USD" }));// $123,456.65
设置货币显示方式
js
/**
* "symbol":使用货币符号来表示货币单位,例如 "$" 表示美元。
* "narrowSymbol":使用窄格式的货币符号来表示货币单位,通常是一个简化的符号。
* "code":使用国际标准化的货币代码来表示货币单位,例如 "USD" 表示美元。
* "name":使用货币的全名来表示货币单位,例如 "美元" 表示美元。
*/
console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "EUR", currencyDisplay: 'symbol' }));// €123,456.65
console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "CNY", currencyDisplay: 'narrowSymbol' }));// ¥123,456.65
console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "USD", currencyDisplay: 'code' }));// USD 123,456.65
console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "CNY", currencyDisplay: 'name' }));// 123,456.65人民币
console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "USD", currencyDisplay: 'name' }));// 123,456.65美元
其他操作
js
console.log(`~~~~ maximumFractionDigits minimumFractionDigits`);
const number2 = 12345.4
// 设置 小数点后面的 最大个数和最小个数
// 不够最小位数的话,会补零
console.log(12345.4.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 }));// 12,345.40
console.log(12345.1234567.toLocaleString(undefined, { maximumFractionDigits: 6, minimumFractionDigits: 4 }));// 12,345.123457
console.log(`~~~~ maximumSignificantDigits minimumSignificantDigits`);
// 这俩属性据chatgpt 说常用于 科学计数法、货币格式化、数据可视化
const number3 = 12345.4
console.log(number3.toLocaleString(undefined, { maximumSignificantDigits: 2, minimumSignificantDigits: 2 }));// 12,000
console.log(number3.toLocaleString(undefined, { minimumSignificantDigits: 2, maximumSignificantDigits: 4, }));// 12,350
// minimumIntegerDigits
// 最小整数位数,不足时使用零填充
console.log('~~~minimumIntegerDigits');
console.log(1234.34.toLocaleString(undefined, { minimumIntegerDigits: 6 })); // 001,234.34
console.log(1234.34.toLocaleString(undefined, { minimumIntegerDigits: 3 })); // 1,234.34 , 这个数值 整数位是4个,满足最小这个,所以不会改变
console.log(12.34.toLocaleString(undefined, { minimumIntegerDigits: 3 })); // 012.34
MDN 案例
js
// MDN 其他案例
const number = 123456.789;
// 德国使用逗号作为小数分隔符,分位周期为千位
console.log(number.toLocaleString("de-DE"));
// → 123.456,789
// 在大多数阿拉伯语国家使用阿拉伯语数字
console.log(number.toLocaleString("ar-EG"));
// → ١٢٣٤٥٦٫٧٨٩
// 印度使用千位/拉克(十万)/克若尔(千万)分隔
console.log(number.toLocaleString("en-IN"));
// → 1,23,456.789
// nu 扩展字段要求编号系统,e.g. 中文十进制
console.log(number.toLocaleString("zh-Hans-CN-u-nu-hanidec"));
// → 一二三,四五六.七八九
// 当请求不支持的语言时,例如巴厘语,加入一个备用语言,比如印尼语
console.log(number.toLocaleString(["ban", "id"]));
// → 123.456,789