使用千位分隔符(逗號)表示web網頁中的大數字


做手機端頁面我們常常遇到數字,而在Safari瀏覽器下這些數字會默認顯示電話號碼,於是我們就用到了補坑的方法加入<meta>標簽:

 

<meta name="format-detection" content="telephone=no">
這個標簽的意義在於將數字不被看成電話號碼,於是就萬事大吉了O(∩_∩)O,但是如果是一個訂餐電話,那么在加入這個標簽之后,訂餐電話就變成了數字,就不能直接撥號了於是乎我們想到了用千位符老表示數字從而區分電話號碼和數字

千位符

在西方,在表示很大的數字的時候,會以每3位為一個間隔進行分隔,分隔的符號就是英文逗號,由於中文里面,第3位是“千”,因此,數字中的這個“逗號”也被稱為“千位分隔符”。

之所以會以每3位進行分隔,是英文的讀數有關的,舉個例子:英語的987,654,321讀法是: nine hundred and eighty-seven billion six hundred and fifty-four thousand three hundred and twenty-one。

其關鍵的數值單位,如billionthousand正好就是千分分隔符的位置。可見這種分隔是和西方數值閱讀方法相輔相成的。

但是對於中文用戶而言,這種風格反而是一種尷尬。我們的大數值單位主要就是“萬”和“億”,如果按照這種標准進行分割的話,應該是每4位進行分隔。所以,當我們一開始看到3位分隔的數字的時候,一定會奇怪這分隔的方式有些不按套路。

那有沒有解決的辦法呢;

辦法一:

方法一:使用正則表達式

 
        

語法如下:

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

舉例:

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

 

辦法二:

方法二:使用toLocaleString()方法

 
        

語法如下:

 
        
Number.toLocaleString('en-US');
 
        

舉例:

 
         
         
        
(123456789).toLocaleString('en-US');
 
        

結果是:123,456,789

 

 
        

對於中文場景下,toLocaleString('en-US')中的'en-US'理論上是可以缺省的,也就是直接(123456789).toLocaleString()也是可以得到123,456,789。但是如果你的產品可能海外用戶使用,則保險起見,還是保留'en-US'

 
        

另外,對於IE edge之前的版本,Number.toLocaleString()會自動補上兩位小數,如果是不需要的,需要自己額外過濾掉。





免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM