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

文章目录

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

4、参考链接

相关推荐
neter.asia5 分钟前
C# 窗体应用程序嵌套web网页,基于谷歌浏览器内核(含源码)
开发语言·c#
傻小胖7 分钟前
React 脚手架配置代理完整指南
前端·react.js·前端框架
EterNity_TiMe_19 分钟前
【论文复现】农作物病害分类(Web端实现)
前端·人工智能·python·机器学习·分类·数据挖掘
2301_8091774722 分钟前
sqoop,flume草稿
开发语言
潜意识起点38 分钟前
Java数组:静态初始化与动态初始化详解
java·开发语言·python
余生H38 分钟前
深入理解HTML页面加载解析和渲染过程(一)
前端·html·渲染
点云SLAM1 小时前
C++创建文件夹和文件夹下相关操作
开发语言·c++·算法
2301_809177471 小时前
2025.01.15python商业数据分析
开发语言·python
吴敬悦1 小时前
领导:按规范提交代码conventionalcommit
前端·程序员·前端工程化
ganlanA1 小时前
uniapp+vue 前端防多次点击表单,防误触多次请求方法。
前端·vue.js·uni-app