國際化之數字價格千分位分隔符 toLocaleString()

水果哥發表於2018-12-28

之前在只有單個國家的時候我們可以通過對數字進行分割來達到千分位分隔符的效果。

給價格加入符號作為千分位， 預設使用逗號

function formatPrice (number, sign) {
  !sign && (sign = ',')
  var parts = number.toString().split('.')
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, sign)
  return parts.join('.')
}
複製程式碼

但隨著國家的增多，各個國家的分隔符各不相同，小數點的分隔符也不相同。比如印尼(3199=>3.199)，法國（3199=>3 199)，美國（3199=>3,199）

以之前的通過分割的方式來實現千分位分割已經不能滿足之前的效果。[Number.prototype.toLocaleString(locales [, options]) 為我們帶來了一種新的解決方法。

使用 locales 引數

function formatNum (num, local) {
    if (typeof num !== 'number') {
        num = Number(num)
    }
    const site = {
        'in': 'en-IN',
        'id': 'id-ID',
        'us': 'en-US',
        'uk': 'en-GB',
        'es': 'es-ES',
        'fr': 'fr-FR',
        'it': 'it-IT',
        'ru': 'ru-RU',
        'hk': 'zh-HK',
        'tw': 'zh-TW'
    }
    let name = site[local] || 'en-GB'
    return num.toLocaleString(name)
}
複製程式碼

不同國家/地區可以參考下表： www.lingoes.net/en/translat…
價格單位可參考下表： www.currency-iso.org/en/home/tab…

如果還有使用貨幣單位的需求可以使用options引數
style
格式化時使用的樣式.可能的值有“decimal”表示純數字格式 , “currency”表示貨幣格式, 和"percent"表示百分比格式; 預設值是 "decimal".
currency
在貨幣格式化中使用的貨幣符號. 可能的值是ISO的貨幣程式碼 (the ISO 4217 currency codes,) 例如"USD" 表示美元, "EUR" 表示歐元, or "CNY"是人民幣 — 更多請參考 Current currency & funds code list. 沒有預設值,如果樣式是“currency”,必須提供貨幣屬性. minimumFractionDigits
使用的小數位數的最小數目.可能的值是從0到20;預設為普通的數字和百分比格式為0;預設為貨幣格式是由國際標準化組織列表( ISO 4217 currency code list )提供(如果列表中沒有提供則值為2).

let price = 3199
price.toLocaleString('id-ID', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 2
}) // "€3.199,00"
複製程式碼

相容性：
這個API雖說在大部分瀏覽器上都已經支援，但在部分手機上還是存在不小問題。因此要適配移動端polyfill必不可少。 polyfill-Number.toLocaleString-with-Locales

相關文章