业务开发过程中,客户提出表单中某些含有金额的输入框输入阿拉伯数字后要给出中文提示(比如:输入123456789.05,提示信息:一亿二千三百四十五万六千七百八十九点零五),以防止多输入或者错输入导致数据错误的问题。
适用场景
- 适用于需要转换阿拉伯数字与中文数字的场景
- 支持科学记数法字符串的转换
- 支持口语化
- 支持自定义转换(不论是兆,京还是厘都可以用)
- 对超大数支持用争议教少的万万亿代替亿亿
- 也中文数字再转回阿拉伯数字
先简单实现一个前端界面(最后贴出前端代码)
安装
$ npm install nzh --save
$ bower install nzh --save
引用
var Nzh = require("nzh");
var nzhcn = require("nzh/cn"); //直接使用简体中文
var nzhhk = require("nzh/hk"); //繁体中文
简单示例分析
var nzhcn = Nzh.cn; // 首先引入nzh.cn文件
nzhcn.encodeS(100111); // 转中文小写 >> 十万零一百一十一
nzhcn.encodeB(100111); // 转中文大写 >> 壹拾万零壹佰壹拾壹
nzhcn.encodeS("1.23456789e+21"); // 科学记数法字符串 >> 十二万三千四百五十六万万七千八百九十万亿
nzhcn.toMoney("100111.11"); // 转中文金额 >> 人民币壹拾万零壹佰壹拾壹元壹角壹分
方法介绍
//nzh.cn默认已包含以下方法
encodeS(num,options) //转中文小写
encodeB(num,options) //转中文大写
toMoney(num,options) //转中文金额
decodeS(zh_num) //中文小写转数字
decodeB(zh_num) //中文大写转数字
options 说明
- tenMin: 十的口语化开关, 默认值为 false。(注: Nzh.cn中的encodeS方法默认 true)
- ww: "万万"化开关, 默认值为 true
- complete: 输出完整金额开关, toMoney 函数专用配置, 默认 false
- outSymbol: 输出金额前缀字符, toMoney 函数专用配置, 默认 true
// options.tenMin
// encodeS默认true
nzhcn.encodeS("13.5"); // 十三点五
nzhcn.encodeS("13.5", {tenMin:false}); // 一十三点五
// encodeB默人false
nzhcn.encodeB("13.5"); // 壹拾叁點伍
nzhcn.encodeB("13.5", {tenMin:true}); // 拾叁點伍
// options.ww
//Nzh.cn和Nzh.hk未引入兆、京等单位,超千万亿位时,默认以争议较少的万万亿为单位
nzhcn.encodeS(1e16); // 一万万亿
nzhcn.encodeS(1e16, {ww: false}); // 一亿亿
// options.complete
nzhcn.toMoney("1"); //人民币壹元整
nzhcn.toMoney("1",{complete:true}); //人民币壹元零角零分
nzhcn.toMoney("0.1"); //人民币壹角
nzhcn.toMoney("0.1",{complete:true}); //人民币零元壹角零分
//outSymbol 默认 true
nzhcn.toMoney("1"); //人民币壹元整
nzhcn.toMoney("1",{outSymbol:false}); //壹元整
自定义样式
可以通过 new Nzh(langs) 实现自定义。
var nzh = new Nzh({
ch: "〇壹贰叁肆伍陆柒捌玖", // 数字字符
ch_u: "个十百千万亿兆京", // 数位单位字符,万以下十进制,万以上万进制,个位不能省略
ch_f: "负", // 负字符
ch_d: "点", // 小数点字符
m_u: "元角分厘", // 金额单位
m_t: "人民币", // 金额前缀
m_z: "正" // 金额无小数后缀
});
nzh.encode("10001000000000000"); // 壹京〇壹兆
nzh.decode("壹兆"); // 1000000000000
nzh.toMoney("1.234"); // 人民币壹元贰角叁分肆厘
前端案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字转中文</title>
<style>
.divStyle{
margin:0px auto;
width:600px;
height:460px;
border:1px dashed #f00;
}
.fieldestStyle{
margin-top:10px;
height:100px;
}
.inputStyle{
height:30px;
width:300px;
}
.buttonStyle{
height:36px;
width:50px;
text-align:center;
}
.resultStyle{
margin-top:15px;
}
</style>
<!-- 依赖外部文件 -->
<script type="text/javascript" src="nzh.js"></script>
<script type="text/javascript" src="nzh.cn.js"></script>
<!-- 依赖jQuery -->
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="divStyle">
<h3 style="text-align:center;">数字转中文</h3>
<form>
<fieldset class="fieldestStyle">
<legend>数字转简体中文</legend>
<input type="text" class="inputStyle" id="num1" value=""/>
<button type="button" class="buttonStyle" onclick="jisuan1();">计算</button>
<div id="result1" class="resultStyle"></div>
</fieldset>
<fieldset class="fieldestStyle">
<legend>数字转繁体中文</legend>
<input type="text" class="inputStyle" id="num2" value=""/>
<button type="button" class="buttonStyle" onclick="jisuan2();">计算</button>
<div id="result2" class="resultStyle"></div>
</fieldset>
<fieldset class="fieldestStyle">
<legend>数字转金额</legend>
<input type="text" class="inputStyle" id="num3" value=""/>
<button type="button" class="buttonStyle" onclick="jisuan3();">计算</button>
<div id="result3" class="resultStyle"></div>
</fieldset>
</form>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
});
$("#num1").keyup(function(){
var num1 = $("#num1").val();
//千分位分割
//$("#num1").val(Number(num1).toLocaleString('en-US'));
var nzhcn = Nzh;
var encodeS = nzhcn.encodeS(num1); // 转简体中文 >> 十三点五
$("#result1").text(encodeS);
});
$("#num2").keyup(function(){
var num2 = $("#num2").val();
//千分位分割
//$("#num2").val(Number(num2).toLocaleString('en-US'));
var nzhcn = Nzh;
var encodeB = nzhcn.encodeB(num2); // 转繁体中文 >> 壹拾叁點伍
$("#result2").text(encodeB);
});
$("#num3").keyup(function(){
var num3 = $("#num3").val();
//千分位分割
//$("#num3").val(Number(num3).toLocaleString('en-US'));
var nzhcn = Nzh;
var encodeM = nzhcn.toMoney(num3,{complete:true}); // 转人民币 >> 人民币壹元零角零分
$("#result3").text(encodeM);
});
function jisuan1(){
var num1 = $("#num1").val();
//千分位分割
$("#num1").val(Number(num1).toLocaleString('en-US'));
var nzhcn = Nzh;
var encodeS = nzhcn.encodeS(num1); // 转简体中文 >> 十三点五
$("#result1").text(encodeS);
}
function jisuan2(){
var num2 = $("#num2").val();
//千分位分割
$("#num2").val(Number(num2).toLocaleString('en-US'));
var nzhcn = Nzh;
var encodeB = nzhcn.encodeB(num2); // 转繁体中文 >> 壹拾叁點伍
$("#result2").text(encodeB);
}
function jisuan3(){
var num3 = $("#num3").val();
//千分位分割
$("#num3").val(Number(num3).toLocaleString('en-US'));
var nzhcn = Nzh;
var encodeM = nzhcn.toMoney(num3,{complete:true}); // 转人民币 >> 人民币壹元零角零分
$("#result3").text(encodeM);
}
</script>
</html>