JS 数字,金额 用逗号 隔开(数字格式化)

本文介绍了一个用于金额格式化的小工具,包括如何将数字转换为带千位分隔符的形式,并支持调整小数位数。同时提供了一个示例HTML文件,演示了如何在网页上使用此工具进行金额计算和格式化。
http://blog.youkuaiyun.com/evangel_z/article/details/12839657
例如: 
12345格式化为12,345.00 
12345.6格式化为12,345.60 
12345.67格式化为 12,345.67 
只留两位小数。 
回来后写了个格式化函数。可以控制小数位数,自动四舍五入。 代码如下: 
[javascript]  view plain copy
  1. function fmoney(s, n) {  
  2.     n = n > 0 && n <= 20 ? n : 2;  
  3.     s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";  
  4.     var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];  
  5.     t = "";  
  6.     for (i = 0; i < l.length; i++) {  
  7.         t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");  
  8.     }  
  9.     return t.split("").reverse().join("") + "." + r;  
  10. }  
调用:fmoney("12345.675910", 3),返回12,345.676 
还原函数: 
[javascript]  view plain copy
  1. function rmoney(s) {  
  2.     return parseFloat(s.replace(/[^\d\.-]/g, ""));  
  3. }  
示例(可保存一下代码为html文件,运行查看效果): 
[html]  view plain copy
  1. <SCRIPT>  
  2. function fmoney(s, n) {  
  3.     n = n > 0 && n <= 20 ? n : 2;  
  4.     s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";  
  5.     var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];  
  6.     t = "";  
  7.     for (i = 0; i < l.length; i++) {  
  8.         t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");  
  9.     }  
  10.     return t.split("").reverse().join("") + "." + r;  
  11. }  
  12. function rmoney(s) {  
  13.     return parseFloat(s.replace(/[^\d\.-]/g, ""));  
  14. }  
  15. function g(id) {  
  16.     return document.getElementById(id);  
  17. }  
  18. window.onload = function() {  
  19.     var num, txt = g("txt"), txt2 = g("txt2"), btn = g("btn"), btn2 = g("btn2"), span = g("span");  
  20.     btn.onclick = function() {  
  21.         num = parseInt(g("num").value);  
  22.         txt.value = fmoney(txt.value, num);  
  23.         txt2.value = fmoney(txt2.value, num);  
  24.     };  
  25.     btn2.onclick = function() {  
  26.         num = parseInt(g("num").value);  
  27.         span.innerHTML = "="  
  28.                 + fmoney(rmoney(txt.value) + rmoney(txt2.value), num);  
  29.     };  
  30. };  
  31. </SCRIPT>     
  32. 小数点位数:     
  33. <select id="num">     
  34. <option value="2">2</option>     
  35. <option value="3">3</option>     
  36. <option value="4">4</option>     
  37. <option value="5">5</option>     
  38. </select>     
  39. <input type="text" id="txt" value="12345.675910"> +     
  40. <input type="text" id="txt2" value="1223"> <span id="span"></span>     
  41. <br>     
  42. <input type="button" id="btn" value="格式化">     
  43. <input type="button" id="btn2" value="相加">   

附:

[javascript]  view plain copy
  1. /* 
  2.  * formatMoney(s,type) 
  3.  * 功能:金额按千位逗号分割 
  4.  * 参数:s,需要格式化的金额数值. 
  5.  * 参数:type,判断格式化后的金额是否需要小数位. 
  6.  * 返回:返回格式化后的数值字符串. 
  7.  */  
  8. function formatMoney(s, type) {  
  9.     if (/[^0-9\.]/.test(s))  
  10.         return "0";  
  11.     if (s == null || s == "")  
  12.         return "0";  
  13.     s = s.toString().replace(/^(\d*)$/, "$1.");  
  14.     s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");  
  15.     s = s.replace("."",");  
  16.     var re = /(\d)(\d{3},)/;  
  17.     while (re.test(s))  
  18.         s = s.replace(re, "$1,$2");  
  19.     s = s.replace(/,(\d\d)$/, ".$1");  
  20.     if (type == 0) {// 不带小数位(默认是有小数位)  
  21.         var a = s.split(".");  
  22.         if (a[1] == "00") {  
  23.             s = a[0];  
  24.         }  
  25.     }  
  26.     return s;  
  27. }  
  28. /* 
  29.  * 通用DateAdd(interval,number,date) 功能:实现javascript的日期相加功能. 
  30.  * 参数:interval,字符串表达式,表示要添加的时间间隔. 参数:number,数值表达式,表示要添加的时间间隔的个数. 参数:date,时间对象. 
  31.  * 返回:新的时间对象. var now = new Date(); var newDate = DateAdd("day",5,now); 
  32.  * author:devinhua(从○开始) update:2010-5-5 20:35 
  33.  */  
  34. function DateAdd(interval, number, date) {  
  35.     if (date == null)  
  36.         return "";  
  37.     switch (interval) {  
  38.     case "day":  
  39.         date = new Date(date);  
  40.         date = date.valueOf();  
  41.         date += number * 24 * 60 * 60 * 1000;  
  42.         date = new Date(date);  
  43.         return date;  
  44.         break;  
  45.     default:  
  46.         return "";  
  47.         break;  
  48.     }  
  49. }  
