Benchmark: Intl.NumberFormat vs toLocalString vs string split vs toFixed vs bignumber vs regex

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bignumber.js/9.0.1/bignumber.min.js"></script>

Script Preparation code:

function pricize (num, decimal = 0) {
  const intPart = Math.floor(num)
  const intPieces = intPart.toString().split('')
  const len = intPieces.length
  const intStr = intPieces.reduce((result, chr, index, array) => {
    const pos = len - index
    result += (index !== 0 && pos % 3 === 0) ? ',' + chr : chr
    return result
  }, '')

  const decStr = decimal > 0
    ? num.toFixed(decimal + 1).toString().slice(-(decimal + 2), -1) // toFixed() は四捨五入してしまうので(decimal + 1)桁まで求めて切り取る
    : ''

  return intStr + decStr
}

function numberWithCommas(x) {
    return x.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

var target = 123456789.123456789
var options = {minimumFractionDigits: 3, maximumFractionDigits: 3}

Tests:

toLocaleString
var a = target.toLocaleString('en-US', options);
Intl.NumberFormat
var a = new Intl.NumberFormat('en-US', options).format(target)
string split & reduce
var a = pricize(target, 3)
toFixed
var a = target.toFixed(3)
bignumber
var a = new BigNumber(target).toFormat(3)
numberWithCommas
var a = numberWithCommas(target.toFixed(3))

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

toFixed

16.0M/s

string split & reduce

6.5M/s

numberWithCommas

3.1M/s

bignumber

1.8M/s

toLocaleString

81K/s

Intl.NumberFormat

76K/s

Fastest: toFixed (210.6x faster)

View exact numbers

✓ toFixed: 15,982,369 ops/sec
• string split & reduce: 6,489,958 ops/sec
• numberWithCommas: 3,050,792 ops/sec
• bignumber: 1,760,352 ops/sec
• toLocaleString: 80,671 ops/sec
• Intl.NumberFormat: 75,876 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
toLocaleString
Intl.NumberFormat
string split & reduce
toFixed
bignumber
numberWithCommas

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0

Browser/OS: Chrome 135 on Windows

View result in a separate tab

toFixed

16.0M/s

string split & reduce

6.5M/s

numberWithCommas

3.1M/s

bignumber

1.4M/s

toLocaleString

65K/s

Intl.NumberFormat

63K/s

View exact numbers

Test name	Executions per second
✓ toFixed	15,982,369 Ops/sec
string split & reduce	6,489,958 Ops/sec
numberWithCommas	3,050,792 Ops/sec
bignumber	1,369,880 Ops/sec
toLocaleString	65,074 Ops/sec
Intl.NumberFormat	62,802 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a benchmark test suite for comparing different approaches to formatting and manipulating numbers in JavaScript. The test cases include:

1. `toLocaleString` (Web APIs)
2. `Intl.NumberFormat` (Internationalization API)
3. Custom solution using string split, reduce, and ternary operators (`string split & reduce`)
4. `toFixed` (builtin method)
5. `bignumber.js` library
6. `numberWithCommas` function

**Options Comparison**

Here's a brief overview of each option:

1. **toLocaleString**: This is a Web API method that formats numbers according to the user's locale settings. It is implemented in web browsers and provides a convenient way to format numbers for display purposes.
2. **Intl.NumberFormat**: This is an Internationalization API method that allows you to specify a custom locale and formatting options for numbers. It provides more control over the formatting than `toLocaleString` but may require more configuration.
3. **Custom solution (string split & reduce)**: This approach uses string manipulation techniques (split, reduce, and ternary operators) to format the number manually. While it can be done efficiently, it requires manual implementation of the formatting logic.
4. **toFixed**: This is a built-in method in JavaScript that rounds numbers to a specified decimal place. It can be used for simple formatting needs but may not provide the desired results for all use cases.
5. **bignumber.js library**: This is a third-party library that provides support for large integers and decimal arithmetic. While it offers some benefits, such as improved precision and performance, it requires additional setup and configuration.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **toLocaleString**:
	* Pros: Easy to use, reliable, and widely supported.
	* Cons: May not provide the desired formatting for all locales or cultures.
2. **Intl.NumberFormat**:
	* Pros: Provides more control over formatting, supports multiple locales, and can be customized.
	* Cons: May require more configuration and setup, not as widely supported as `toLocaleString`.
3. **Custom solution (string split & reduce)**:
	* Pros: Can provide high performance and flexibility, no external dependencies required.
	* Cons: Requires manual implementation of formatting logic, may not be as efficient for large datasets.
4. **toFixed**:
	* Pros: Easy to use, simple to implement, and widely supported.
	* Cons: May not provide the desired results for all decimal places or rounding modes.
5. **bignumber.js library**:
	* Pros: Offers improved precision and performance for large integers and decimal arithmetic.
	* Cons: Requires additional setup and configuration, may add complexity to your project.

**Other Considerations**

When choosing an approach, consider the following factors:

1. **Performance**: If you need high-performance formatting, consider using `Intl.NumberFormat` or a custom solution with optimized string manipulation techniques.
2. **Precision**: For large integers and decimal arithmetic, use the `bignumber.js library`.
3. **Customization**: If you require specific formatting options or support for multiple locales, use `Intl.NumberFormat`.
4. **Ease of use**: For simple formatting needs, consider using `toLocaleString` or `toFixed`.

Ultimately, the choice of approach depends on your specific requirements, performance constraints, and personal preference.

Intl.NumberFormat vs toLocalString vs string split vs toFixed vs bignumber vs regex (version: 0) Benchmark.js

Comparing performance of: `toLocaleString vs Intl.NumberFormat vs string split & reduce vs toFixed vs bignumber vs numberWithCommas`

Created: 4 years ago by: Guest

Go to the latest result

toLocaleString

Intl.NumberFormat

string split & reduce

toFixed

bignumber

numberWithCommas

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Intl.NumberFormat vs toLocalString vs string split vs toFixed vs bignumber vs regex (version: 0) Benchmark.js

Comparing performance of: toLocaleString vs Intl.NumberFormat vs string split & reduce vs toFixed vs bignumber vs numberWithCommas

Created: 4 years ago by: Guest

Go to the latest result

toLocaleString

Intl.NumberFormat

string split & reduce

toFixed

bignumber

numberWithCommas

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `toLocaleString vs Intl.NumberFormat vs string split & reduce vs toFixed vs bignumber vs numberWithCommas`