摘要：說明本文實(shí)現(xiàn)了一個(gè)從阿拉伯?dāng)?shù)字到中文數(shù)字，以及從中文數(shù)字到阿拉伯?dāng)?shù)字的轉(zhuǎn)換算法。源代碼在這里阿拉伯?dāng)?shù)字轉(zhuǎn)中文給定一個(gè)阿拉伯?dāng)?shù)字，把它轉(zhuǎn)變?yōu)闈h語(yǔ)表示的數(shù)字。

本文實(shí)現(xiàn)了一個(gè)從阿拉伯?dāng)?shù)字到中文數(shù)字，以及從中文數(shù)字到阿拉伯?dāng)?shù)字的轉(zhuǎn)換算法。
同時(shí)用Vuejs和Angularjs同時(shí)實(shí)現(xiàn)了一遍，對(duì)比了一下這兩個(gè)框架的優(yōu)劣。在本例中，Vuejs的方便靈活性完勝Angularjs。

源代碼在這里

給定一個(gè)阿拉伯?dāng)?shù)字，把它轉(zhuǎn)變?yōu)闈h語(yǔ)表示的數(shù)字。

根據(jù)中文的計(jì)數(shù)方法，可以把阿拉伯?dāng)?shù)字按4個(gè)一組分成若干section，每個(gè)section從低到高的單位分別為 “”，“萬(wàn)”，“億”，“萬(wàn)億”。

每個(gè)section內(nèi)的轉(zhuǎn)換方法是一樣的，比如1234，就是"一千二百三十四"，加上對(duì)應(yīng)的單位，如“萬(wàn)”，就是“一千二百三十四萬(wàn)”。但是在其中又有些細(xì)節(jié)需要注意：

結(jié)尾的零都忽略，如1200，就是一千二百

中間的零，只需要用一個(gè)零表示，如1004，是一千零四

如果整個(gè)section都是0，全部忽略

如果section在10到19之間，則十位可以省略一；否則，十位上的“一”都不能省。如12就是“十二”，312就是“三百一十二”

給定一個(gè)中文數(shù)字，如“一千二百三十四萬(wàn)”，把它們轉(zhuǎn)換成阿拉伯?dāng)?shù)字

跟上面類似，以“萬(wàn)”，“億”，“萬(wàn)億”為分割位，先把中文分成若干section，每個(gè)section的轉(zhuǎn)換方法一樣，然后section數(shù)值乘以相應(yīng)的權(quán)重，如section為“萬(wàn)”就是乘以10000，“億”是乘以100000000，最低位的section，權(quán)重就是1。
將每個(gè)section的結(jié)果累加就是最終結(jié)果。

每個(gè)section最多8個(gè)漢字，都是以“數(shù)字+單位”的形式成對(duì)出現(xiàn)。將數(shù)字*單位的結(jié)果累加起來就是最終結(jié)果。單位從低到高就是1，10， 100， 1000。

需要注意的細(xì)節(jié)有：

“零”忽略即可

如果第一位是“十”，則數(shù)字默認(rèn)為一。

分別通過Vuejs和angularjs實(shí)現(xiàn)了一遍，正好可以對(duì)比一下二者的不同。大部分代碼二者都差不多。

但是為了方便閱讀，我對(duì)阿拉伯?dāng)?shù)字采用了千分位分隔，當(dāng)用戶在輸入框中輸入完成按下回車后，輸入框內(nèi)的阿拉伯?dāng)?shù)字自動(dòng)用逗號(hào)分隔。差異注意出現(xiàn)在這個(gè)實(shí)現(xiàn)方法上。

// html視圖：


