JavaScript 實現的4種數字千位符格式化方法

-Advertisement-

JS實現的4種數字千位符格式化方法所謂的數字千分位形式，即從個位數起，每三位之間加一個逗號。例如“10,000”。針對這個需求，我起初寫了這樣一個函數： // 方法一 function toThousands(num) { var result = [ ], counter = 0; num = ...

JS實現的4種數字千位符格式化方法

所謂的數字千分位形式，即從個位數起，每三位之間加一個逗號。例如“10,000”。針對這個需求，我起初寫了這樣一個函數：

// 方法一
function toThousands(num) {
    var result = [ ], counter = 0;
    num = (num || 0).toString().split('');
    for (var i = num.length - 1; i >= 0; i--) {
        counter++;
        result.unshift(num[i]);
        if (!(counter % 3) && i != 0) { result.unshift(','); }
    }
    return result.join('');
}

方法一的執行過程就是把數字轉換成字元串後，打散為數組，再從末尾開始，逐個把數組中的元素插入到新數組（result）的開頭。每插入一個元素，counter就計一次數（加1），當counter為3的倍數時，就插入一個逗號，但是要註意開頭（i為0時）不需要逗號。最後通過調用新數組的join方法得出結果。

方法一比較清晰易懂，也在項目中用了一段時間。但是直覺告訴我，它的性能並不好。

方法二——方法一的字元串版

// 方法二
function toThousands(num) {
    var result = '', counter = 0;
    num = (num || 0).toString();
    for (var i = num.length - 1; i >= 0; i--) {
        counter++;
        result = num.charAt(i) + result;
        if (!(counter % 3) && i != 0) { result = ',' + result; }
    }
    return result;
}

方法二是方法一的改良版，不把字元串打散為數組，始終對字元串操作。

方法三——迴圈匹配末尾的三個數字

// 方法三
function toThousands(num) {
    var num = (num || 0).toString(), re = /\d{3}$/, result = '';
    while ( re.test(num) ) {
        result = RegExp.lastMatch + result;
        if (num !== RegExp.lastMatch) {
            result = ',' + result;
            num = RegExp.leftContext;
        } else {
            num = '';
            break;
        }
    }
    if (num) { result = num + result; }
    return result;
}

方法三是完全不同的演算法，通過正則表達式迴圈匹配末尾的三個數字，每匹配一次，就把逗號和匹配到的內容插入到結果字元串的開頭，然後把匹配目標（num）賦值為還沒匹配的內容（RegExp.leftContext）。此外，還要註意：

1.如果數字的位數是3的倍數時，最後一次匹配到的內容肯定是三個數字，但是最前面的三個數字前不需要加逗號；
2.如果數字的位數不是3的倍數，那num變數最後肯定會剩下1到2個數字，迴圈過後，要把剩餘的數字插入到結果字元串的開頭。

雖然方法三減少了迴圈次數（一次迴圈處理三個字元），但由於用到了正則表達式，一定程度上增加了消耗。

方法四——方法三的字元串版

// 方法四
function toThousands(num) {
    var num = (num || 0).toString(), result = '';
    while (num.length > 3) {
        result = ',' + num.slice(-3) + result;
        num = num.slice(0, num.length - 3);
    }
    if (num) { result = num + result; }
    return result;
}

事實上，截取末尾三個字元的功能可以通過字元串類型的slice、substr或substring方法做到。這樣就可以避免使用正則表達式。

方法五——分組合併法

// 方法五
function toThousands(num) {
    var num = (num || 0).toString(), temp = num.length % 3;
    switch (temp) {
        case 1:
            num = '00' + num;
            break;
        case 2:
            num = '0' + num;
            break;
    }
    return num.match(/\d{3}/g).join(',').replace(/^0+/, '');
}

先把數字的位數補足為3的倍數，通過正則表達式，將其切割成每三個數字一個分組，再通過join方法添加逗號，最後還要把補的0移除。

