四兩撥千斤,一招搞定數字格式化問題

摘自:https://www.cnblogs.com/lvonve/p/12067970.html

問題描述

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

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

如下圖,如果勾選的話就使能該項設置。

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

千分符問題

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

方法一:循環遍歷

思路:

將數字轉換成字符串,然後倒序遍歷取值,每取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,表示匹配單詞邊界。

方法三(推薦👍):toLocaleString

根據 MDN 解釋, number.toLocaleString() 方法返回這個數字number在特定語言環境下的表示字符串。

簡單的使用:

var number = 3500;

console.log(number.toLocaleString()); // 3,500

我們直接調用該函數就可以得到問題的結果。但其實,該函數的功能不止於此,這就需要分析它的參數了。

語法:

numObj.toLocaleString([locales [, options]])
  • locales: (可選)表示以哪國的數字表示形式。
  • options: (可選)表示數字的顯示樣式(比如要不要顯示小數位數,顯示幾位?要不要顯示百分比?等等)

locales

一般可以填下面幾個數值:

  • en-US : 美國( 中文場景下默認值)
  • zh-CN : 中國
  • en-GB : 英國
  • ko-KR : 韓國
  • ar-EG : 阿拉伯
  • de-DE : 德國
  • en-IN : 印度
  • ja-JP : 日本
  • ...
  • (更多的國家參考鏈接:ISO Language Code Table

options

options對象的屬性就有很多了,下面列舉一個常用的屬性。

  • style : 默認爲 decimal ,表示十進制格式, currency表示貨幣格式, percent表示百分比格式。
  • currency : 如果style設置爲currency,則該屬性設置貨幣符號(USD 表示美元, EUR 表示歐元, or CNY是人民幣等等,更多符號參考鏈接: https://www.currency-iso.org/en/home/tables/table-a1.html )
  • useGrouping : 是否使用千分符,默認爲true
  • minimumIntegerDigits :設置整數最小位數(當整數位數不足時,在前面加0)
  • minimumFractionDigits : 設置小數數最小位數。

而這些屬性不僅可以滿足文章開頭提出的問題,也可以滿足我們日常常用到的數字的格式表示。那麼我們就來康康怎麼使用吧!

示例:

  • 設置整數部分爲5位,小數部分爲2位,不使用千分符格式
Number(123).toLocaleString('zh-CN', {
    style: 'decimal',
    useGrouping: false,
    minimumIntegerDigits : 5,
    minimumFractionDigits: 2
}) // 00123.00
  • 設置兩位小數的百分比顯示
Number(123).toLocaleString('zh-CN', {
    style: 'percent',
    minimumFractionDigits: 2
}) // 12,300.00%
  • 設置歐元貨幣
Number(123).toLocaleString('zh-CN', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 2
}) // €123.00

toLocaleString擴展

除了數字本地化格式之外,還有日期,數組,對象等等一系列的本地化處理,由於篇幅有限,這裏不再展開,可以自行去 MDN 查找相關內容,基本上用法都是類似的。


最後,如果看完有收穫,就動動小手點個贊再走唄,筆芯。


(啾咪 ^.< )

文章作者:Daotin(道廷途說)
聯繫方式:個人微信, Github, 掘金
版權聲明:自由轉載-非商用-非衍生-保持署名(創意共享3.0許可證
公衆號:前端隊長
 
分類: js
標籤: JavaScript
關注我收藏該文
 2
 0
 
 
 
« 上一篇: 將包含時間戳的對象數組按天排序

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章