JavaScript实现金额数字格式化:添加千分位逗号与去除逗号处理

作者:橙子

时间:2026-10-28

浏览:129

本文提供两种JavaScript实现金额格式化的方法。第一种方法将数字转换为带千分位逗号并保留两位小数的字符串,支持负数处理;第二种方法演示如何在带逗号格式与纯数字格式之间互相转换,适用于输入框实时格式化场景。

文章目录

JavaScript实现金额数字格式化:添加千分位逗号与去除逗号处理

示例1要求将数字1111111格式化为11,111,111.00,即保留两位小数并添加千分位分隔符。

具体实现代码如下:

<html>
<head>
<script type="text/javascript">
function outputmoney(number) {
number = number.replace(/\,/g, "");
if(isNaN(number) || number == "")return "";
number = Math.round(number * 100) / 100;
if (number < 0)
return '-' + outputdollars(Math.floor(Math.abs(number) - 0) + '') + outputcents(Math.abs(number) - 0);
else
return outputdollars(Math.floor(number - 0) + '') + outputcents(number - 0);
} 
//格式化金额
function outputdollars(number) {
if (number.length <= 3)
return (number == '' ? '0' : number);
else {
var mod = number.length % 3;
var output = (mod == 0 ? '' : (number.substring(0, mod)));
for (i = 0; i < Math.floor(number.length / 3); i++) {
if ((mod == 0) && (i == 0))
output += number.substring(mod + 3 * i, mod + 3 * i + 3);
else
output += ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
        }
return (output);
    }
}
function outputcents(amount) {
amount = Math.round(((amount) - Math.floor(amount)) * 100);
return (amount < 10 ? '.0' + amount : '.' + amount);
}
</script>
</head>
<body>
<input type=text maxlength="8" id="test" onblur="this.value=outputmoney(this.value);" >
</body>
</html>


在线运行:



<html> <head>  </head> <body> <input type=text maxlength="8" id="test" onblur="this.value=outputmoney(this.value);" > </body> </html>

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

整数部分千分位与纯数字互转示例

示例2演示两种转换:将1111111转换为11,111,111(添加逗号),或将11,111,111转换为1111111(去除逗号),针对整数部分处理。

具体实现代码如下:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>js 格式化金额的代码---www.jb51.net</title>
<script language="javascript">
function tran(id)
{
var v, j, sj, rv = "";
v = id.value.replace(/,/g,"").split(".");
j = v[0].length % 3;
sj = v[0].substr(j).toString();
for (var i = 0; i < sj.length; i++)
  {
rv = (i % 3 == 0) ? rv + "," + sj.substr(i, 1): rv + sj.substr(i, 1);
  }
var rvalue = (v[1] == undefined) ? v[0].substr(0, j) + rv: v[0].substr(0, j) + rv + "." + v[1];
if (rvalue.charCodeAt(0) == 44)
  {
rvalue = rvalue.substr(1);
  }
id.value = rvalue;
}
function tran2(id)
{
var v;
v = id.value.replace(/,/g,"");
alert(v);
}
</script>
<style type="text/css">
<!--
body,td,th,input {
font-size: 12px;
}
-->
</style></head>
<body>
<input name="tt" type="text" id="tt" size="80" onkeyup="tran(this)" />
<br/>
<input name="tt" type="text" id="tt2" size="80" onkeyup="tran2(this)" />
</body>
</html>

运行测试:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>js 格式化金额的代码---www.jb51.net</title><style type="text/css"><!--body,td,th,input { font-size: 12px;}--></style></head><body><input name="tt" type="text" id="tt" size="80" onkeyup="tran(this)" /><input name="tt" type="text" id="tt2" size="80" onkeyup="tran2(this)" /></body></html>

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章