方法六——懶人法

// 方法六
function toThousands(num) {
return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}

一直覺得這個格式化是可以通過一條正則表達式替換做出來的，但是需要用到斷言等寫法，無奈自己對這部分不太熟。Google了一下，還真找到了這麼一條正則表達式，這估計是代碼最短的實現。

測試結果

數字	執行5000次消耗的時間（ms）
數字	方法一	方法二	方法三	方法四	方法五	方法六
1	4	1	3	1	14	2
10	14	1	3	0	7	2
100	12	1	2	4	5	3
1000	13	2	3	2	9	5
10000	21	4	3	1	6	3
100000	21	3	2	1	5	6

方法一和方法二的強烈對比表明，字元串操作的效率比數組操作的效率要高得多；方法六的測試結果告訴我們，代碼長短跟性能高低沒有關係。方法四的綜合性能是最好的（但為何num為100的時候，性能有所降低呢，這個實在不解），主要原因是：

1.對比方法一、二，每次操作3個字元而不是1個字元，減少迴圈次數；
2.對比方法三、五、六，沒有使用正則表達式，減少了消耗。

<轉>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

webpack 3.X學習之多頁面打包

作者網站原文：http://hawkzz.com/blog/blog/1514542087911 簡介我們開發不可能只寫一個頁面，每次都要寫很多頁面，這時為了開發效率，我們使用前端自動化工具webpack，那麼webpack是如何打包頁面的呢？又是如何打包多頁面的呢？單頁面打包我們知道要打包單 ...
H5+混合移動app應用開發——開篇

前言經過2個多月的艱苦奮鬥，app的第一個版本已經快完工了，期間遇到了太多的坑，作為一個喜歡分享的人，我當然不會吝嗇分享這爬坑歷程。不要問我有多坑，我會告訴你很多，很多..... 過去一直從事.net web開發工作，直到幾個月前，公司需要開發一個h5+，於是我這樣的全能型選手自然而然就被派去搞w ...
【手記】手機網頁彈出層後屏蔽底層的滑動響應

這個需求場景很常見，但好像到目前還沒有一個正統的做法，以至於一搜這個問題，出來的招數五花八門，典型的包括：給body上overflow:hidden，fixed什麼的。問題在於：手機端可能沒用，或者會讓頁面回到頂部～影響體驗簡單粗暴的屏蔽touchmove。問題在於：彈出層內部需要滾動就不行張 ...
array方法(一)

1:concat 2:join 3：pop 4：push 5：reverse 6：shift 7：slice 8：unshift 9：splice ...
canvas 從初級到XX 2# 讓我們在之前的基礎之上，再邁進一步吧 [中級向] （上）

還是老樣子，先啰嗦一點前言。最近各種事務纏身，所以也就隔了比較長的時間才開始碼這篇文。希望不會這麼快就過氣。好了，接下來就開始碼代碼。（寫到中途，突然感覺到的。本篇設計大量初中物理知識，請懷念的往下看）這次不像之前，是已經寫好的文件，拿出來解析一波，就糊弄出來了一篇隨筆。總之，我就一邊的編代碼 ...
javascript 通過鍵名獲取鍵盤的keyCode

不廢話，直接看代碼，需要的根據需求完善。例：getKeyCode('a') 返回：65 ...
JavaScript：AOP實現

AOP的概念，使用過Spring的人應該都不陌生了。Dojo中，也是支持AOP的。對於JavaScript的其他框架、庫不知道有沒有AOP的支持。相信即便沒有支持，也不會太遠了。下麵就介紹一下使用JavaScript實現AOP。 AOP的思想就是在目標方法前後加入代碼： var result=nul ...
瀏覽器的相容性問題，以及解決辦法

相容性相容性：瀏覽器相容問題和適配問題統稱為相容性問題解決辦法 1.hack語法，控制解決辦法  eg: 說明 ...