1,使用數(shù)組方法:

1) 數(shù)字轉(zhuǎn)字符串,字符串按照小數(shù)點(diǎn).分割

2) 整數(shù)部分拆分成字符串?dāng)?shù)組,并倒敘

3) 遍歷, 按照每三位添加逗號,號

4) 拼接整數(shù)部分+小數(shù)部分

function format_width_array(number) { // 將數(shù)字轉(zhuǎn)換為千分位字符串
    const arr = String(number).split('.');
    // 整數(shù)部分(數(shù)組格式) => split將字符串轉(zhuǎn)換為數(shù)組
    const int = arr[0].split('');
    // 小數(shù)點(diǎn)右邊的數(shù)字部分
    const float = arr[1] || '';
    let r = ''
    // 倒敘并遍歷 
    int.reverse().forEach(function (v, i) {
        // 非第一位并且是位值是3的倍數(shù), 添加','
        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) 數(shù)字轉(zhuǎn)字符串,并按照小數(shù)點(diǎn)’.’分割

2) 整數(shù)部分對3取模,獲取余數(shù), 獲得substring(0, 余數(shù))的字符串片段r

3) 按照/3截整數(shù)商為lenth遍歷,每次循環(huán), 字符串片段拼接新的片段: 以下標(biāo)(余數(shù)+i*3)開始, 結(jié)束下標(biāo)在開始下標(biāo)的基礎(chǔ)上加上3

4) 當(dāng)/3沒有余數(shù)時(shí), 要去掉字符串首位多出來的逗號','

5) 拼接整數(shù)部分+小數(shù)部分

// 字符串substring截取:
function format_with_substring(number) {
    // 數(shù)字轉(zhuǎn)字符串并按.分割
    const arr = String(number).split('.')
    const int = arr[0] || '';
    const float = arr[1] || ''

    // 多余的位數(shù)
    const f = int.length % 3

    // 獲取多余的位數(shù),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)}`
    }
    // 多余的位數(shù)
    if (f === 0) {
        // 去掉下標(biāo)0的','
        r = r.substring(1)
    }

    // 整數(shù)部分和小數(shù)部分拼接
    return `${r}${!!float ? '.' + float : ''}`
}
console.log(format_with_substring('938765432.02098'))

3.除法+求模

1) 值對1000求模,獲得最高三位

2) 值除以1000,值是否大于1判斷是否結(jié)束

3) 重復(fù)1)和2),直到退出

4) 拼接整數(shù)部分 + 小數(shù)部分

/**
 * ~是js里的按位取反操作符 ， ~~ 就是執(zhí)行兩次按位取反，其實(shí)就是保持原值，但是注意雖然是原值，但是對布爾型變量執(zhí)行這個(gè)操作，會(huì)轉(zhuǎn)化成相應(yīng)的數(shù)值型變量，也就是
~~true === 1，~~false === 0。 ~~"" == 0 ~~[] == 0

padStart和padEnd是類似的用法，padEnd是向后補(bǔ)位，padStart是在前邊補(bǔ)位。
 */
function format_width_mod(number) {
    let n = Number(number)
    let r = ''
    let temp = null;
    do {
        // 求模的值, 用于獲取最高三位,這里可能有小數(shù)
        mod = n % 1000;
        // 值是否大于1,是繼續(xù)的條件
        n = n / 1000
        // 高三位
        temp = ~~mod; // ~~轉(zhuǎn)化為數(shù)值變量
        // 1. 填充: n>1循環(huán)未結(jié)束, 就要填充為 比如: 1 => 001,
        // 不然1 001, 就會(huì)變成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('.')
    // 拼接小數(shù)部分
    if (index >= 0) {
        r += strNumber.substring(index)
    }
    return r
}
console.log(format_width_mod('1001.02098'))

4.正則

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

2) 將整數(shù)部分格式化為千分位

3) 拼接整數(shù)部分和小數(shù)部分文章來源地址http://www.zghlxwxcb.cn/news/detail-758891.html

function format_width_regex(number) {
    const reg = /\d{1,3}(?=(\d{3})+$)/g
    // $&指的是匹配的內(nèi)容, 符合正則表達(dá)式的內(nèi)容加','
    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個(gè)數(shù)字的非單詞邊界(\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'))



/**
要理解?=和?!，首先需要理解前瞻，后顧，負(fù)前瞻，負(fù)后顧四個(gè)概念：

// 前瞻：
exp1(?=exp2) 查找exp2前面的exp1
// 后顧：
(?<=exp2)exp1 查找exp2后面的exp1
// 負(fù)前瞻：
exp1(?!exp2) 查找后面不是exp2的exp1
// 負(fù)后顧：
(?<!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'))

到了這里，關(guān)于使用JavaScript將數(shù)字格式化成千分位的n種方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！