js方法格式化数字,加入千分符,并可以指定小数点位数

/**
 * 数字格式化
 * @param s 数字、包含数字的字符串 如'aa1234.11'
 * @param n 小数点位数
 * @returns 带有千分符的字符串,如'1,234.11'
 */
function formatNumber(s, n) {
    n = n >= 0 && n <= 20 ? n : 2;
    s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
    var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];
    r = (r == null ? "" : "." + r);
    t = "";
    for (i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
    }
    return t.split("").reverse().join("") + r;
}

页面上要格式化数字,于是就用js实现了一下。
例:formatNumber(12345.123, 2)==>12,345.12;
formatNumber(‘abc12345.123’, 2)==>12,345.12

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

余额充值