千位分隔符在大數字的應用

這是我參與8月更文挑戰的第9天，活動詳情查看：8月更文挑戰

前言

在移動設備中，連續數值超過必定位數，瀏覽器可能會默認當作電話號碼處理，可是有時候這一長串的連續數值其實就是一個數字類型。依西方的習慣以及現實常見的場景中，人們在數字中加進一個符號，以避免因數字位數太多而難以看出它的值，一般每隔三位數加進一個逗號。

爲何是隔三位？

在英語裏是沒有「萬」「億」的，只有「百萬（million）」「十億（billion）」

1,000 一千

1,000,000 一百萬

1,000,000,000 十億

千位分隔符就是這麼產生的

千位分隔符的做用

語義化更好

在軟件和設備上，只要以千位分隔符表示的，就必定認爲是數值 看數字 1508927009，總得要找位數才能讀出來！可是若是是數字 1,508,927,009 呢？也要找位數，可是看的比較輕鬆，熟絡的話，一眼就能夠看出多少位了

數值轉換成千位分隔數值

想要在頁面上顯示爲逗號分隔的數值，須要進一步的轉化和處理

1. 遍歷處理（不推薦：處理繁雜）

<script>
    var num = 1234567890
    var arr = num.toString().split('').reverse() // 將數值轉成字符串，分割成數組，再反轉順序
    var newNum = ''
    arr.forEach((item, index) => {
        newNum += item
        if ((index + 1) % 3 === 0) {
            newNum += ','
        }
    });
    newNum = newNum.split('').reverse().join('')
    console.log(newNum)
</script>
複製代碼

2. 正則表達式處理

<script>
    var num = 1234567890
    var newNum = num.toString().replace(/(\d)(?=(\d{3})+$)/g, "$1,");
    console.log(newNum)
</script>
複製代碼

2. toLocaleString() 處理

toLocaleString([locales [, options])  方法返回這個數字在特定語言環境下的表示字符串。

locales： 可選，縮寫語言代碼，例如:cmn-Hans-CN

options： 可選，包含一些或全部的屬性的類

<script>
    var num = 1234567890
    var newNum = num.toLocaleString('en-US');
    console.log(newNum)
</script>
複製代碼

千位分隔符的變幻無窮

有些字體的這個逗號長得不那麼好看一點，設計師但願這個逗號啊有點像蝌蚪的感受，可是數字呢仍是原來的字體，怎麼辦？

只對某些字體進行控制是使用CSS中的 unicode-range 屬性

unicode-range

<style>
    @font-face {
        font-family: BASE;
        src: local('PingFang SC'),
            local("Microsoft Yahei");
    }
    @font-face {
        font-family: quote;
        src: local('SimSun');    
        unicode-range: u+002c;
    }
    body {
        font-size: 20px;
        font-family: BASE;
    }
    .font {
        font-family: quote, BASE;
    }
</style>
複製代碼

<div class="num font">1,234,567,890</div>
<div class="num">1,234,567,890</div>
複製代碼

總體而言，unicode-range 兼容性仍是很不錯的

參考文章

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

CSS unicode-range特定字符使用font-face自定義字體

（求關注）

歡迎關注個人公衆號：A綱 Coder，得到平常乾貨推送。最後再次感謝您的閱讀，我是程序猿憨憨