基于JavaScript編寫一個簡易的數(shù)字轉(zhuǎn)中文功能
更新時間：2026年01月27日 08:52:14 作者：剪刀石頭布啊
這篇文章主要為大家詳細介紹了如何基于JavaScript編寫一個簡易的數(shù)字轉(zhuǎn)中文功能,雖然是功能看起來很簡單,但是要是沒有寫過這類功能的話,那么可能會無從下手,下面小編就和大家詳細介紹一下吧
前言
今天我們寫一個一個簡易的數(shù)字轉(zhuǎn)中文的效果，雖然是功能看起來很簡單，但是要是沒有寫過這類功能的話，那么可能會無從下手，下面就簡單講一下寫這類邏輯的過程
思路
實現(xiàn)簡易思路：
- 大單位是以萬、億、兆等為單位的，4位小數(shù)一組，因此需要對數(shù)字進行四位一組分組操作，在后面追加單位即可
- 除了大單位，中間的小單位則是個十百千，基本都是一致，因此使用同一種統(tǒng)一處理方案，其中個位沒有單位
- 除了單位還有每一位數(shù)字的翻譯工作，即：
0~9=>零~九 - 淡出處理中文語法中特有的情況，例如：開頭不顯示一十而是十，零中間作為間隔只能有一個，連續(xù)的零沒有大單位，以及各位為零的處理等
- 入?yún)⑻幚?這里簡單處理一下)
代碼實現(xiàn)
//數(shù)字轉(zhuǎn)中文(要支持小數(shù)，可以在擴展，小數(shù)就比較簡單了)
//入?yún)閿?shù)字，因此不考慮開頭為零的情
const convertChineseNumber = (number) => {
if (isNaN(number)) return "NAN";
const units = ["", "萬", "億", "兆", "京", "垓"];
const baseUnits = ["", "十", "百", "千"];
const cNumbers = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
//分割四位一組，反轉(zhuǎn)數(shù)組，從后往前加單位
const numGroup = String(number)
.replace(/\B(?=(\d{4})+$)/g, " ") //使用前瞻運算符來處理四位一體
.split(" ")
.reverse();
let result = "";
//遍歷從后往前加單位
numGroup.forEach((numStrings, idx) => {
//處理全零的情況，不應該帶單位，由于需要間隔0的情況，保留一個零
if (numStrings === "0000") {
result = '零' + result
return;
}
//有數(shù)的先添加大單位
result = units[idx] + result;
//分割四位一組的小數(shù)字，仍然是反轉(zhuǎn)，從后往前加單位
numStrings
.split("")
.reverse()
.forEach((item, idx) => {
//處理每個后面的單位，其中個位沒有單位，0也沒有單位
if (idx !== 0 && item !== "0") {
result = baseUnits[idx] + result;
}
//數(shù)字翻譯
result = cNumbers[Number(item)] + result;
});
});
//處理結(jié)果中可能存在的中文讀寫問題，例如不會存在連續(xù)的零，開頭不會一十
//零后面不應該有單位，非零整數(shù)結(jié)尾不會讀零
return result
.replace(/零+/g, "零")
.replace(/^(一十)/, "十")
.replace(new RegExp(`零([${units.join("")}]{1})`, "g"), "$1") //小單位處理了大單位也要處理
.replace(/(.+)零$/, "$1")
};
測試案例
//我們試驗幾個案例 const numbers = [ convertChineseNumber(0), convertChineseNumber(1234567899), convertChineseNumber(101234567899), convertChineseNumber(100234567899), convertChineseNumber(101034567899), convertChineseNumber(101030067899), convertChineseNumber(101030067890), convertChineseNumber(101030007899), convertChineseNumber(100000007899), convertChineseNumber(100070007899), convertChineseNumber(100007007899), ]; console.log(numbers); //目前來看返回結(jié)果是對的，如果感覺哪里不對，可以在填填補補就行了 [ '零', '十二億三千四百五十六萬七千八百九十九', '一千零一十二億三千四百五十六萬七千八百九十九', '一千零二億三千四百五十六萬七千八百九十九', '一千零一十億三千四百五十六萬七千八百九十九', '一千零一十億三千零六萬七千八百九十九', '一千零一十億三千零六萬七千八百九十', '一千零一十億三千萬七千八百九十九', '一千億零七千八百九十九', '一千億七千萬七千八百九十九', '一千億零七百萬七千八百九十九' ]
知識擴展
下面小編為大家整理了一些其他js實現(xiàn)數(shù)字轉(zhuǎn)中文的方法，希望對大家有所幫助
1.js如何實現(xiàn)阿拉伯數(shù)字轉(zhuǎn)中文大寫數(shù)字
/**
* @description 數(shù)字轉(zhuǎn)中文數(shù)碼
*
* @param {Number|String} num 數(shù)字[正整數(shù)]
* @param {String} type 文本類型，lower|upper，默認upper
*
* @example number2text(100000000) => "壹億元整"
*/
export const number2text = (number, type = "upper") => {
// 配置
const confs = {
lower: {
num: ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"],
unit: ["", "十", "百", "千", "萬"],
level: ["", "萬", "億"]
},
upper: {
num: ["零", "壹", "貳", "叁", "肆", "伍", "陸", "柒", "捌", "玖"],
unit: ["", "拾", "佰", "仟"],
level: ["", "萬", "億"]
},
decimal: {
unit: ["分", "角"]
},
maxNumber: 999999999999.99
};
// 過濾不合法參數(shù)
if (Number(number) > confs.maxNumber) {
console.error(
`The maxNumber is ${confs.maxNumber}. ${number} is bigger than it!`
);
return false;
}
const conf = confs[type];
const numbers = String(Number(number).toFixed(2)).split(".");
const integer = numbers[0].split("");
const decimal = Number(numbers[1]) === 0 ? [] : numbers[1].split("");
// 四位分級
const levels = integer.reverse().reduce((pre, item, idx) => {
let level = pre[0] && pre[0].length < 4 ? pre[0] : [];
let value =
item === "0" ? conf.num[item] : conf.num[item] + conf.unit[idx % 4];
level.unshift(value);
if (level.length === 1) {
pre.unshift(level);
} else {
pre[0] = level;
}
return pre;
}, []);
// 整數(shù)部分
const _integer = levels.reduce((pre, item, idx) => {
let _level = conf.level[levels.length - idx - 1];
let _item = item.join("").replace(/(零)\1+/g, "$1"); // 連續(xù)多個零字的部分設(shè)置為單個零字
// 如果這一級只有一個零字，則去掉這級
if (_item === "零") {
_item = "";
_level = "";
// 否則如果末尾為零字，則去掉這個零字
} else if (_item[_item.length - 1] === "零") {
_item = _item.slice(0, _item.length - 1);
}
return pre + _item + _level;
}, "");
// 小數(shù)部分
let _decimal = decimal
.map((item, idx) => {
const unit = confs.decimal.unit;
const _unit = item !== "0" ? unit[unit.length - idx - 1] : "";
return `${conf.num[item]}${_unit}`;
})
.join("");
// 如果是整數(shù)，則補個整字
return `${_integer}元` + (_decimal || "整");
};
2.js實現(xiàn)萬億數(shù)字轉(zhuǎn)中文
思路：首先創(chuàng)建一個函數(shù)，它的主要功能是將一個輸入的阿拉伯數(shù)字（如 1234）轉(zhuǎn)換為對應的中文數(shù)字（如 "一千二百三十四"）。這個過程包括了數(shù)字與中文字符的映射、單位的正確拼接以及一些特殊情況的處理，比如零的情況。
具體實現(xiàn)：
1. 數(shù)字與中文的映射
首先，定義兩個數(shù)組：
const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; const units = ['', '十', '百', '千', '萬', '十萬', '百萬', '千萬', '億', '十億', '百億', '千億', '萬億'];
chineseNumbers數(shù)組包含了數(shù)字 0 到 9 對應的中文字符。units數(shù)組包含了中文數(shù)字的單位，如 "十"、"百"、"千"、"萬"、"億" 等。
當輸入的數(shù)字逐位轉(zhuǎn)換時，每個位數(shù)字會映射為 chineseNumbers 中的對應字符，而每一位的單位則是通過 units 數(shù)組中的單位進行拼接。
2. 處理特殊情況：數(shù)字為零
在中文中，數(shù)字零有著特殊的語法規(guī)則。多個零不能連續(xù)出現(xiàn)，且如果數(shù)字的最后一位是零，則最終輸出時不應再添加“零”。因此，代碼中引入了 zeroFlag 標志，用來表示是否已經(jīng)遇到零：
let zeroFlag = false; // 是否在零的位置
當遍歷到零時，如果之前已經(jīng)添加過零，則跳過該零，否則就把“零”添加到字符串中，并將 zeroFlag 設(shè)置為 true，表示后續(xù)的零就不再重復添加。
3. 數(shù)字轉(zhuǎn)換的核心部分
通過以下代碼，數(shù)字逐位從右向左進行拆解：
while (num > 0) {
let part = num % 10;
if (part === 0) {
if (!zeroFlag) {
str = chineseNumbers[0] + str; // 添加“零”
zeroFlag = true;
}
} else {
str = chineseNumbers[part] + units[unitPos] + str;
zeroFlag = false;
}
num = Math.floor(num / 10); // 去除個位數(shù)字
unitPos++; // 移動到下一個單位
}
- 在循環(huán)中，每次通過
num % 10獲取數(shù)字的最后一位，并使用chineseNumbers[part]將數(shù)字轉(zhuǎn)換為中文字符。 - 如果該位數(shù)字為零，則檢查是否需要添加“零”。如果零還沒有添加過，則將“零”添加到結(jié)果字符串中。
- 非零數(shù)字會被轉(zhuǎn)換成相應的中文字符，并根據(jù)當前的單位（
units[unitPos]）進行拼接。例如，個位的數(shù)字會拼接“”，十位數(shù)字會拼接“十”，百位數(shù)字會拼接“百”，依此類推。
每次處理完一位數(shù)字后，使用 Math.floor(num / 10) 將數(shù)字向右移一位，并且單位位置 unitPos 增加 1，指向下一個單位。
4. 處理 “十”的特殊情況
在中文數(shù)字中，對于 10 到 19 之間的數(shù)字，不需要在“十”前面加上“一”。例如，數(shù)字 15 應該轉(zhuǎn)換為“十五”而不是“一十五”。為了解決這個問題，代碼中加入了以下判斷：
if (str.startsWith('一十')) {
str = str.substring(1);
}
這段代碼會檢查轉(zhuǎn)換后的字符串是否以“十”開頭（即是否是10~19之間的數(shù)字），如果是的話，直接去掉前面的“一”，生成正確的中文形式。
5.函數(shù)的返回值
最終，函數(shù)返回的是經(jīng)過轉(zhuǎn)換后的中文數(shù)字：
str = str.replace(/零$/, '');//去掉末尾的零 return str;
現(xiàn)在還有個問題，如果數(shù)太大會出現(xiàn)單位重復的問題，例如，數(shù)字 1110016543 應該是 十一億一千零一萬六千五百四十三 而不是 十億一億一千萬零一萬六千五百四十三，解決這個問題我們需要寫一個處理函數(shù)。
6.處理函數(shù)
function handelr(str) {
let lastW = str.lastIndexOf('萬');// 獲取字符串中最后一個“萬”字符的位置
let len = str.length;
let temp='', temp2='', flagw='';//用于暫存處理后的字符串和于標記是否遇到“萬億”
// 判斷字符串中包含"萬億"改變標記狀態(tài)
if (str.indexOf('萬億') > 0) {
flagw = true;
}
//遍歷字符串去除多余‘萬'字
for (let i = 0; i < len; i++) {
if (i == lastW) {
temp = temp.concat(str[i]);
}
//判斷是否保留第一個'萬'字
if (str[i] == '萬') {
if (!flagw) {
continue;
}
flagw = false;
}
temp = temp.concat(str[i]);
}
//處理多余的'億'字
let len2 = temp.length;
let lasty = temp.lastIndexOf('億');
for (let j = 0; j < len2; j++) {
if (j == lasty) {
temp2 = temp2.concat(temp[j]);
}
if (temp[j] == '億') {
continue;
}
temp2 = temp2.concat(temp[j]);
}
return temp2;// 返回最終的處理結(jié)果
}
最后
上面的整體思路還是可以得，實際還是有所欠缺的，例如：不支持小數(shù)，對于大數(shù)字的單位支持也不夠多，甚至一些讀法的場景可能考慮還不夠完善
需要完善的話，實際按照上面思路補充一下就行了
到此這篇關(guān)于基于JavaScript編寫一個簡易的數(shù)字轉(zhuǎn)中文功能的文章就介紹到這了,更多相關(guān)JavaScript數(shù)字轉(zhuǎn)中文內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案
在前端直接讀取并原樣展示W(wǎng)ord文檔是一個相對復雜的任務,因為Word文檔的格式(如.doc或.docx)與Web技術(shù)棧使用的格式(HTML、CSS)不兼容,這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了ES6的Fetch異步請求的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
layui lay-verify form表單自定義驗證規(guī)則詳解
今天小編就為大家分享一篇layui lay-verify form表單自定義驗證規(guī)則詳解，具有很好的參考價值，相信我對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了ES6 Array常用擴展的應用,結(jié)合實例形式分析各種常見擴展方法針對Array數(shù)組的轉(zhuǎn)換、遍歷、查找、運算等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
微信小程序?qū)崙?zhàn)之上拉(分頁加載)效果(2)
這篇文章主要介紹了微信小程序?qū)崙?zhàn)之上拉加載、分頁加載效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
js對列表中第一個值處理與jsp頁面對列表中第一個值處理的區(qū)別詳解
本文是對js對列表中第一個值處理與jsp頁面對列表中第一個值處理的區(qū)別進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
本文主要介紹了JS中splice添加或刪除數(shù)組元素,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
這篇文章主要介紹了js調(diào)試工具Console命令詳解,需要的朋友可以參考下2014-10-10
這篇文章主要為大家詳細介紹了微信小程序地圖實現(xiàn)展示線路，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
JavaScript實現(xiàn)的select點菜功能示例
這篇文章主要介紹了JavaScript實現(xiàn)的select點菜功能,涉及javascript動態(tài)操作頁面元素及元素遍歷相關(guān)技巧,需要的朋友可以參考下2017-01-01