在我的 Vue 專案中，有用到 Fileters的成員屬性。
那這個 Filters 裡面有撰寫千分號的功能，目的是為每一個數值都加上千分號，讓使用者的閱讀上有更好的體驗。
那本篇就是用來解析一下專案中的千分號函式，每一個部分各代表什麼功能，好讓之後要用的時候，不會用太多時間來回想XDD

千分號函式本體

這邊先放上一個千分號的簡易範例，它有用到 Vue 來做撰寫。

Number.prototype.toFixed(n)

代表要保留該數字的小數點後第 n 位，若 n 為 0 的話，就代表小數點後面的數值都不要。

1 2	let num = 123.45 console.log(num.toFixed(0)) // 123 ，會把小數點後面的內容全部刪掉

String.prototype.replace()

進入到千分號主要功能的重點部分囉。
replace() 這個方法會傳回一個新字串，此新字串是透過將原字串與 pattern 比對，以 replacement 取代吻合處而生成。
在上面的範例中，千分號的 replace 是用 function 當作第二個參數。
當原字串的內容有跟 pattern 相吻合時，這個 function 就會被啟動。
這個function的回傳結果，會被用做要取代與原字串吻合部分的內容。

replace中的 g 和 i 的意思

在 replace 中，你可以看到像 var re = /apples/gi; 後面的 g 和 i。
g 代表 global 如果你沒有在你的 pattern 中加入 g，則 js 的 replace預設會只在第一個遇到吻合的地方修改，若你加入 g，則會在每一個吻合的地方都做修改。
i 代表 ignore，表示忽略吻合部分的大小寫，只要內容吻合就取代，例如’appples’, ‘Apples’，因為內容都一樣，且有帶入 i，所以，會就不管大小寫的部分。

replace 的第一個參數

通常在 replace 方法的第一個參數都會放要 pattern (與原字串相符合的內容)，接著再透過第二參數 replacement 來取代第一個部分。
但在上面的範例中，第一個參數的內容比較不一樣，它是有用到正則表示式的語法。
第一個參數 /./g 用意是確保取出所有的值，.號在此是比對任何一個字元，但不包含換行字元，所以，這一行的效果就是原字串中的每一個字元，都要被比對。
注意不要跟/. 搞混了
不要跟比對.搞混了，如果你要比對.的話，是要寫\.，例如'A\.'，這是用來比對'A.'這個字元，其中的\符號，是用來避開.本身的特殊意義。
注意在.號附近的斜線符號'/./g', '\.'方向是不一樣的。

replace 的第二個參數

上面有講了 replace 方法的第二個參數是放 replacement。
那在上面的範例中，是放了一個 function，代表當字串中的所有符合 pattern 的地方，都會被 function 回傳的字串所取代。

function 中的參數和判斷式用意

function(c, i, a)
c 代表當前被遍歷到的字元內容，，要注意的是它會從字串的最左邊開始提取字元喔，比如有一個字串 abcd，隨著字串被遍歷，c 所代表的字元內容會改變，從a->b->c->d ，
i 代表 index，它會遍歷整個字串，若今天有個字串是1001，那這個i會從第0個字元，掃到第3個字元。若今天的字串是12546，那這個i會從第0個字元，掃到第4個字元。
a 代表原始字串

函式中的判斷式
接下來是函式中的判斷式
return i && c !== '.' && ((a.length - i) % 3 === 0) ? ',' + c : c

i && c !== '.'
這一邊是代表 i 和 c !== '.' 都要為 true。
代表 i 要有數值，而且 c 當下的字元不可以是 .，也就是當 c是小數點時，就不需要用千分號來取代它。
((a.length - i) % 3 === 0)
這一邊是代表，當下i遍歷到字元，從左邊數來是不是3的倍數，因為，千分號每隔3個數字，就要加上一個千份號。
規則式 ',' + c : c
如果前面兩點都符合的話，會將當下的字元 c 前面再加上千分號也就是逗號,。
如果前面不符合的話，救回傳原本的 c 字元。

小結論

以上的解析，就是千分號整體的來龍去脈囉，以後再遇到千分號的情境的話，就知道要怎麼撰寫囉~

參考文獻:

http://ccckmit.wikidot.com/regularexpression
六角學園-Vue課程-Filter 自訂畫面資料呈現格式-問答區

Landy Blog

replace-用在千分號的方法介紹