用JS格式化数字金额用逗号隔开保留两位小数点

本文介绍了一个使用JavaScript实现的格式化数字金额并四舍五入的函数,支持自定义小数位数。通过该函数,可以将数字金额以特定格式展示,如将12345.675910格式化为12,345.676。此外,提供了一个在线示例,用户可以输入金额和小数位数,实时查看格式化结果。

JS格式化数字金额只留两位小数。写了个格式化函数。可以控制小数位数,自动四舍五入,感兴趣的朋友可以了解下

例如:
12345格式化为12,345.00
12345.6格式化为12,345.60
12345.67格式化为 12,345.67
只留两位小数。
回来后写了个格式化函数。可以控制小数位数,自动四舍五入。 代码如下:

复制代码 代码如下:

function fmoney(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];
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;
}


调用:fmoney("12345.675910", 3),返回12,345.676
还原函数:
复制代码 代码如下:

function rmoney(s) {
return parseFloat(s.replace(/[^\d\.-]/g, ""));
}


示例(可保存一下代码为html文件,运行查看效果):
复制代码 代码如下:

<SCRIPT>
function fmoney(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];
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;
}
function rmoney(s) {
return parseFloat(s.replace(/[^\d\.-]/g, ""));
}
function g(id) {
return document.getElementById(id);
}
window.onload = function() {
var num, txt = g("txt"), txt2 = g("txt2"), btn = g("btn"), btn2 = g("btn2"), span = g("span");
btn.onclick = function() {
num = parseInt(g("num").value);
txt.value = fmoney(txt.value, num);
txt2.value = fmoney(txt2.value, num);
};
btn2.onclick = function() {
num = parseInt(g("num").value);
span.innerHTML = "="
+ fmoney(rmoney(txt.value) + rmoney(txt2.value), num);
};
};
</SCRIPT>

小数点位数:
<select id="num">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" id="txt" value="12345.675910"> +
<input type="text" id="txt2" value="1223"> <span id="span"></span>
<br>
<input type="button" id="btn" value="格式化">
<input type="button" id="btn2" value="相加">


附:
复制代码 代码如下:

/*
* formatMoney(s,type)
* 功能:金额按千位逗号分割
* 参数:s,需要格式化的金额数值.
* 参数:type,判断格式化后的金额是否需要小数位.
* 返回:返回格式化后的数值字符串.
*/
function formatMoney(s, type) {
if (/[^0-9\.]/.test(s))
return "0";
if (s == null || s == "")
return "0";
s = s.toString().replace(/^(\d*)$/, "$1.");
s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");
s = s.replace(".", ",");
var re = /(\d)(\d{3},)/;
while (re.test(s))
s = s.replace(re, "$1,$2");
s = s.replace(/,(\d\d)$/, ".$1");
if (type == 0) {// 不带小数位(默认是有小数位)
var a = s.split(".");
if (a[1] == "00") {
s = a[0];
}
}
return s;
}

/*
* 通用DateAdd(interval,number,date) 功能:实现javascript的日期相加功能.
* 参数:interval,字符串表达式,表示要添加的时间间隔. 参数:number,数值表达式,表示要添加的时间间隔的个数. 参数:date,时间对象.
* 返回:新的时间对象. var now = new Date(); var newDate = DateAdd("day",5,now);
* author:devinhua(从○开始) update:2010-5-5 20:35
*/

