Benchmark: Array join vs string template

Script Preparation code:

var str = "Hello World"
var newStr = "Goodbye"
var start = 5

Tests:

Array
const foo = [ str.slice(0, start), newStr, str.slice(start) ].join('')
template literal
const foo = `${str.slice(0, start)}${newStr}${str.slice(start)}`

Historical Performance Data aggregated from 38 community runs

Desktop Results:

Chrome 33 runs

template literal

6.2M/s

Array

5.0M/s

Fastest: template literal (1.2x faster)

View exact numbers

✓ template literal: 6,242,299 ops/sec
• Array: 5,021,521 ops/sec

Firefox 5 runs

template literal

159.5M/s

Array

21.4M/s

Fastest: template literal (7.5x faster)

View exact numbers

✓ template literal: 159,535,520 ops/sec
• Array: 21,394,362 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
Array
template literal

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 19 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:154.0) Gecko/20100101 Firefox/154.0

Browser/OS: Firefox 154 on Linux

View result in a separate tab

template literal

57.1M/s

Array

9.5M/s

View exact numbers

Test name	Executions per second
✓ template literal	57,058,992 Ops/sec
Array	9,523,519 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's being tested.

**Benchmark Overview**

The benchmark compares two approaches to concatenate strings in JavaScript:

1. **Array join**: Using the `join()` method on an array of strings.
2. **String template literal**: Using template literals (introduced in ECMAScript 2015) to concatenate strings.

**Options Compared**

The two options are compared, with each option being tested separately. This allows for a fair comparison between the two approaches.

**Pros and Cons of Each Approach**

1. **Array join**:
	* Pros:
		+ Wide browser support (has been around since ECMAScript 5).
		+ Fast execution time.
	* Cons:
		+ Can be less readable than template literals.
		+ May not work as expected if the array contains non-string elements.
2. **String template literal**:
	* Pros:
		+ More readable and expressive than array join.
		+ Can handle more complex string concatenation scenarios (e.g., interpolating variables).
	* Cons:
		+ Requires ECMAScript 2015 support (older browsers may not work).

**Library/Feature Description**

The benchmark uses JavaScript's built-in `slice()` method, which is a standard library function that extracts a specified section of an array or string.

There are no special JS features or syntax used in this benchmark, except for the use of template literals, which was introduced in ECMAScript 2015.

**Other Alternatives**

Before template literals, developers could use other methods to concatenate strings, such as:

1. `+` operator (e.g., `str + newStr`).
2. Function calls with arguments (e.g., `function concat(a, b) { return a + b; }`).

However, these alternatives are less readable and expressive than template literals.

**Benchmark Preparation Code**

The preparation code sets up the benchmark by defining:

1. Two string variables (`str` and `newStr`) containing "Hello World" and "Goodbye", respectively.
2. A variable `start` with a value of 5, which is used to slice the strings.

The script prepares for execution by assigning these values.

**Individual Test Cases**

Each test case consists of a single benchmark definition:

1. **Array**: Tests the use of array join to concatenate the strings.
2. **Template literal**: Tests the use of string template literals to concatenate the strings.

These test cases are executed in separate runs, allowing for a direct comparison between the two approaches.

Array join vs string template (version: 0) Benchmark.js

Comparing performance of: `Array vs template literal`

Created: 5 years ago by: Guest

Go to the latest result

Array

template literal

Historical Performance Data aggregated from 38 community runs

Desktop Results:

Chrome 33 runs

Firefox 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):

Array join vs string template (version: 0) Benchmark.js

Comparing performance of: Array vs template literal

Created: 5 years ago by: Guest

Go to the latest result

Array

template literal

Historical Performance Data aggregated from 38 community runs

Desktop Results:

Chrome 33 runs

Firefox 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: `Array vs template literal`