Vue - 将金额数字转为汉字大写（demo）

蔚落 2023-01-23 06:57 350阅读 0赞

## 效果图 ##

![在这里插入图片描述][20210713160827619.gif]

## 实现代码 ##

> 注意：未做特殊符号与字符校验处理（以及空字符等等），请自行在输入框校验。

复制粘贴，查看效果及代码。

<body>
        <div id="body">
            请输入金额（自动转为大写）：
            <input v-model="text">
            <button @click="go()">点击转换</button>
            <h1>{
       { res }}</h1>
        </div>
    </body>
    
    
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script> const vm = new Vue({ el: '#body', data: { text: '', res: '' }, methods: { go: function() { this.res = this.convertCurrency(this.text) }, /** * 将金额数字转为汉字大写 * 12.42 -> 壹拾贰元肆角贰分 * @param {Number} money - 数字金额 * @return String */ convertCurrency: function(money) { //汉字的数字 var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); //基本单位 var cnIntRadice = new Array('', '拾', '佰', '仟'); //对应整数部分扩展单位 var cnIntUnits = new Array('', '万', '亿', '兆'); //对应小数部分单位 var cnDecUnits = new Array('角', '分', '毫', '厘'); //整数金额时后面跟的字符 var cnInteger = '整'; //整型完以后的单位 var cnIntLast = '元'; //最大处理的数字 var maxNum = 999999999999999.9999; //金额整数部分 var integerNum; //金额小数部分 var decimalNum; //输出的中文金额字符串 var chineseStr = ''; //分离金额后用的数组，预定义 var parts; if (money == '') { return ''; } money = parseFloat(money); if (money >= maxNum) { //超出最大处理数字 return ''; } if (money == 0) { chineseStr = cnNums[0] + cnIntLast + cnInteger; return chineseStr; } //转换为字符串 money = money.toString(); if (money.indexOf('.') == -1) { integerNum = money; decimalNum = ''; } else { parts = money.split('.'); integerNum = parts[0]; decimalNum = parts[1].substr(0, 4); } //获取整型部分转换 if (parseInt(integerNum, 10) > 0) { var zeroCount = 0; var IntLen = integerNum.length; for (var i = 0; i < IntLen; i++) { var n = integerNum.substr(i, 1); var p = IntLen - i - 1; var q = p / 4; var m = p % 4; if (n == '0') { zeroCount++; } else { if (zeroCount > 0) { chineseStr += cnNums[0]; } //归零 zeroCount = 0; chineseStr += cnNums[parseInt(n)] + cnIntRadice[m]; } if (m == 0 && zeroCount < 4) { chineseStr += cnIntUnits[q]; } } chineseStr += cnIntLast; } //小数部分 if (decimalNum != '') { var decLen = decimalNum.length; for (var i = 0; i < decLen; i++) { var n = decimalNum.substr(i, 1); if (n != '0') { chineseStr += cnNums[Number(n)] + cnDecUnits[i]; } } } if (chineseStr == '') { chineseStr += cnNums[0] + cnIntLast + cnInteger; } else if (decimalNum == '') { chineseStr += cnInteger; } return chineseStr; } } }) </script>

[20210713160827619.gif]: /images/20221004/9f398cb46ae5458786349bb84c162926.png