格式化数字,逢千位数加逗号

本文介绍两种使用JavaScript实现数字格式化的方法。一是通过递归函数处理整数部分,二是利用正则表达式和toLocaleString()函数,适用于带有或不带小数点的数字,有效解决大数字的显示问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

方法一:js方法实现
思路:先判断是否有小数点,有小数点的需截取小数点前面的数字部分进行处理,处理写的是一个递归函数
function formatNumber(str) {
var baseLen = 3;
if(str.indexOf(’.’) !== -1) {
baseLen += str.length - str.indexOf(’.’);
}
if(str.length <= baseLen){
return str;
} else {
return formatNumber(str.substring(0,str.length- baseLen))+’,’+str.substring(str.length-baseLen);
}
}

方式二:结合正则
若有小数点,则直接用toLocaleString()格式化;没有小数点的情况用正则格式化
function numFormat(num) {
return num.toString().indexOf (’.’) !== -1
? num.toLocaleString()
: num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, ‘$1,’)
}

匹配规则就是: 将该num转化为字符串后,全局(/g)正向匹配,看是否符合断言(?=(?:\d{3})+$)部分,直到匹配结束。即遇到 数字 + 该数字后面紧跟连续的三位数字(并且不管这连续的三位数字出现多少次),符合则在该数字(’$1’)后加入逗号,替换的时候忽略(?:)这连续的三位数.

### 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、付费专栏及课程。

余额充值