說在前面

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

什么是千分位分隔

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

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

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

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

代碼實現

一、原生JavaScrip實現

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

二、正則表達式實現

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

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

三、使用toLocaleString方法：

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

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

• 1、格式化數字：

  • Number.prototype.toLocaleString()：該方法用于將數字格式化為特定地區(qū)的數字格式。例如，使用英語環(huán)境默認的逗號作為千分位分隔符和小數點作為小數分隔符。
  • 示例：(1234567.89).toLocaleString() // "1,234,567.89"

• 2、格式化日期和時間：

  • Date.prototype.toLocaleString()：該方法用于將日期和時間格式化為特定地區(qū)的日期時間格式。根據地區(qū)的不同，可以獲得不同的日期時間顯示格式。
  • 示例：new Date().toLocaleString()

• 3、格式化貨幣：

  • Number.prototype.toLocaleString()：該方法也可用于將數字格式化為特定地區(qū)的貨幣格式。根據地區(qū)設置，可以獲得合適的貨幣符號、貨幣分組符號和小數位設置。
  • 示例：(1234567.89).toLocaleString("en-US", { style: "currency", currency: "USD" }) // "$1,234,567.89"

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

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

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

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 的一個內置對象，用于格式化數字。它提供了一種簡單、靈活的方式來將數字格式化為各種本地化的表示形式，包括貨幣、百分比和小數位數等。

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

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' 作為參數指定了格式化的區(qū)域設置。然后，我們使用 format() 方法將數字格式化為本地化的字符串表示形式。

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

// 格式化為貨幣
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%

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

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

• 使用Intl.NumberFormat()實現千分位分隔

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

和上一個一樣，直接使用的話只能保留3位小數，我們仍要對其進行改造一下：

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;
}

以上就是利用JavaScript將普通數字轉換為帶有千分位分隔符格式的多種實現方法的詳細內容，更多關于JavaScript將普通數字轉換千分位分隔符的資料請關注腳本之家其它相關文章！