千位分隔符在大数字的应用

这是我参与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，得到平常干货推送。最后再次感谢您的阅读，我是程序猿憨憨