How to format a number with commas as thousands separators?

There are several ways to format numbers with thousand separators in JavaScript. Here, I will introduce two commonly used methods:

Method 1: Using the Intl.NumberFormat Object

Intl.NumberFormat is a built-in internationalization object that can easily format numbers, including currency formatting and thousand separators. Using this object makes it straightforward to implement thousand separators.

javascript
function formatNumber(num) {
    return new Intl.NumberFormat().format(num);
}

// Example
console.log(formatNumber(1234567));  // Output: "1,234,567"

Method 2: Using Regular Expressions

If you need more customization, such as in environments that do not support Intl, you can manually insert thousand separators using regular expressions.

javascript
function formatNumberWithRegex(num) {
    const numStr = num.toString();
    // Regular expression: /(?!^)(?=(\d{3})+$)/g Explanation:
    // (?!^) Ensures matching position is not at the string start
    // (?=(\d{3})+$) Ensures matching position is followed by multiples of three digits until the string end
    // 'g' for global matching
    return numStr.replace(/\B(?=(\d{3})+(?\!\d))/g, ",");
}

// Example
console.log(formatNumberWithRegex(1234567));  // Output: "1,234,567"

Choosing the Method

• If you are in an environment that supports modern internationalization APIs (e.g., modern browsers), using Intl.NumberFormat is a great choice because it is simple and powerful.
• If you are in older environments or need more control, such as for special formatting requirements, using regular expressions is a viable option.

These are the two commonly used methods for formatting numbers with thousand separators in JavaScript.