数字加千分位分隔符，加货币符号，数字转百分数

想必大家在做前端开发的过程中或多或少都会需要显示数字或是金钱，或是百分数，或是小数位取有效数字。Number.parseFloat(x).toFixed(2)或许可以解决取有效数字的问题，但是其他的就没辙了。尤其是js的浮点数计算不精确导致在前端计算合适麻烦，还需要引用第三方库来解决，最后导致怕麻烦的童鞋有时候就直接叫后端直接传计算后的值^ _ ^ |||,其实官方已经提供了api去解决类似问题了，而且还是一起解决的，接下来抛转引玉大家一起来学习一下这个api，Intl ！！！
去看Intl详情请戳

Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。Collator，NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。本页文档内容包括了这些属性，以及国际化使用的构造器和其他语言的方法等常见的功能。

我自己封装了一个方法去处理以上这些问题，当然，只是初略封装，感兴趣的童鞋可以继续封装。话不多说，直接上代码！

/*** * @param  value ：数字/数字字符串* @param  config ：* config = {locales: 'zh-CN',currency: 'CNY', 是否显示币种前缀，默认不显示 注：currency如果有值，需和locale对应fractionDigits: 2, 显示多少位小数，默认2位小数useGrouping: false, 千分位逗号分隔 true/false ，默认truepercent: 2 显示百分号和最高几位小数}* @returns string 格式化后的数字*/
function parseNumber (value, config) {if (isNaN(value)) return '???'if ([null, undefined, '',].includes(value)) return '-' // 没有值时返回‘-’if (value == 0) return '0' // 对于0，0.0000，-0.000...这些直接返回0不保留小数位let locales = undefinedlet options = {}// 1. 如果有配置，使用配置if (config) {if (Reflect.has(config, 'locales')) {locales = config.locales}// 1.2 千分位逗号分隔if (Reflect.has(config, 'useGrouping')) {options.useGrouping = config.useGrouping}// 1.3 加币种前缀if (Reflect.has(config, 'currency')) {options.style = 'currency'options.currency = config.currency}// 1.4 是否有小数位，显示多少位小数if (Reflect.has(config, 'fractionDigits')) {options.minimumFractionDigits = config.fractionDigitsoptions.maximumFractionDigits = config.fractionDigits}// 1.5 设置为百分数格式if (Reflect.has(config, 'percent')) {options.style = 'percent'options.maximumFractionDigits = config.percent}} else {// 2. 没有配置使用默认配置,对金钱默认处理为"1,234,567.89"；locales = 'zh-CN'options.minimumFractionDigits = 2options.maximumFractionDigits = 2}const nf = new Intl.NumberFormat(locales, options)return nf.format(value)
}// 以下是测试数据，可删除
const test = [null, undefined, '', {}, 'aa', '111aaa', [],0, 0.0, 0.0000, -0.0,'0', '0.0', '0.000', '-0.0',
]
test.forEach(item => console.log(parseMoney(item)))
// 以上是测试数据，可删除

简单说明一下：

传值不是数字或数字字符串时，返回‘???’
对于==0 的数字，咱没必要再显示小数位或是百分号了，直接返回 0
传参value不仅仅只是一个数字，也可以是0.1+0.2这种表达式，把前端计算交给Intl去处理，在js中0.1+0.2 =0.30000000000000004的情况，在Intl中不会出现，放心使用！
具体的使用方法在代码中都有注释，我就不过多废话了！
有问题的小伙伴欢迎留言，评论，点赞关注，谢啦！！！

谁能仅靠十年寒窗苦读，去经营百岁人生?
活到老，学到老！
知识改变人生！
共勉！

数字加千分位分隔符，加货币符号，数字转百分数相关推荐

返回参数数字的千分位分隔符字符串+按指定长度切割数组
刷题的时候刷到了返回参数数字的千分位分隔符字符串的题目题目:返回参数数字的千分位分隔符字符串输入:12345 输出:12,345输入:1234567 输出:1,234,567 (很抓马,我的脑袋空 ...
返回参数数字的千分位分隔符字符串
返回参数数字的千分位分隔符,每千位划一个分隔符,因为位数不确定,所以选用递归的方式 <!DOCTYPE html> <html><head><meta cha ...
word文档怎么给数字加千分符_如何给word文档中的数字添加千分位分隔符
展开全部准备工具/材料:windows10Build10158版本,Excel 2013版本. 1.此演示操作中使用的办公软件是Excel 2013版本. 2.windows10Build10158 ...
前端 - 三种方式给数字加上千分位分隔符
点击打开视频讲解使用toLocaleString方法 let num = 1234567num = num.toLocaleString() console.log(num)// 1,234,567 ...
数字实现千分位分隔符
方法一(被处理的必须为 Number 类型) let str = 123456789; y.toLocaleString() //123,456,789 方法二(被处理的为String类型的数字) l ...
js 数字的千分位分隔符函数
function _comma(number) {// 补全代码let string = number.toString();let arr = string.split(""). ...
BootstrapTable之千分位分隔符设置
BootstrapTable之千分位分隔符设置前言在最近的工作中遇到了数字数据显示千分位分隔符的需求,这是数字显示中常见的需求,好在BootstrapTable中可以很容易的实现,具体思路为:写一 ...
Word VBA：对数字批量加千分位，设置小数位数和设置负数格式
一.思路用Word的查找替换方法[Find]查找位置,用FormatNumber生成对应数字的格式化字符串,依次替换. 二.代码 Function 数字格式替换(Optional 范围 As Ran ...
数字格式化：设置千分位分隔符
直接上代码[作为自己的工具函数记录使用] 步骤描述 1. 基本的数据判空.正负判断.小数与整数的各自截取处理 2. 数据的长度判断.数据反转.每3位增加千分位分隔符并进行回调,直到全部加完 3. 千分 ...

数字加千分位分隔符，加货币符号，数字转百分数

数字加千分位分隔符，加货币符号，数字转百分数相关推荐

最新文章

热门文章