問題描述

今天在處理一個數字的格式顯示問題時，遇到下面的一些需求：

• 可以顯示千分符
• 可以顯示百分比
• 可以顯示小數位數

如下圖，如果勾選的話就使能該項設定。

百分比和小數位數比較好解決，百分比只需要在源數字後面加兩個零再加上百分號；小數只需要在小數點後面加零即可。最主要的是千分符的處理，好，就來說千分符。

千分符問題

數字千分符的處理有很多處理方案，最主要的有下面幾種。

方法一：迴圈遍歷

思路：

將數字轉換成字串，然後倒序遍歷取值，每取3個字元插入一個,逗號，直到遍歷到第一個字元。

程式碼很簡單，如下：

function numberFormat(num) {
    let result = '';
    let count = 1;
    let nums = num.toString();
    for (let i = nums.length - 1; i >= 0; i--) {
        result = nums.charAt(i) + result;
        if (!(count % 3) && i != 0) { 
            result = ',' + result; 
        }
        count++;
    }
    return result;
}

numberFormat(12345678); // 12,345,678
 

方法二：正則

思路：

該正則的思路就是從數字的第一個字元開始找，找到滿足該數字後面的數字個數為3的倍數的這個數字，然後在該數字替換成數字,的形式，然後繼續往下找......

語法如下：

let regExp = /(\d)(?=(\d{3})+$)/g;

示例：

String(12345678).replace(/(\d)(?=(\d{3})+$)/g, "$1,");

解釋：

首先\d 表示數字，然後以?=(\d{3})+ 結尾的即滿足條件。所以最主要是這個 ?=(\d{3})+ 表示式。

正向預測 ?=n，表示匹配任何其後緊接指定字串 n 的字串。 再結合\d 表示，如果一個數字後面滿足字串n這個規則，那麼就將匹配到的這個數字（假如是1）替換成1,

所以現在的問題是字串n這個規則是什麼，是(\d{3})+ 這個東西，這個表示數字的個數為3的倍數（倍數為1~n之間）。

所以整個表示式的意思就是：從第一個數字開始看起，看這個數字後面的數字個數是不是3的倍數，是的話將這個數字（假如是1）替換成1,的形式，然後繼續下一個數字直到結尾。

說明：

• g是表示全域性匹配的修飾符，全域性匹配指查詢所有匹配而非在找到第一個匹配後停止。
• $是表示結尾的量詞，如n$，匹配的是任何以n為結尾的字串。
• \d是查詢數字的元字元。
• n{X}是匹配包含 X 個 n 的序列的字串的量詞。
• + 匹配前面的子表示式一次或多次;* 匹配前面的子表示式0次或多次。?匹配前面的子表示式0次或1次，或指明一個非貪婪限定符。
• ?=n正向預查，用於匹配任何其後緊接指定字串 n 的字串。
• match() String物件的方法，作用是找到一個或多個正則表示式的匹配。
• replace() String物件的方法，作用是替換與正則表示式匹配的子串。
• \B是表示匹配非單詞邊界的元字元，與其互為補集的元字元是\b，表示匹配單詞邊界。

方法三（推薦