1.实现目标

需求描述:
我们有一串数字: 892345678.345672, 需要把它格式化为892,345,678.345672

需求很简单, 我们来实现它吧

2.数组逆序法

代码实现:

function format(num) {
    const str = num.toString().split('.');// 处理小数
    const intNum = str[0]; // 整数部分
    const fraction = str[1]; //小数部分
    
    const arr = intNum.split('').reverse(); // 转化为数组, 并且逆序
    let result = ''; // 需要返回的数据
    arr.forEach((item, index) => {
        // 不是第一位，且是3的倍数添加“,”
        if(index !== 0 && index % 3 === 0) {
            result = `${item},${result}`
        } else {
            result = item + result;
        }
    })
    
    return result + (fraction ? 
    '.' + fraction : ''); // 加上小数部分
}

使用

format(892345678.345672)
format(892345678)
format(892)

输出:
892,345,678.345672
892,345,678
892

上段代码中我们有几点需要注意：

• 小数点后面的数字我们不需要分割

• 我们需要将整串数字逆序，因为我们分割的结构是从后往前数，每三位添加一个逗号

3.字符串分割法

相较于数组逆序法，字符串分割法性能要相较于而言高一点，因为数组操作特别是一些打乱顺序得到操作其实是比较消耗性能的。

在JS中，字符串本身就是可以循环的，而且本道题目输出的也是字符串，所以我们可以直接操作字符串。

代码实现:

function format(num) {
    const str = num.toString().split('.');// 处理小数
    const intNum = str[0]; // 整数部分
    const fraction = str[1]; //小数部分
    
    const length = intNum.length; // 获取字符串长度
    let result = '';
    for(let index = length -1; index >= 0; index--) {
        const i = length - index; // 当前循环到第几位
        if(i % 3 === 0) {
            // 首位
            if(index === 0) {
                result = intNum[i] + result
            } else {
                result = ',' + intNum[i] + result
            }
        } else {
            result = intNum[i] + result
        }
    }
    return result + (fraction ? '.' + fraction : ''); // 加上小数部分
}

使用

format(892345678.345672)
format(892345678)
format(892)

输出:
892,345,678.345672
892,345,678
892

上段代码中需要注意的点如下：

• 循环字符串时我们需要逆序循环

• 当循环到3的倍数的时候，我们还需要判断当前是不是首位数

4.toLocaleString()

toLocaleString() API简单介绍用法:

Number.prototype.toLocaleString()方法返回这个数字在特定语言环境下的字符串表示。

该方法拥有两个可选参数，分别是locales和options。locales是缩写的语言代码或这些代码组成的数组，options参数指定了一些附加的样式属性。

1、当忽略两个参数时，Number.prototype.toLocaleString()方法返回当前系统使用的默认语言环境和默认选项格式化的字符串。

var num = 12345;
num.toLocaleString(); // "12,345"，注意有个千分位逗号
num.toString();       // "12345"

2、使用locales参数

var num = 1234567890;
num.toLocaleString('zh-Hans-CN-u-nu-hanidec'); // "一,二三四,五六七,八九〇"

3、使用options参数

var num = 123456.789;
num.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }); // "123.456,79 €"

如上, 我们采用第一种用法就可实现千分位, 代码如下:

function format(num) {
  return num.toLocaleString();
}

用法: 
format(892345678.345672)
format(892345678)
format(892)

输出:
892,345,678.345672
892,345,678
892

5.使用正则

正则也是大家很容易想到的一种方式，不过正则的效率没有大家想象的那么好，当然如果在实际项目中，什么用起来简单用什么。

代码实现:

function format(num){
  const REG = /\B(?=(\d{3})+(?!\d))/g;
  return num.toString().replace(REG, ",");
}

用法: 
format(892345678.345672)
format(892345678)
format(892)

输出:
892,345,678.345672
892,345,678
892

总结

想要实现该需求，方式多种多样，具体使用哪一种方式需要结合实际应用场景，比如说需要性能好一点，或者说需要代码简洁一点等等。出了上面几种，还有很多种方式可以实现，这就需要大家自己下去挖掘了。