### JavaScript 实现数字格式化每三位用逗号分隔的方法 以下是几种常见的实现方式: #### 方法 1:使用 `toLocaleString()` 方法 `toLocaleString()` 是一种简单有效的方式,可以将数字转换为带有逗号分隔的字符串形式。此方法会自动处理整数和小数部分。 ```javascript const num = 123456789.123; console.log(num.toLocaleString()); // 输出 "123,456,789.123" ``` 这种方法适用于大多数场景,并能很好地支持国际化设置[^1]。 --- #### 方法 2:正则表达式替换法 通过正则表达式手动分割并插入逗号,这种方式更加灵活,能够自定义更多细节。 ```javascript function formatNumber(nStr) { nStr += ''; const parts = nStr.split('.'); let integerPart = parts[0]; let decimalPart = parts.length > 1 ? '.' + parts[1] : ''; const rgx = /(\d+)(\d{3})/; while (rgx.test(integerPart)) { integerPart = integerPart.replace(rgx, '$1,' + '$2'); } return integerPart + decimalPart; } console.log(formatNumber('123456789')); // 输出 "123,456,789" console.log(formatNumber('123456789.123')); // 输出 "123,456,789.123" ``` 该函数利用正则表达式的匹配能力逐步向左添加逗号,最终返回格式化字符串[^1]。 --- #### 方法 3:基于循环的手动拼接 如果希望更精细地控制逻辑流程,可以通过逐段截取的方式来构建带逗号的结果。 ```javascript function splitNumberWithComma(n) { const reg = /\.\d+/; const num = (n || 0).toString(); const temp = reg.exec(num); const decimal = temp && temp[0] ? temp[0] : ""; const decimalPointIndex = temp && temp.index ? temp.index : num.length; const integerNum = num.slice(0, decimalPointIndex); let result = ""; while (integerNum.length > 3) { result = ',' + integerNum.slice(-3) + result; integerNum = integerNum.slice(0, integerNum.length - 3); } if (integerNum) { result = integerNum + result; } return result + decimal; } console.log(splitNumberWithComma(123456789)); // 输出 "123,456,789" console.log(splitNumberWithComma(123456789.123)); // 输出 "123,456,789.123" ``` 这段代码通过对整数部分进行切片操作来动态插入逗号,同时保留原始的小数部分[^2]。 --- #### 方法 4:递归实现 还可以采用递归来简化逻辑结构,使代码更具可读性和扩展性。 ```javascript export const formatNum = (nums) => { let num = (nums || 0).toString(); const re = /\d{3}$/; let result = ''; while (re.test(num)) { result = RegExp.lastMatch + result; if (num !== RegExp.lastMatch) { result = `,${result}`; num = (RegExp as any).leftContext; } else { num = ''; break; } } if (num) { result = num + result; } return result; }; console.log(formatNum(123456789)); // 输出 "123,456,789" console.log(formatNum(123456789.123));// 输出 "123,456,789.123"[^3] ``` 这种递归方案适合需要频繁调用的情况,因为它具有较高的性能优化潜力。 --- ### 总结 以上四种方法各有优劣: - **`toLocaleString()`** 提供了简洁高效的解决方案,但在某些特殊情况下可能不够灵活。 - **正则表达式替换法** 和 **手动拼接法** 则提供了更大的自由度,允许开发者完全掌控格式化过程中的每一个环节。 - **递归实现** 更加优雅且易于维护,在复杂项目中尤为适用。 无论选择哪种方式,都应根据实际需求权衡效率与灵活性之间的关系。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值