小程序加千分位逗号分隔符

本文介绍了在小程序中处理数字格式化的四种方法,包括将带有逗号的金额取整、保留小数点后数字的千分位逗号分隔,以及使用正则表达式实现的数字格式化技巧。

一. 将带有逗号的金额取整,不显示小数点后的数字

 如何将json下的某数据修改并重新赋值

二.千分位用逗号隔开,全保留小数点后面的数

var a = 2221222122.675414?
var b = a.toFixed(a.toString().split(".")[1].length).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');//使用正则替换,每隔三个数加一个',' 
 console.log(b)     //2,221,222,122.675414

三.千分位用逗号隔开,全保留小数点后面的数字

var a = 2221222122.675414?
var b = a.toFixed(a.toString().split(".")[1].length).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');//使用正则替换,每隔三个数加一个',' 
 console.log(b)    //2,221,222,122.675414

四.基于正则实现数字千分位用逗号分隔的方法 不保留小数点后两位

 

return (num + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
 NewTotalAmount = NewTotalAmount.toFixed().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')

           

参考文档:https://blog.youkuaiyun.com/weixin_42420703/article/details/81384921

 

### Vue 中实现小数的千分位格式化 在 Vue.js 中可以通过多种方式来实现金额的小数部分保留两位并进行千分位格式化。以下是几种常见的解决方案: #### 方法一:使用正则表达式手动处理 通过字符串操作和正则表达式,可以轻松实现整数部分的千分位分割以及小数部分的截取。 ```javascript function formatCurrency(value) { if (value === null || value === undefined || isNaN(value)) return ''; let num = parseFloat(value).toFixed(2); // 保留两位小数[^1] let parts = num.toString().split('.'); let intPart = parts[0]; let decimalPart = parts.length > 1 ? '.' + parts[1] : ''; // 对整数部分应用千分位分隔符 intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ','); return `${intPart}${decimalPart}`; } ``` 此函数会先将数值转换为固定两位小数的形式,随后利用正则表达式对整数部分添千分位分隔符[^2]。 --- #### 方法二:使用 `toLocaleString` API JavaScript 提供了一个内置的方法 `toLocaleString()` 来完成货币格式化的功能。该方法支持国际化设置,并能自动处理千分位分隔符和小数点位置。 ```javascript function formatCurrency(value) { if (value === null || value === undefined || isNaN(value)) return ''; return new Number(value).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } ``` 上述代码中,`minimumFractionDigits` 和 `maximumFractionDigits` 参数用于指定最小和最大显示的小数位数。这种方法不仅简单易用,还具有良好的跨浏览器兼容性[^3]。 --- #### 方法三:结合 Ant Design 组件库 如果项目已经引入了 Ant Design,则可以直接使用其 `<InputNumber>` 或其他组件的相关属性来进行格式化。 ```vue <template> <a-input-number v-model="amount" :formatter="value => value && value.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')" :parser="value => value && value.replace(/,/gi, '')" style="width: 100%" /> </template> <script> export default { data() { return { amount: '' }; } }; </script> ``` 在此示例中,`formatter` 属性负责展示时的格式化逻辑,而 `parser` 则用来解析用户输入的内容以便保存原始数据形式。 --- ### 总结 以上三种方案各有优劣: - **正则表达式**适合轻量级场景,无需依赖额外库; - **`toLocaleString`** 更简洁高效,尤其适用于多语言环境下的开发需求; - 如果正在使用 Ant Design UI 库的话,推荐采用官方提供的控件特性以减少自定义编码工作量。 无论选用哪种方式,请务必考虑边界条件测试(如负数、非数字字符等),从而提升程序健壮性和用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值