使用JavaScript将数字格式化成千分位的n种方法

1,使用数组方法:

1) 数字转字符串,字符串按照小数点.分割

2) 整数部分拆分成字符串数组,并倒叙

3) 遍历, 按照每三位添加逗号,号

4) 拼接整数部分+小数部分

function format_width_array(number) { // 将数字转换为千分位字符串
    const arr = String(number).split('.');
    // 整数部分(数组格式) => split将字符串转换为数组
    const int = arr[0].split('');
    // 小数点右边的数字部分
    const float = arr[1] || '';
    let r = ''
    // 倒叙并遍历 
    int.reverse().forEach(function (v, i) {
        // 非第一位并且是位值是3的倍数, 添加','
        if (i !== 0 && i % 3 === 0) {
            r += v + ','
        }
        else {
            // 正常添加字符
            r += v
        }
    })
    return `${r}${!!float ? '.' + float : ''}`
}
console.log(format_width_array('938765432.02098'))

2.使用字符串的substring截取

1) 数字转字符串,并按照小数点’.’分割

2) 整数部分对3取模,获取余数, 获得substring(0, 余数)的字符串片段r

3) 按照/3截整数商为lenth遍历,每次循环, 字符串片段拼接新的片段: 以下标(余数+i*3)开始, 结束下标在开始下标的基础上加上3

4) 当/3没有余数时, 要去掉字符串首位多出来的逗号','

5) 拼接整数部分+小数部分

// 字符串substring截取:
function format_with_substring(number) {
    // 数字转字符串并按.分割
    const arr = String(number).split('.')
    const int = arr[0] || '';
    const float = arr[1] || ''
 
    // 多余的位数
    const f = int.length % 3
 
    // 获取多余的位数,f可能是0,则r可能是空字符串
    let r = int.substring(0, f)
    // 除以3取商, 取整
    const len = Math.floor(int.length / 3)
    for (let i = 0; i < len; i++) {
        r += `,${int.substring(f + i * 3, f + (i + 1) * 3)}`
    }
    // 多余的位数
    if (f === 0) {
        // 去掉下标0的','
        r = r.substring(1)
    }
 
    // 整数部分和小数部分拼接
    return `${r}${!!float ? '.' + float : ''}`
}
console.log(format_with_substring('938765432.02098'))

3.除法+求模

1) 值对1000求模,获得最高三位

2) 值除以1000,值是否大于1判断是否结束

3) 重复1)和2),直到退出

4) 拼接整数部分 + 小数部分

/**
 * ~是js里的按位取反操作符 ， ~~ 就是执行两次按位取反，其实就是保持原值，但是注意虽然是原值，但是对布尔型变量执行这个操作，会转化成相应的数值型变量，也就是
~~true === 1，~~false === 0。 ~~"" == 0 ~~[] == 0
 
padStart和padEnd是类似的用法，padEnd是向后补位，padStart是在前边补位。
 */
function format_width_mod(number) {
    let n = Number(number)
    let r = ''
    let temp = null;
    do {
        // 求模的值, 用于获取最高三位,这里可能有小数
        mod = n % 1000;
        // 值是否大于1,是继续的条件
        n = n / 1000
        // 高三位
        temp = ~~mod; // ~~转化为数值变量
        // 1. 填充: n>1循环未结束, 就要填充为 比如: 1 => 001,
        // 不然1 001, 就会变成11,
        // 2.拼接','
        r = (n >= 1 ? `${String(temp).padStart(3, '0')}` : temp)
            + (!!r ? `,${r}` : '')
        console.log(r, 'r=====')
    } while (n >= 1)
    const strNumber = String(number)
    const index = strNumber.indexOf('.')
    // 拼接小数部分
    if (index >= 0) {
        r += strNumber.substring(index)
    }
    return r
}
console.log(format_width_mod('1001.02098'))

4.正则

1) 利用正则前瞻: exp1(?=exp2) 查找exp2前面的exp1

2) 将整数部分格式化为千分位

3) 拼接整数部分和小数部分

function format_width_regex(number) {
    const reg = /\d{1,3}(?=(\d{3})+$)/g
    // $&指的是匹配的内容, 符合正则表达式的内容加','
    const strNumber = number + '';
    const int = Math.floor(strNumber)
    const floatPart = strNumber.substring(strNumber.indexOf('.')) || ''
    return String(int).replace(reg, '$&,') + floatPart;
}
console.log(format_width_regex('1001.02098'))
console.log(format_width_regex('938765432.02098'))
 
function format_width_regex2(number) {
    // exp1(?=exp2) 查找查找exp2前面的exp1
    const reg = /\d{1,3}(?=(\d{3})+)/g 
    const reg2 = /^(\d+)\.(\d+)$/;
    const strNumber = number + '';
    const int = strNumber.replace(reg2, '$1') || ''
    const float = reg2.test(strNumber) ? strNumber.replace(reg2, '$2') : ''
    return int.replace(reg, function (match, ...args) {
        console.log(match, ...args, '打印====')
        return match + ','
    }) + (float.padStart(float.length > 0 ? float.length + 1 : 0, '.'))
}
console.log(format_width_regex2(900))
console.log(format_width_regex2('1000'))
console.log(format_width_regex2('1001.02098'))
console.log(format_width_regex2('938765432.02098'))
 
function format_width_regex3(number) {
    // 匹配的是后面是3*n个数字的非单词边界(\B)
    const reg = /\B(?=(?:\d{3})+(?!\d))/g
    const reg2 = /^(\d+)\.(\d+)$/;
    const strNumber = number + '';
    const int = strNumber.replace(reg2, '$1') || ''
    const float = reg2.test(strNumber) ? strNumber.replace(reg2, '$2') : ''
    return int.replace(reg, function (match, ...args) {
        return match + ','
    }) + (float.padStart(float.length > 0 ? float.length + 1 : 0, '.'))
}
console.log(format_width_regex3(900))
console.log(format_width_regex3('1000'))
console.log(format_width_regex3('1001.02098'))
console.log(format_width_regex3('938765432.02098'))
 
 
 
/**
要理解?=和?!，首先需要理解前瞻，后顾，负前瞻，负后顾四个概念：
 
// 前瞻：
exp1(?=exp2) 查找exp2前面的exp1
// 后顾：
(?<=exp2)exp1 查找exp2后面的exp1
// 负前瞻：
exp1(?!exp2) 查找后面不是exp2的exp1
// 负后顾：
(?<!exp2)exp1 查找前面不是exp2的exp1 */
function format_with_Intl(number, minimumFractionDigits, maximumFractionDigits) {
    const strNumber = number + '';
    const float = /\./.test(strNumber) ? strNumber.split('.')[1]: '';
    minimumFractionDigits = minimumFractionDigits || float.length || 2
    maximumFractionDigits = maximumFractionDigits || float.length || 2
    maximumFractionDigits = Math.max(minimumFractionDigits, maximumFractionDigits)
    return new Intl.NumberFormat('en-us', {
        maximumFractionDigits,
        minimumFractionDigits
    }).format(number)
}
console.log(format_with_Intl(900))
console.log(format_with_Intl('1000'))
console.log(format_with_Intl('1001.02098'))
console.log(format_with_Intl('938765432.02098'))