文章目录
- 1、引言
- 2、语法参数
- 3、常见案例
- 4、参考链接
1、引言
在目前的项目中，经常需要给数字做格式化处理，特别是财务方面，比如
分割成千分位，保留小数，增加符号等，这些都需要我们手写一些函数来处理。
但阅读文章的时候发现了，Number.prototype.toLocaleString
2、语法参数
语法
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
BCP 47（BCP：Best Current Practice）是一种标准，用于标识语言标签，以指示特定语言环境的语言和区域设置。BCP 47 语言标签由多个组件组成，可以用来准确地描述一个语言环境。一个基本的 BCP 47 语言标签由两个主要组件组成：语言代码和地区代码。语言代码通常是 ISO 639 标准定义的两个或三个字母的代码，代表一个语言，例如：英语：en
中文：zh
西班牙语：es
日语：ja
阿拉伯语：ar地区代码通常是 ISO 3166 标准定义的两个字母的国家/地区代码，用于指定语言使用的地理区域，例如：美国：US
中国：CN
英国：GB
法国：FR
日本：JPBCP 47 语言标签可以通过连接语言代码和地区代码来表示完整的语言环境。例如：美国英语：en-US
中国中文：zh-CN
西班牙西班牙语：es-ES
日本日语：ja-JP
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、常见案例
基本使用
const number = 123456.65491;console.log(number.toLocaleString());// 123,456.654// 取消 分隔符console.log(number.toLocaleString(undefined, { useGrouping: false }));// 123456.655console.log(number.toLocaleString("zh-Hans-CN-u-nu-hanidec"));// 一二三,四五六.六五五
使用style 与 格式化
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.65console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "CNY" }));// ¥123,456.65console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "USD" }));// US$123,456.65console.log(`~~~~`);console.log(number.toLocaleString("en-US", { style: "currency", currency: "EUR" }));// €123,456.65console.log(number.toLocaleString("en-US", { style: "currency", currency: "CNY" }));// CN¥123,456.65console.log(number.toLocaleString("en-US", { style: "currency", currency: "USD" }));// $123,456.65
设置货币显示方式
/*** "symbol"：使用货币符号来表示货币单位，例如 "$" 表示美元。* "narrowSymbol"：使用窄格式的货币符号来表示货币单位，通常是一个简化的符号。* "code"：使用国际标准化的货币代码来表示货币单位，例如 "USD" 表示美元。* "name"：使用货币的全名来表示货币单位，例如 "美元" 表示美元。*/console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "EUR", currencyDisplay: 'symbol' }));// €123,456.65console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "CNY", currencyDisplay: 'narrowSymbol' }));// ¥123,456.65console.log(number.toLocaleString("zh-CN", { style: "currency", currency: "USD", currencyDisplay: 'code' }));// USD 123,456.65console.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美元
其他操作
console.log(`~~~~ maximumFractionDigits minimumFractionDigits`);const number2 = 12345.4// 设置 小数点后面的 最大个数和最小个数// 不够最小位数的话，会补零console.log(12345.4.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 }));// 12,345.40console.log(12345.1234567.toLocaleString(undefined, { maximumFractionDigits: 6, minimumFractionDigits: 4 }));// 12,345.123457console.log(`~~~~ maximumSignificantDigits minimumSignificantDigits`);// 这俩属性据chatgpt 说常用于 科学计数法、货币格式化、数据可视化const number3 = 12345.4console.log(number3.toLocaleString(undefined, { maximumSignificantDigits: 2, minimumSignificantDigits: 2 }));// 12,000console.log(number3.toLocaleString(undefined, { minimumSignificantDigits: 2, maximumSignificantDigits: 4, }));// 12,350// minimumIntegerDigits// 最小整数位数，不足时使用零填充console.log('~~~minimumIntegerDigits');console.log(1234.34.toLocaleString(undefined, { minimumIntegerDigits: 6 })); // 001,234.34console.log(1234.34.toLocaleString(undefined, { minimumIntegerDigits: 3 })); // 1,234.34 , 这个数值 整数位是4个，满足最小这个，所以不会改变console.log(12.34.toLocaleString(undefined, { minimumIntegerDigits: 3 })); // 012.34
MDN 案例
// 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
4、参考链接
- Intl.NumberFormat() constructor MDN
- Number.prototype.toLocaleString() MDN
