在财务或者其他一些特殊的领域,客户可能需要处理一串较长的数字,这个过程中容易产生一些错误,比如 1000000000 这个数字,普通人几乎不可能一眼看出这串数字到底表示多少,但如果写成10亿,就一目了然了。在最近的一个项目中就遇到了这样的问题,我们为用户提供了一 个文本框来输入一笔交易的金额,因为这涉及到关键信息,所以我们不希望用户在填写这一数字的时候出现任何错误或者疏忽,于是我们设计为监听文本框的键盘事 件,并对文本框里的输入进行即时的反馈:
$('input').keyup(function(){
var moneyFormat = cnNumFormat($(this).val());
$('#money_tip').text(moneyFormat.a+"元");
});
这样的话,用户在输入数字的时候可以清晰地即时检查自己有没有输入错误。这里我们使用了一个函数 cnNumFormat ,它将较长的数字转化为上图中的易读的形式。这里所说的较长是指4位数以上,即数字大于 10000 则进行处理。这个函数主要借助正则表达式来完成工作,下面是函数的完整代码:
var cnNumFormat = function(n){
if( isNaN(n) ){
return false;
}
if(n < 10000) return n;
var core = {
tenThousand : function(n){
var nFormatArray = n.match(/(\d+)(\d{4}$)/);
var balance = this.checkBalance(nFormatArray[2]);
var result = nFormatArray[1] + "万" + balance;
return result;
},
hundredMillion : function(n){
var nHM = n.match(/^\d+/)[0];
var left = n.match(/\D+\d*$/)[0];
var leftNum = n.match(/\d*$/)[0];
if(nHM.length <= 4){
return n
}else{
var nFormatArray = nHM.match(/(\d+)(\d{4}$)/);
var balance = this.checkBalance(nFormatArray[2]);
var result = nFormatArray[1] + "亿" + balance;
if(!balance.length){
if(!leftNum.length){
left = left.replace(/万/,'');
}else{
left = left.replace(/万/,'零');
}
}
return (result + left).replace(/零零/,'零');
}
},
checkBalance : function(n){
if (n === "0000") {
return "";
}
else {
return n.replace(/^0+/, "零");
}
},
decimal : function(n){
if(!n || n === "00"){
return '';
}
n = n.replace(/\./,'');
if( new RegExp('^[1-9]0?$').test(n) ){
return n.match(/[1-9]/)+"角";
}else if( new RegExp('0\\d?').test(n) ){
return n.match(/[1-9]/)+"分";
}else{
return n.slice(0,1)+"角"+n.slice(1,2)+"分"
}
}
}
n += "";
n = n.match(/(\d+)(\.\d{1,2})?/);
var r1 = core.tenThousand(n[1]);
var r2 = core.hundredMillion(r1);
var r3 = core.decimal(n[2]);
return {
a:r2,
b:r3
};
}
说明:
1. 参数: 该函数接收一个参数,等待转换的数字。这个数字可以为数值类型也可以是字符串类型,这并不重要。如果该数字小于10000则原样返回,否则进行转换。
2. 验证: 为了不和你的验证系统做重复的工作,函数内部只做了 isNaN 的验证,验证失败则返回 false。
3. 小数: 如果要进行转换的数字是浮点数,则小数位的前两位转换为“角分”,更多的则会被忽略。
4. 返回值: 返回值为一个对象,包含 a 和 b 两个属性,它们分别是整数部分的处理结果和小数部分的处理结果(如果有小数部分)。
转换的例子:
var r = cnNumFormat(10002.2);
r.a + "元" + r.b //1万零2元2角