JavaScript中常用的五種數(shù)字千分位格式化方法

更新時間：2024年12月19日 08:37:03 作者：lin2101

數(shù)字格式化是開發(fā)中經(jīng)常遇到的任務,特別是在需要為數(shù)字添加千分位符或控制小數(shù)位數(shù)時,以下是幾種常用的數(shù)字格式化方法,每種方法有其優(yōu)缺點,適用于不同的需求場景,感興趣的小伙伴跟著小編一起來看看吧

1. toLocaleString() 方法

toLocaleString() 是 JavaScript 內置的數(shù)字格式化方法，它可以根據(jù)用戶的區(qū)域設置自動添加千分位符，并提供對小數(shù)位數(shù)的控制。

代碼示例：

let num = 1234567.89;
let formatted = num.toLocaleString();
console.log(formatted); // "1,234,567.89" (根據(jù)地區(qū)不同，千分號可能是逗號或空格)

保留多位小數(shù)配置：

let num = 1234567.891111;
let formatted = num.toLocaleString(undefined, {
    minimumFractionDigits: 10,
    maximumFractionDigits: 10,
});
console.log(formatted); // "1,234,567.8911110000"

優(yōu)點：

簡潔易用：只需調用一次 toLocaleString()，即可實現(xiàn)千分位格式化。
地區(qū)適應性：根據(jù)不同地區(qū)自動使用適當?shù)那Х痔柡托?shù)點符號（例如，歐洲使用空格作為千分號，而美國使用逗號）。
支持小數(shù)點控制：通過設置參數(shù)，用戶可以控制小數(shù)位數(shù)。

缺點：

地區(qū)依賴性：千分號符號和小數(shù)點符號會根據(jù)瀏覽器的默認地區(qū)設置變化，可能不符合預期格式。如果需要嚴格控制格式，可能需要額外的配置。
瀏覽器兼容性：早期瀏覽器可能不完全支持 toLocaleString()，但現(xiàn)代瀏覽器基本都支持。

2. 正則表達式

使用正則表達式進行數(shù)字格式化提供了較高的靈活性，可以精確控制數(shù)字的千分位和小數(shù)點。

代碼示例：

function formatNumber(num, decimalPlaces = 2) {
    // 保證小數(shù)部分精度
    let [integer, decimal] = num.toFixed(decimalPlaces).split('.');
    
    // 格式化整數(shù)部分（千分位）
    integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    
    // 如果有小數(shù)部分，則保留小數(shù)部分
    return decimal ? `${integer}.${decimal}` : integer;
}

let num = 1234567.891231;
console.log(formatNumber(num, 5)); // "1,234,567.89123"

優(yōu)點：

精確控制：通過 toFixed() 保證小數(shù)精度，避免簡單字符串操作導致的精度丟失。
靈活性強：無論小數(shù)部分有多長，都能正確保留和格式化。

缺點：

代碼冗長：需要編寫較多的代碼，尤其是涉及小數(shù)、四舍五入等情況時。
對性能有一定影響：在處理大量數(shù)據(jù)時，使用正則表達式可能比 toLocaleString() 或 Intl.NumberFormat 更耗性能。

3. Intl.NumberFormat 方法

Intl.NumberFormat 是一個用于格式化數(shù)字的內置方法，提供了比 toLocaleString() 更細粒度的控制，適用于需要更復雜格式化要求的場景。

代碼示例：

let num = 1234567.891231;

let formatted = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 5,  // 保證至少有5位小數(shù)
  maximumFractionDigits: 5   // 最多保留5位小數(shù)
}).format(num);

console.log(formatted); // "1,234,567.89123"

解釋：

minimumFractionDigits：保證數(shù)字至少有指定的小數(shù)位數(shù)，若實際小數(shù)位數(shù)不足，會自動補零。
maximumFractionDigits：最多保留指定的小數(shù)位數(shù)，超出的小數(shù)部分將被四舍五入。

優(yōu)點：

精確控制：Intl.NumberFormat 提供了詳細的選項來控制千分位符和小數(shù)位數(shù)，支持國際化。
支持更多選項：能夠處理不同的貨幣符號、語言和區(qū)域設置。

缺點：

可能會四舍五入：如果設置了 maximumFractionDigits，超出的小數(shù)部分會被四舍五入。
不支持更復雜的格式化：比如自定義千分號、日期格式等復雜需求時，仍需額外的自定義邏輯。

4. 第三方庫（如 numeral.js）

第三方庫如 numeral.js 提供了強大的數(shù)字格式化功能，可以非常容易地實現(xiàn)數(shù)字的千分位格式化，并支持更多復雜的格式化需求（如貨幣、百分比等）。

代碼示例：

let num = 1234567.89;
let formatted = numeral(num).format('0,0.00');
console.log(formatted); // "1,234,567.89"

優(yōu)點：

功能強大：提供豐富的格式化選項，可以輕松處理貨幣、日期、百分比等多種格式。
簡潔易用：庫函數(shù)可避免編寫復雜的正則表達式或處理邏輯。

缺點：

增加項目依賴：引入外部庫會增加項目的體積，適用于對格式化有更高需求的場景。
學習成本：需要學習庫的 API 和配置選項。

5. 手動格式化（自定義函數(shù)）

手動編寫格式化函數(shù)是最靈活的方式，它能提供完全的控制權，適用于非常特定的需求。

代碼示例：

function formatNumber(num) {
    let [integer, decimal] = num.toString().split('.');
    integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return decimal ? integer + '.' + decimal : integer;
}

let num = 1234567.89;
console.log(formatNumber(num)); // "1,234,567.89"

優(yōu)點：