Benchmark: template literal vs array.join vs string.concat vs the + operator

Script Preparation code:

var a = 'a';
var b = 'b';
var c = 'c';
var abc = [a,b,c];

Tests:

template literal
for (let n = 0; n < 1000; n++) { return `${a} ${b} ${c}`; }
array join
for (let n = 0; n < 1000; n++) { return abc.join(' '); }
string concat
for (let n = 0; n < 1000; n++) { return ''.concat(a, ' ', b, ' ', c); }
the + operator
for (let n = 0; n < 1000; n++) { return a + ' ' + b + ' ' + c; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
template literal
array join
string concat
the + operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
template literal	645710848.0 Ops/sec
array join	40911488.0 Ops/sec
string concat	660380416.0 Ops/sec
the + operator	672845440.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 JavaScript microbenchmark test case on the MeasureThat.net website. The test compares four different approaches to concatenate strings: template literals, array join, string concatenation using the `concat()` method, and the addition operator (`+`).

**What is being tested?**

In each test case, a loop runs 1000 times, performing the specified operation on three string variables: `a`, `b`, and `c`. The goal is to measure which approach performs better in terms of execution speed.

**Options compared:**

1. **Template literal**: Using template literals (e.g., `${a} ${b} ${c}`) to concatenate strings.
2. **Array join**: Using the `join()` method on an array containing the string variables (e.g., `abc.join(' ')`).
3. **String concatenation using `concat()`:** Using the `concat()` method to concatenate strings (e.g., `''.concat(a, ' ', b, ' ', c)`).
4. **The addition operator (`+`)**: Using the addition operator to concatenate strings (e.g., `a + ' ' + b + ' ' + c`).

**Pros and cons of each approach:**

1. **Template literals:**
	* Pros: Readable, concise, and efficient.
	* Cons: May not be supported in older browsers or environments.
2. **Array join:**
	* Pros: Easy to implement and works well with arrays.
	* Cons: Can be slower than other approaches due to the overhead of creating an array.
3. **String concatenation using `concat()`:**
	* Pros: Works well with arrays, but may not be as efficient as template literals or string addition.
	* Cons: Requires more code and can lead to performance issues if used excessively.
4. **The addition operator (`+`):**
	* Pros: Lightweight and easy to use.
	* Cons: Can result in slower performance due to the creation of intermediate strings.

**Library usage**

None of the test cases explicitly uses a library, but they do rely on the `join()` method, which is a built-in JavaScript method for joining arrays of strings into a single string.

**Special JS feature or syntax**

The template literal approach (`${a} ${b} ${c}`) uses a special syntax introduced in ECMAScript 2015 (ES6). This syntax allows for more readable and efficient string concatenation.

**Benchmark results**

The latest benchmark results show that the array join method is currently the fastest, followed closely by the template literal approach. The string concatenation using `concat()` method comes third, while the addition operator (`+`) performs the worst due to its overhead.

**Other alternatives**

If you're looking for alternative approaches to concatenate strings in JavaScript, consider:

1. Using a library like Lodash's `join` function or Underscore.js's `template` function.
2. Employing a more functional programming approach using methods like `reduce()` or `map()`.
3. Utilizing string interpolation techniques, such as using CSS template literals (if supported by your environment).

Keep in mind that the choice of approach ultimately depends on your specific use case and performance requirements.

Related benchmarks:

template literal vs array.join vs string.concat vs the + operator (version: 0)

Comparing performance of: template literal vs array join vs string concat vs the + operator

Created: 3 years ago by: Guest

Jump to the latest result

template literal

array join

string concat

the + operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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