【常见方法】数字魔法：用三行js代码优雅实现千分符格式化

本文链接：https://blog.csdn.net/qq_45796592/article/details/147168067

第一章前言：数字的“阅读障碍”与千分符的魔力

在处理数字时，我们常常会遇到一个令人头疼的问题：当数字过大时，比如123456789，直接阅读起来非常困难，而千分符（如123,456,789）则像一把神奇的钥匙，能够瞬间让数字变得清晰易读。千分符的原理很简单：每隔三位数字插入一个分隔符（通常是逗号）。但实现起来却并不总是那么优雅。今天，小编将分享一种简洁而强大的方法，用三行代码实现千分符格式化，cv可用，并且能让你的数字也瞬间变得“可读性爆表”！

第二章源码：代码背后的智慧

三行代码背后的智慧

const groupSeparator = (num) => {
    num = `${num}`
    if (!num.includes('.')) num += '.'
    return num
       .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => `${$1},`)
        .replace(/\.$/, '')
}

这段代码看似简单，却蕴含着深刻的逻辑。我们来一步步拆解它的魔法!

源码解释:

数字转字符串
首先，将输入的数字转换为字符串，以便后续操作。这一步看似多余，但却是处理数字格式化的基础。
确保小数点存在
如果数字没有小数部分，我们临时添加一个小数点。这一步是为了让正则表达式能够正确匹配千分位的分隔位置。
正则表达式的魔法
这是整个方法的核心。正则表达式(\d)(?=(\d{3})+\.)的作用是：
- 匹配一个数字（\d）。
- 确保这个数字后面跟着三个一组的数字，直到小数点（(?=(\d{3})+\.)）。
- 每次匹配到这样的数字时，插入一个逗号。
清理尾部的小数点
如果原始数字没有小数部分，我们最后会多出一个小数点，用replace(/\.$/, '')将其移除。

代码演示：数字瞬间“变清晰”

console.log(groupSeparator(123456789));       // 输出：123,456,789
console.log(groupSeparator(123456789.123));   // 输出：123,456,789.123
console.log(groupSeparator(1234));            // 输出：1,234
console.log(groupSeparator(1234567890123));   // 输出：1,234,567,890,123