Benchmark: Intl.NumberFormat vs toLocalString vs string split & reduce (with fraction digits) vs toFixed

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:142.0) Gecko/20100101 Firefox/142.0

Browser/OS: Firefox 142 on Windows

View result in a separate tab

Test name	Executions per second
toLocaleString	66847.0 Ops/sec
Intl.NumberFormat	65749.9 Ops/sec
string split & reduce	5074372.5 Ops/sec
toFixed	18154762.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

**Overview**

The benchmark compares four different ways to format a decimal number: `toLocaleString`, `Intl.NumberFormat`, string split and reduce, and `toFixed`. The test uses a target value of 123456789.123456789 and various options for each method.

**Options compared**

1. **`toLocaleString`**: This method formats the number as a string using the locale settings. In this case, it's set to English (US) with decimal comma as thousands separator.
2. **`Intl.NumberFormat`**: This is an internationalization API that allows you to format numbers according to various locales and options. Here, it's set to English (US) with a specific number of fraction digits (3).
3. **String split and reduce**: This approach uses string manipulation to separate the integer and fractional parts of the number and then recombine them.
4. **`toFixed`**: This method rounds the number to a specified decimal place.

**Pros and Cons**

1. **`toLocaleString`**:
	* Pros: Wide support across browsers, easy to use, and suitable for most use cases.
	* Cons: May not always produce the expected result due to locale settings or formatting differences.
2. **`Intl.NumberFormat`**:
	* Pros: More precise control over formatting, supports multiple locales, and can handle complex number formats.
	* Cons: Can be slower than other methods, may require additional setup, and support for some features is not universal (e.g., currency symbols).
3. **String split and reduce**:
	* Pros: Customizable and flexible, can produce precise results.
	* Cons: May be slower than other methods due to string manipulation, prone to errors if not implemented carefully, and may not work as expected in all browsers or locales.
4. **`toFixed`**:
	* Pros: Simple and fast, suitable for most use cases where precision is not critical.
	* Cons: Can produce unexpected results when rounding, especially with non-integer values.

**Library and its purpose**

In this benchmark, the `Intl.NumberFormat` library is used to format numbers according to a specific locale and options. The library provides a way to customize formatting, handle complex number formats, and support multiple locales.

**Special JavaScript feature or syntax**

The test uses some advanced JavaScript features:

1. **Template literals**: Used in the string split and reduce approach to manipulate strings.
2. **Arrow functions**: Used in the Intl.NumberFormat example to define a small anonymous function for formatting numbers.

**Other alternatives**

If you need more precise control over number formatting or want to support multiple locales, you might consider using:

1. **Moment.js**: A popular library for date and time manipulation that also provides formatting options.
2. ** numeral.js**: Another library that allows for precise control over number formatting.
3. **jsnum**: A lightweight library that provides a simple way to work with decimal numbers.

Keep in mind that the choice of library or approach depends on your specific use case, performance requirements, and desired level of customization.

Related benchmarks:

Intl.NumberFormat vs toLocalString vs string split & reduce (with fraction digits) vs toFixed (version: 0)

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

Created: 5 years ago by: Guest

Jump to the latest result

toLocaleString

Intl.NumberFormat

string split & reduce

toFixed

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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