利用JavaScript將普通數(shù)字轉(zhuǎn)換為帶有千分位分隔符格式的多種實現(xiàn)方法

更新時間：2023年12月14日 11:44:23 作者：JYeontu

如何利用 JavaScript 將普通數(shù)字轉(zhuǎn)換為帶有千分位分隔符的格式,我們將介紹多種方法,包括使用內(nèi)置的 toLocaleString() 方法、Intl.NumberFormat 對象以及自定義函數(shù)來實現(xiàn)數(shù)字格式化,需要的朋友可以參考下

說在前面

如何利用 JavaScript 將普通數(shù)字轉(zhuǎn)換為帶有千分位分隔符的格式。我們將介紹多種方法，包括使用內(nèi)置的 toLocaleString() 方法、Intl.NumberFormat 對象以及自定義函數(shù)來實現(xiàn)數(shù)字格式化。無論你是初學者還是有一定經(jīng)驗的開發(fā)者，本文都將為你揭示數(shù)字格式化的各種技巧和靈活性，讓你在數(shù)據(jù)展示方面游刃有余。讓我們一起探索如何美化數(shù)字，讓數(shù)據(jù)更加清晰和吸引人！

什么是千分位分隔

千分位分割指的是在數(shù)字中插入逗號或其他分隔符，以提高數(shù)字的可讀性。通常，千分位分割會在數(shù)字的每三位之間插入一個分隔符，例如逗號。這個分隔符可以幫助我們更清晰地識別數(shù)字的大小和結(jié)構(gòu)。

舉個例子，假設有一個數(shù)字 1234567.6789。在進行千分位分割后，它將被轉(zhuǎn)換為 1,234,567.678,9。通過插入逗號作為分隔符，我們可以更容易地理解這個數(shù)值表示的是一個百萬級別的數(shù)字。

千分位分割廣泛應用于金融、統(tǒng)計數(shù)據(jù)、貨幣金額等領域，以及在各種數(shù)據(jù)展示中。它可以使大數(shù)字更易讀，并且更加美化和規(guī)范化。在編程中，我們可以使用各種語言和方法來實現(xiàn)千分位分割，如 JavaScript 中的 toLocaleString() 方法、C# 中的 ToString("N") 方法等。

通過千分位分割，我們可以方便地將數(shù)字轉(zhuǎn)換為更具可讀性和易懂性的格式，使數(shù)據(jù)更加清晰和吸引人。

代碼實現(xiàn)

一、原生JavaScrip實現(xiàn)

function formatNumberWithCommas(number) {
    number += '';
    let [integer,decimal] = number.split('.');
    const doSplit = (num,isInteger = true) => {
        if(num === '') return '';
        if(isInteger) num = num.split('').reverse();
        let str = [];
        for(let i = 0; i < num.length; i++){
            if(i !== 0 && i % 3 === 0) str.push(',');
            str.push(num[i]);
        }
        if(isInteger) return str.reverse().join('');
        return str.join('');
    };
    integer = doSplit(integer);
    decimal = doSplit(decimal,false);
    return integer + (decimal === '' ? '' : '.' + decimal);
};

1、首先將傳入的數(shù)字參數(shù)轉(zhuǎn)換成字符串類型，以便能夠進行字符串操作；
2、利用 ES6 的解構(gòu)語法，將字符串按照小數(shù)點進行分割，得到整數(shù)部分和小數(shù)部分；
3、定義一個內(nèi)部函數(shù) doSplit，該函數(shù)接收一個數(shù)字字符串和一個布爾值 isInteger（默認為 true）。如果是整數(shù)部分，則 isInteger 為 true；否則為 false。；
4、如果傳入的數(shù)字字符串為空字符串，直接返回空字符串；
5、如果是整數(shù)部分，我們需要在數(shù)字從右往左數(shù)，每3位插入一個逗號；
6、如果是小數(shù)部分，我們需要在數(shù)字從左往右數(shù)，每3位插入一個逗號；
7、如果是整數(shù)部分，則將數(shù)組反轉(zhuǎn)，然后通過 join() 方法將數(shù)組轉(zhuǎn)換成字符串。如果是小數(shù)部分，則直接通過 join() 方法將數(shù)組轉(zhuǎn)換成字符串。
8、最后，將整數(shù)部分和小數(shù)部分用小數(shù)點連接起來，返回最終的字符串。

二、正則表達式實現(xiàn)