function DateAdd(interval, number, date) {
if (date == null)
return "";
switch (interval) {
case "day":
date = new Date(date);
date = date.valueOf();
date += number * 24 * 60 * 60 * 1000;
date = new Date(date);
return date;
break;
default:
return "";
break;
}


<think>我们被要求回答关于前端格式化金额保留两位小数的问题,并参考了三个引用内容。下面将总结几种常见方法,并给出代码示例。 根据引用[1],我们可以使用toFixed方法,但要注意它返回的是字符串,并且会四舍五入。 引用[2]提供了一个金额格式化的函数,它处理了单位转换(从分到元)、添加千分位分隔符和货币符号。 引用[3]提到了使用toLocaleString方法,这是一种更国际化、更简洁的方式。 我们将介绍以下几种方法: 1. 使用toFixed方法(简单,但无千分位分隔) 2. 结合toFixed和正则表达式添加千分位分隔符(如引用[2]中的部分做法) 3. 使用toLocaleString方法(推荐,简单且国际化) 注意:金额通常以分为单位从后端返回,所以需要除以100转换成元(如引用[2])。但具体单位需根据实际接口确定。 方法一:使用toFixed 这种方法简单,但不会添加千分位分隔符。 示例代码: let amount = 123456.789; let formatted = amount.toFixed(2); // 结果为"123456.79" 方法二:使用正则表达式添加千分位分隔符(并保留两位小数) 我们可以先使用toFixed(2)保留两位小数,然后对整数部分添加千分位分隔符。注意:小数部分不能添加逗号。 引用[2]中的函数就采用了这种方法,但注意它处理的是以分为单位的金额。 下面是一个处理以元为单位的金额,并格式化为带千分位和两位小数的函数: function formatCurrency(value) { // 先转换为浮点数,然后保留两位小数(四舍五入) let num = parseFloat(value).toFixed(2); // 拆分整数部分和小数部分 let parts = num.split('.'); let integerPart = parts[0]; let decimalPart = parts[1] || ''; // 对整数部分添加千分位分隔 integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ','); return integerPart + '.' + decimalPart; } 但是,引用[2]中的函数还处理了单位转换(分转元)和添加货币符号,我们可以参考写一个更完整的: function amountFormat(value = 0, fixed = 2, amountMark = '¥') { // 将分转换为元:除以100,然后保留fixed位小数 let num = (parseInt(value) / 100).toFixed(fixed); // 使用正则表达式添加千分位分隔符 // 正则解释:匹配1到3个数字,这些数字后面跟着的是3的倍数的数字(直到小数点或结束) num = num.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,'); // 但上面这个正则可能不太准确,更常见的做法是: // num = num.replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 但是注意:上面的正则可能会在小数部分也添加逗号,所以我们应该先分离整数和小数部分,然后只对整数部分处理。 // 因此,我们修改一下,采用更稳妥的方法: let parts = num.split('.'); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); return amountMark + parts.join('.'); } 然而,引用[2]中的正则表达式是:`replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')`,这个正则表达式在整数部分较长时可能会出现问题,因为它会匹配1到3个数字,然后要求后面是3的倍数个数字直到结束或小数点。但实际测试可能并不理想。 因此,我们推荐使用更常见的正则:`/\B(?=(\d{3})+(?!\d))/g`,这个正则只会在整数部分中每3位数字前添加逗号。 方法三:使用toLocaleString(推荐) 引用[3]中提到了toLocaleString方法,它可以直接格式化数字,包括千分位分隔和货币符号。 示例: let amount = 123456.789; let formatted = amount.toLocaleString('zh-CN', { style: 'currency', currency: 'CNY', minimumFractionDigits: 2, maximumFractionDigits: 2 }); // 输出:¥123,456.79 但是,注意这个方法返回的字符串已经包含了货币符号和千分位分隔符,并且小数部分固定为两位(通过minimumFractionDigits和maximumFractionDigits设置)。 如果不需要货币符号,可以设置style为'decimal': let formatted = amount.toLocaleString('zh-CN', { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 }); // 输出:123,456.79 另外,如果后端返回的是分,我们需要先除以100: let yuan = fen / 100; let formatted = yuan.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); 总结: 如果项目需要国际化,推荐使用toLocaleString方法;如果需要自定义货币符号,可以自己拼接。 下面给出一个完整的函数,处理以分为单位的金额,并格式化为元,保留两位小数,添加千分位分隔符和货币符号: function formatCurrency(fen, currencySymbol = '¥') { // 将分转换为元 let yuan = fen / 100; // 使用toLocaleString格式化 return currencySymbol + yuan.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } 但是注意:toLocaleString方法在部分浏览器中可能不支持某些选项,但现代浏览器基本都支持。 如果不想使用toLocaleString,也可以自己组合: function formatCurrency(fen, currencySymbol = '¥') { let yuan = fen / 100; // 保留两位小数,并转换为字符串 let numStr = yuan.toFixed(2); // 分离整数和小数部分 let [integer, decimal] = numStr.split('.'); // 给整数部分添加千分位 integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ','); return currencySymbol + integer + '.' + decimal; } 根据需求选择方法即可。 注意:正则表达式`/\B(?=(\d{3})+(?!\d))/g`用于匹配整数部分中每3位数字之间的位置(非单词边界,且后面有3的倍数个数字,且后面不跟数字),然后插入逗号。 最后,我们给出一个综合示例,用户可以根据实际情况选择。</think>在前端开发中,格式化金额保留两位小数是常见需求,以下是几种可靠实现方法及代码示例: ### 方法一:使用 `toLocaleString`(推荐) ```javascript function formatCurrency(value, currency = 'CNY') { const yuan = value / 100; // 若后端返回单位为"分",需转成"元" return yuan.toLocaleString('zh-CN', { style: 'currency', currency, minimumFractionDigits: 2, maximumFractionDigits: 2 }); } // 示例 console.log(formatCurrency(1234567)); // 输出:¥12,345.67 console.log(formatCurrency(5000)); // 输出:¥50.00 ``` **优点**:内置国际化支持,自动添加千分位分隔符和货币符号[^3]。 --- ### 方法二:正则表达式 + `toFixed` ```javascript function formatCurrency(value, symbol = '¥') { const num = (value / 100).toFixed(2); // 转元并保留两位小数 // 添加千分位逗号分隔 const formatted = num.replace(/\B(?=(\d{3})+(?!\d))/g, ','); return symbol + formatted; } // 示例 console.log(formatCurrency(9876543)); // 输出:¥98,765.43 ``` --- ### 方法三:纯正则表达式处理 ```javascript function formatCurrency(value) { return '¥' + (value / 100) .toFixed(2) .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,'); } // 示例 console.log(formatCurrency(100000)); // 输出:¥1,000.00 ``` --- ### 关键注意事项 1. **单位转换**:若后端返回金额单位为**分**,需先除以 100 转**元**(如 `value/100`)[^2] 2. **小数处理**: - `toFixed(2)` 自动四舍五入到两位小数,返回字符串类型 - 避免浮点数精度问题(如 `0.1+0.2≠0.3`),建议用 `(value/100).toFixed(2)` 3. **千分位分隔**:正则表达式 `/\B(?=(\d{3})+(?!\d))/g` 实现逗号分隔[^1] 4. **负数处理**:需额外判断,例如: ```javascript if (value < 0) return '-' + formatCurrency(Math.abs(value)); ``` --- ### 方法对比 | 方法 | 优点 | 缺点 | |--------------|-------------------------------|--------------------------| | `toLocaleString` | 原生支持、国际化完善 | 低版本IE兼容性较差 | | 正则+`toFixed` | 兼容性好、可控性强 | 需手动处理货币符号 | | 纯正则 | 单行代码简洁 | 可读性较低 | **推荐场景**: - 现代浏览器项目 → 优先选 `toLocaleString` - 兼容旧浏览器 → 正则+`toFixed` - Node.js 环境 → 可用 `Intl.NumberFormat`
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值