Benchmark: new Intl.DateTimeFormat vs new Date().toLocaleDateString()

Script Preparation code:

var options = {
  year: 'numeric', month: 'numeric', day: 'numeric',
  hour: 'numeric', minute: 'numeric', second: 'numeric',
  hour12: false,
  fractionalSecondDigits: 3,
}

Tests:

new Date()
(new Date()).toISOString().trim().replace('T', ' ').replace('Z', '')
Intl.DateTimeFormat()
new Intl.DateTimeFormat('en-US', options).format(new Date())
Date().toLocaleString()
new Date().toLocaleString("en-US", options)
JavaScript Date Time format
let date_time = new Date() let formatted_date = date_time.getFullYear() + "-" + (date_time.getMonth() + 1) + "-" + date_time.getDate() + " " + date_time.getHours() + ":" + date_time.getMinutes() + ":" + date_time.getSeconds() + "." + date_time.getMilliseconds()
JavaScript Date Time format using Template Strings.
let date_time = new Date() let formatted_date = `${date_time.getFullYear()}-${date_time.getMonth() + 1}-${date_time.getDate()} ${date_time.getHours()}:${date_time.getMinutes()}:${date_time.getSeconds()}.${date_time.getMilliseconds()}`

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
new Date()
Intl.DateTimeFormat()
Date().toLocaleString()
JavaScript Date Time format
JavaScript Date Time format using Template Strings.

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 141 on Windows

View result in a separate tab

Test name	Executions per second
new Date()	638444.1 Ops/sec
Intl.DateTimeFormat()	14913.5 Ops/sec
Date().toLocaleString()	16722.9 Ops/sec
JavaScript Date Time format	6306896.5 Ops/sec
JavaScript Date Time format using Template Strings.	6414160.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a benchmark test case named "new Intl.DateTimeFormat vs new Date().toLocaleDateString()". This test compares the performance of two approaches to format dates in JavaScript:

1. Using `Intl.DateTimeFormat` with specific options
2. Using `Date()` and `toLocaleString()` methods

**Options Comparison**

The test uses specific options for `Intl.DateTimeFormat`, which are compared to the default formatting behavior of `Date().toLocaleString()`. The options used are:

* `year`: formats the year as a number (numeric)
* `month`: formats the month as a number (numeric)
* `day`: formats the day as a number (numeric)
* `hour`: formats the hour as a number (numeric)
* `minute`: formats the minute as a number (numeric)
* `second`: formats the second as a number (numeric)
* `hour12`: sets the hour format to 24-hour clock (false, default)
* `fractionalSecondDigits`: formats the fractional seconds part to 3 digits

**Pros and Cons**

* Using `Intl.DateTimeFormat` provides more control over formatting options and can handle different locales.
	+ Pros:
		- More flexible and customizable
		- Can handle dates in different locales
	+ Cons:
		- May be slower due to the additional complexity of the function
* Using `Date()` and `toLocaleString()` is simpler and more straightforward.
	+ Pros:
		- Faster and more lightweight
		- Easier to understand and implement
	+ Cons:
		- Less flexible and customizable
		- May not work correctly for all locales

**Library: Intl.DateTimeFormat**

`Intl.DateTimeFormat` is a part of the ECMAScript Internationalization API, which provides functions for formatting dates and numbers according to the rules of different languages. The `DateTimeFormat` function takes an options object with various properties that control the formatting behavior.

**Special JS Feature/Syntax: Template Literals (Template Strings)**

The test also includes two versions of the JavaScript Date Time format using template literals:

1. Old syntax:
```javascript
let date_time = new Date()
let formatted_date = date_time.getFullYear() + "-" + (date_time.getMonth() + 1) + "-" + date_time.getDate() + " " + date_time.getHours() + ":" + date_time.getMinutes() + ":" + date_time.getSeconds() + "." + date_time.getMilliseconds()
```

2. New syntax:
```javascript
let date_time = new Date()
let formatted_date = `${date_time.getFullYear()}-${date_time.getMonth() + 1}-${date_time.getDate()} ${date_time.getHours()}:${date_time.getMinutes()}:${date_time.getSeconds()}.${date_time.getMilliseconds()}\r\n`
```

The main difference between the two is that the old syntax uses string concatenation (`+`), while the new syntax uses template literals (`${}`). Template literals provide a more readable and concise way to format strings, but they are also slightly slower due to the additional complexity of the function.

**Other Alternatives**

If you need to compare performance with other date formatting approaches, consider adding tests for:

* Using `Date()` without any formatting options
* Using `Moment.js` or other third-party libraries for date formatting
* Using CSS or HTML for date formatting (e.g., using `:before` pseudo-elements)

Keep in mind that each alternative may have its own trade-offs and considerations, so make sure to test and analyze the performance of each approach accordingly.

Related benchmarks:

new Intl.DateTimeFormat vs new Date().toLocaleDateString() (version: 0)

Comparing performance of: new Date() vs Intl.DateTimeFormat() vs Date().toLocaleString() vs JavaScript Date Time format vs JavaScript Date Time format using Template Strings.

Created: 5 years ago by: Guest

Jump to the latest result

new Date()

Intl.DateTimeFormat()

Date().toLocaleString()

JavaScript Date Time format

JavaScript Date Time format using Template Strings.

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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