function formatNumberWithRegex(number) {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

1、首先將傳入的數(shù)字參數(shù)轉(zhuǎn)換成字符串類型，以便能夠進行正則表達式替換操作。
2、調(diào)用字符串對象的 replace() 方法進行替換操作。該方法接收兩個參數(shù)：
- 第一個參數(shù)是正則表達式 \B(?=(\d{3})+(?!\d))，其中 \B 表示匹配非單詞邊界，即數(shù)字之間的位置；(?=(\d{3})+(?!\d)) 表示匹配連續(xù)的三個數(shù)字組成的一組，且該組之后不能再有數(shù)字。也就是說，該正則表達式匹配所有滿足這樣條件的數(shù)字之間的位置。
- 第二個參數(shù)是逗號 ,，用來替換匹配到的數(shù)字之間的位置。
3、在正則表達式中使用了正向肯定預查 (?=...) 和負向否定預查 (?!\d)，保證了只匹配數(shù)字之間的位置，并且不會匹配到數(shù)字本身。
4、通過這種方式，在不需要循環(huán)遍歷的情況下，直接使用正則表達式完成了千分位分隔符的替換操作。
5、最后返回替換后的字符串。

三、使用toLocaleString方法：

toLocaleString() 是 JavaScript 中用于將數(shù)字、日期等數(shù)據(jù)類型轉(zhuǎn)換為特定地區(qū)（locale）格式的方法。它是基于當前執(zhí)行環(huán)境的語言設置和地區(qū)設置，返回一個表示格式化后的字符串。

toLocaleString() 方法有多種重載形式，用于不同的數(shù)據(jù)類型和參數(shù)配置。下面分別介紹常見的用法：

1、格式化數(shù)字：
- Number.prototype.toLocaleString()：該方法用于將數(shù)字格式化為特定地區(qū)的數(shù)字格式。例如，使用英語環(huán)境默認的逗號作為千分位分隔符和小數(shù)點作為小數(shù)分隔符。
- 示例：(1234567.89).toLocaleString() // "1,234,567.89"
2、格式化日期和時間：
- Date.prototype.toLocaleString()：該方法用于將日期和時間格式化為特定地區(qū)的日期時間格式。根據(jù)地區(qū)的不同，可以獲得不同的日期時間顯示格式。
- 示例：new Date().toLocaleString()
3、格式化貨幣：
- Number.prototype.toLocaleString()：該方法也可用于將數(shù)字格式化為特定地區(qū)的貨幣格式。根據(jù)地區(qū)設置，可以獲得合適的貨幣符號、貨幣分組符號和小數(shù)位設置。
- 示例：(1234567.89).toLocaleString("en-US", { style: "currency", currency: "USD" }) // "$1,234,567.89"

需要注意的是，toLocaleString() 方法的具體格式化效果依賴于當前執(zhí)行環(huán)境的語言設置和地區(qū)設置。不同的瀏覽器、操作系統(tǒng)或用戶配置可能會導致不同的結(jié)果。因此，在使用 toLocaleString() 方法時應謹慎處理，并根據(jù)需求進行適當?shù)膮?shù)配置。

function formatNumberWithToLocaleString(number) {
  return number.toLocaleString();
}

試了上面這個代碼，我們可以發(fā)現(xiàn)它默認是保留3位小數(shù)的，那怎么辦呢？我們還是需要將其分割為小數(shù)和整數(shù)兩部分來進行處理：

function formatNumberWithLocale(number) {
    let [integer,decimal = ''] = (number + '').split('.');
    integer = (+integer).toLocaleString();
    if(decimal === '') return integer;
    decimal = decimal.split('').reverse().join('');
    decimal = (+decimal).toLocaleString();
    decimal = decimal.split('').reverse().join('');
    return integer + '.' + decimal;
}

四、使用Intl.NumberFormat對象：

Intl.NumberFormat 是 JavaScript 的一個內(nèi)置對象，用于格式化數(shù)字。它提供了一種簡單、靈活的方式來將數(shù)字格式化為各種本地化的表示形式，包括貨幣、百分比和小數(shù)位數(shù)等。

使用 Intl.NumberFormat 可以輕松地進行數(shù)字格式化，而不必手動編寫復雜的格式化函數(shù)。以下是一個基本示例：

let number = 1234567.8901;
let formatter = new Intl.NumberFormat('en-US');
let formattedNumber = formatter.format(number);

console.log(formattedNumber); // 輸出 "1,234,567.89"

在這個示例中，我們創(chuàng)建了一個 Intl.NumberFormat 實例，使用 'en-US' 作為參數(shù)指定了格式化的區(qū)域設置。然后，我們使用 format() 方法將數(shù)字格式化為本地化的字符串表示形式。

Intl.NumberFormat 還支持更高級的數(shù)字格式化，例如將數(shù)字格式化為貨幣、百分比和科學計數(shù)法等。以下是一些示例：

// 格式化為貨幣
let number = 1234567.89;
let formatter = new Intl.NumberFormat('zh-CN', {
  style: 'currency',
  currency: 'CNY'
});
let formattedNumber = formatter.format(number);

console.log(formattedNumber); // 輸出 "￥1,234,567.89"

// 格式化為百分比
let formatter = new Intl.NumberFormat('zh-CN', {
  style: 'percent',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
let formattedNumber = formatter.format(0.12345); // 12.35%

// 科學計數(shù)法
let formatter = new Intl.NumberFormat('zh-CN', {
  style: 'decimal',
  notation: 'scientific'
});
let formattedNumber = formatter.format(1234567.89); // 1.235E6

在這些示例中，我們使用了不同的選項來指定所需的格式化類型。例如，對于貨幣格式化，我們使用了 'currency' 樣式，并指定了希望使用的貨幣類型。對于百分比格式化，我們使用了 'percent' 樣式，并指定了小數(shù)部分的位數(shù)。對于科學計數(shù)法格式化，我們使用了 'decimal' 樣式，并指定了使用的符號。

使用Intl.NumberFormat()實現(xiàn)千分位分隔

function formatNumberWithIntl(number) {
  return new Intl.NumberFormat().format(number);
}

和上一個一樣，直接使用的話只能保留3位小數(shù)，我們?nèi)砸獙ζ溥M行改造一下：

function formatNumberWithIntl(number) {
    let [integer,decimal = ''] = (number + '').split('.');
    integer = new Intl.NumberFormat().format(integer);
    if(decimal === '') return integer;
    decimal = decimal.split('').reverse().join('');
    decimal = new Intl.NumberFormat().format(decimal);
    decimal = decimal.split('').reverse().join('');
    return integer + '.' + decimal;
}