在财务或者其他一些特殊的领域,客户可能需要处理一串较长的数字,这个过程中容易产生一些错误,比如 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角