【日常记录】【JS】使用Number.prototype.toLocaleString 对数字做格式化

文章目录

- 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
日本：JP


BCP 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.655
    console.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.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

设置货币显示方式

    /**
     * "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美元

其他操作

    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 案例

// 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