1. 程式人生 > 實用技巧 >JS 實現貨幣格式化

JS 實現貨幣格式化

今天被問到貨幣格式化的問題

思路很清晰,但是讓我寫的時候,問題來了,確實是知易行難

首先肯定得有 ,假設為 123456.78
我們需要將他格式化為 ¥123,456.78
拋開小數位不管,我們需要獲取整數位的數字字串
預設應該是以千分位加一個,

我的思路是將整數位的字串倒著擷取,每3位數一組

那麼問題來了,js擷取字串的方法有那些?
slicesubstringsubstr

用得最多的大概是slice吧?!一提起slice,腦子裡閃過的又有splicesplit

slice、substring、substr

slice

str.slice(beginIndex[, endIndex])

引數

  • beginIndex
    從該索引(以 0 為基數)處開始提取原字串中的字元。如果值為負數,會被當做 strLength + beginIndex 看待,這裡的strLength 是字串的長度(例如, 如果 beginIndex 是 -3 則看作是:strLength - 3)
  • endIndex
    可選。在該索引(以 0 為基數)處結束提取字串。如果省略該引數,slice() 會一直提取到字串末尾。如果該引數為負數,則被看作是 strLength + endIndex,這裡的 strLength 就是字串的長度(例如,如果 endIndex 是 -3,則是, strLength - 3)。

返回值

返回一個從原字串中提取出來的新字串

substring

str.substring(indexStart[, indexEnd])

引數

  • indexStart
    需要擷取的第一個字元的索引,該索引位置的字元作為返回的字串的首字母。
  • indexEnd
    可選。一個 0 到字串長度之間的整數,以該數字為索引的字元不包含在擷取的字串內。

返回值

包含給定字串的指定部分的新字串。

substr

str.substr(start[, length])

引數

  • start
    開始提取字元的位置。如果為負值,則被看作 strLength + start,其中 strLength 為字串的長度(例如,如果 start 為 -3,則被看作 strLength + (-3))。
  • length
    可選。提取的字元數。

區別

  1. slice,substring,substr 都是用來擷取字串或陣列的,然而陣列只能使用slice,這三者如果不傳引數,則都返回全部內容;
  2. 引數為正數時,只有substring會自動調換順序,slice在第一引數大於第二引數時會無效返回空,而substr無所謂,除非給定的第一引數超出了源資料長度才會返回空;
  3. 引數為負數時,只有substring會永遠無效,即不要給substring使用負值!slice可認為從尾部倒數,或者直接用源資料長度加上這個負值換算為正數,然後結論依然遵循第2條所述;而substr,則只適用第一引數為負數,換算方法同slice,其第二引數代表擷取的個數,是不能為負數的;
  4. 據MDN所提示 (連結: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substr) ,“ECMAscript 沒有substr方法進行標準化,因此不推薦使用它”。

用slice實現

本來打算使用substr的,既然不推薦,那麼還是使用slice

function formatMoney(money, symbol) {
    symbol = symbol || '¥' // 預設是RMB
    let str = money.toFixed(2)  // 只取2位小數
    let l = str.split('.')[0] // 獲取整數位
    let r = str.split('.')[1] // 獲取小數位
    let arr = [] // 用於儲存結果

    let len =Math.ceil(l.length / 3) // 3位數一個 `,`
    for (let i = 0 ; i < len; i ++) {
        arr.unshift(l.slice(-3*(i + 1), -3*i || undefined)) // 如果傳(-3,0)獲取不到引數,將0換成undefined相當於沒傳
        if (i !== length - 1) { // 最後一次擷取不加 `,`了
            arr.unshift(',')
        }
    }
    return symbol + arr.join('') + '.' + r
}

這是我覺得容易理解的方法之一