【日常记录】【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 47BCP: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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/306869.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决cmd输入py文件路径不能执行,使用anaconda prompt 能执行

究其原因,是因为没有配置环境!!!!!!! 第一步:配置环境变量 操作步骤如下: 1、右击此电脑 ---->属性 2、高级系统设置 3、点击环境变量 4、选择 …

ELK企业级日志分析系统(elasticsearch+logstash+kibana)

目录 一.ELK概述 1.定义 (1)ElasticSearch (2)Kiabana (3)Logstash (4)Filebeat 2.filebeat结合logstash带来好处 3.为什么要是用ELK? 4.完整日志系统基本特征 …

gitlab 搭建

cat etc/initial_root_password Password: ipGg5y7GJPp/YmVHf3c3ViMKzCWYJSjU4JzUktrw8cY ###### 可修改,可不修改,并###并#并 #初始密码 #本次未修改 vim /data/gitlab/etc/gitlab.rb external_url http://ip/gitlab #访问网址及端口 #ssh远程地址 gi…

算法打卡day34

今日任务: 1)62.不同路径 2)63.不同路径 II 3)复习day10 62.不同路径 题目链接:62. 不同路径 - 力扣(LeetCode) 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “S…

算法修炼之路之双指针含多道leetcode 经典题目

目录 前言 一:普通双指针 1.经典题目一 283移动0问题 分析 代码实现 2.经典题目二 1089复写0 分析 代码实现 二:解决成环类问题-快慢指针 经典例题一 202快乐数 分析 代码实现 三:左右相遇指针 经典例题一 11 盛最多水的容…

AR远程空间标注Vuforia+WebRTC音视频通话和空间标注功能

AR远程空间标注VuforiaWebRTC音视频通话和空间标注功能 视频学习地址:https://www.bilibili.com/video/BV1ZT4y187mG/?vd_sourcefc4b6cdd80b58c93a280fd74c37aadbf

GPT建模与预测实战

代码链接见文末 效果图: 1.数据样本生成方法 训练配置参数: --epochs 40 --batch_size 8 --device 0 --train_path data/train.pkl 其中train.pkl是处理后的文件 因此,我们首先需要执行preprocess.py进行预处理操作,配置参数…

分布式锁-redission锁的MutiLock原理

5.5 分布式锁-redission锁的MutiLock原理 为了提高redis的可用性,我们会搭建集群或者主从,现在以主从为例 此时我们去写命令,写在主机上, 主机会将数据同步给从机,但是假设在主机还没有来得及把数据写入到从机去的时…

【Android surface 】二:源码分析App的surface创建过程

文章目录 画布surfaceViewRoot的创建&setView分析setViewrequestLayoutViewRoot和WMS的关系 activity的UI绘制draw surfacejni层分析Surface无参构造SurfaceSessionSurfaceSession_init surface的有参构造Surface_copyFromSurface_writeToParcelSurface_readFromParcel 总结…

文心一言

文章目录 前言一、首页二、使用总结 前言 今天给大家带来百度的文心一言,它基于百度的文心大模型,是一种全新的生成式人工智能工具。 一、首页 首先要登录才能使用,左侧可以看到以前的聊天历史 3.5的目前免费用,但是4.0的就需要vip了 二、使用 首先在最下方文本框输入你想要搜…

Harmony鸿蒙南向驱动开发-SDIO接口使用

功能简介 SDIO是安全数字输入输出接口(Secure Digital Input and Output)的缩写,是从SD内存卡接口的基础上演化出来的一种外设接口。SDIO接口兼容以前的SD卡,并且可以连接支持SDIO接口的其他设备。 SDIO接口定义了操作SDIO的通用…

总分410+专业130+国防科技大学831信号与系统考研经验国防科大电子信息与通信工程,真题,大纲,参考书。

好几个学弟催着,总结一下我自己的复习经历,希望大家复习少走弯路,投入的复习正比换回分数。我专业课831信号与系统130(感觉比估分要低,后面找Jenny老师讨论了自己拿不准的地方也没有错误,心里最近也这经常回…

记账本|基于SSM的家庭记账本小程序设计与实现(源码+数据库+文档)

家庭记账本小程序目录 基于SSM的家庭记账本小程序设计与实现 一、前言 二、系统设计 三、系统功能设计 1、小程序端: 2、后台 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍:✌️大…

【opencv】示例-imagelist_creator.cpp 从命令行参数中创建一个图像文件列表(yaml格式)...

/* 这个程序可以创建一个命令行参数列表的yaml或xml文件列表 */ // 包含必要的OpenCV头文件 #include "opencv2/core.hpp" #include "opencv2/imgcodecs.hpp" #include "opencv2/highgui.hpp" #include <string> #include <iostream>…

视频秒播优化实践

本文字数&#xff1a;2259字 预计阅读时间&#xff1a;10分钟 视频起播时间&#xff0c;即首帧时间&#xff0c;是视频类应用的一个重要核心指标&#xff0c;也是影响用户观看体验的核心因素之一。如果视频要加载很久才能开始播放&#xff0c;用户放弃播放甚至离开 App 的概率都…

飞书api增加权限

1&#xff0c;进入飞书开发者后台&#xff1a;飞书开放平台 给应用增加权限 2&#xff0c;进入飞书管理后台 https://fw5slkpbyb3.feishu.cn/admin/appCenter/audit 审核最新发布的版本 如果还是不行&#xff0c;则需要修改数据权限&#xff0c;修改为全部成员可修改。 改完…

大数据架构之关系型数据仓库——解读大数据架构(二)

文章目录 前言什么是关系型数仓对数仓的错误认识与使用自上而下的方法关系型数仓的优点关系型数仓的缺点数据加载加载数据的频率如何确定变更数据 关系型数仓会消失吗总结 前言 本文对关系型数据仓库&#xff08;RDW&#xff09;进行了简要的介绍说明&#xff0c;包括什么是关…

课时93:流程控制_函数进阶_综合练习

1.1.3 综合练习 学习目标 这一节&#xff0c;我们从 案例解读、脚本实践、小结 三个方面来学习。 案例解读 案例需求 使用shell脚本绘制一个杨辉三角案例解读 1、每行数字左右对称&#xff0c;从1开始变大&#xff0c;然后变小为1。    2、第n行的数字个数为n个&#xf…

Bug及异常:unity场景角色移动卡墙壁的问题

场景是一个小的杠铃形状封闭空间&#xff0c;美术没有给包围盒&#xff0c;我自己用blender做了一个&#xff08;属于兴趣爱好&#xff09;&#xff0c;如下&#xff1a; 导入场景中使用meshcollider做成空气墙&#xff0c;发现角色移动到角落继续行走会卡角落处&#x…

谷歌pixel6/7pro等手机WiFi不能上网,显示网络连接受限

近期在项目中遇到一个机型出现的问题,先对项目代码进行排查,发现别的设备都能正常运行,就开始来排查机型的问题,特意写出来方便后续查看,也方便其它开发者来自查。 设备机型:Pixel 6a 设备安卓版本:13 该方法无需root,只需要电脑设备安装adb(即Android Debug Bridge…