// js邏輯：
var app = new Vue({
    el: "#app",
    data: {
        ArabNum: 0,
        ChineseNum: "",
        //ChineseSymbole: ["零", "壹", "貳", "叁", "肆", "伍", "陸", "柒", "捌", "玖"],
        ChineseSymbole: ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"],
        ChineseSection: ["", "萬(wàn)", "億", "萬(wàn)億"],
        //ChineseUnit: ["", "拾", "佰", "仟"],
        ChineseUnit: ["", "十", "百", "千"],
        ChineseUnitArab: {
            "零": 0,
            "一": 1,
            "二": 2,
            "三": 3,
            "四": 4,
            "五": 5,
            "六": 6,
            "七": 7,
            "八": 8,
            "九": 9,
            "十": 10,
            "百": 100,
            "千": 1000,
            "萬(wàn)": 10000,
            "億": 100000000,
            "萬(wàn)億": 1000000000000,
        }
    },
    // 區(qū)別主要在這里：
    filters: {
        thousandth: {
            read: function(v) {
                var str = "";
                while (v > 0) {
                    var left = "" + (v % 1000);
                    v = Math.floor(v / 1000);
                    if (v > 0) {
                        while (left.length < 3) {
                            left = "0" + left;
                        }
                    }
                    if (str == "") {
                        str = left;
                    } else {
                        str = left + "," + str;
                    }
                }
                return str;
            },
            write: function(v) {
                return parseInt(v.replace(/,/g, ""));
            },
        },
    },
    methods: {
        Arab2Chn: function(v) { ... },
        Arab2Chn_section: function(v) { ... },
        Chinese2Arab: function(str) { ... },
        Chinese2Arab_section: function(str) { ... },
    },
    computed: { ... },
})

Vuejs方便的地方在于，filter可以用在v-model中，只要分別設(shè)計(jì)read和write函數(shù)即可實(shí)現(xiàn)雙向綁定。read用于model到view的轉(zhuǎn)換，write用于view到model的轉(zhuǎn)換。

相比于Vuejs，如果在ng-model中直接使用filter，會(huì)報(bào)錯(cuò)：

// error:
Expression "ArabNum|thousandth" is non-assignable

為了實(shí)現(xiàn)和Vuejs類似的邏輯，我首先google了一下，發(fā)現(xiàn)只能通過directive實(shí)現(xiàn)：

app.directive("thousandth", function() {
    return {
        require: "ngModel",
        link: function(scope, elm, attr, ngModel) {
            function thousandth(v) {
                var str = "",
                    v = "" + v;
                v = v.replace(/,/g, "");
                while (v > 0) {
                    var left = "" + (v % 1000);
                    v = Math.floor(v / 1000);
                    if (v > 0) {
                        while (left.length < 3) {
                            left = "0" + left;
                        }
                    }
                    if (str == "") {
                        str = left;
                    } else {
                        str = left + "," + str;
                    }
                }
                return str;
            }

            elm.on("blur", function(v) {
                elm.val(thousandth(ngModel.$modelValue));
            });
            // model -> view
            ngModel.$formatters.push(function(data) {
                return thousandth(data)
            })
            // view -> model
            ngModel.$parsers.push(function(v) {
                v = "" + v;
                return parseInt(v.replace(/,/g, ""));
            });
        }
    }
})

可以看到，首先ng的語(yǔ)法要麻煩很多。而且$formatters只有在內(nèi)部的model被改變時(shí)，才會(huì)對(duì)view生效。比如input改變時(shí)，$parsers先調(diào)用(V-->M)，返回值直接給了ngModel，但是$formatters不會(huì)調(diào)用，即M-->V不會(huì)被調(diào)用，否則 M修改V，V又修改M，就是死循環(huán)了。

只有你通過程序修改了ArabNum后，$formatters才會(huì)調(diào)用(M-->V)。所以，必須通過jquery的方式，在blur函數(shù)中，對(duì)element的value進(jìn)行直接修改，才能實(shí)現(xiàn)上述Vue的效果。

只要仔細(xì)一點(diǎn)，耐心一點(diǎn)，兩個(gè)數(shù)字表示方式的轉(zhuǎn)換還是比較容易實(shí)現(xiàn)的。

通過對(duì)比Vue和angular可以看到，Vue確實(shí)比Ng要方便些。這只是其中的一個(gè)方面。