Benchmark: template literal vs array.join vs unallocated 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; }
unallocated array join
for (let n = 0; n < 1000; n++) { return [a,b,c].join(' '); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 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	337797696.0 Ops/sec
array join	20176032.0 Ops/sec
string concat	32991010.0 Ops/sec
the + operator	320837216.0 Ops/sec
unallocated array join	18043746.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark compares the performance of four different ways to concatenate strings in JavaScript:

1. **Template Literal**: Using template literals (the `${}` syntax) to concatenate strings.
2. **Array Join**: Using the `join()` method on an array of strings to concatenate them.
3. **String Concat**: Using the dot notation (`concat()`) to concatenate strings.
4. **The + Operator**: Using the addition operator (+) with string concatenation.

**Options Compared**

Each option is compared using a simple test case: concatenating three strings ("a", "b", and "c") 1000 times in a loop.

**Pros and Cons of Each Approach**

1. **Template Literal**:
	* Pros: Concise, readable, and efficient.
	* Cons: Not supported in older browsers (pre-ES6).
2. **Array Join**:
	* Pros: Efficient, as it avoids creating intermediate strings.
	* Cons: Creates an array of strings, which can be memory-intensive for large inputs.
3. **String Concat**:
	* Pros: Widely supported across browsers and versions.
	* Cons: Less readable than template literals and can create multiple intermediate strings.
4. **The + Operator**:
	* Pros: Widely supported and efficient.
	* Cons: Can be less readable than other methods.

**Library Usage**

None of the test cases use any external libraries.

**Special JS Features**

There are no special JavaScript features or syntax used in these benchmark test cases, apart from template literals which is a modern ES6 feature.

However, it's worth noting that older browsers may not support some of these features.

**Other Alternatives**

If you were to consider other alternatives for string concatenation, you might also look at:

* Using `StringBuilder` objects (not supported in JavaScript).
* Using `String.prototype.replace()` with a regex pattern (less efficient than the + operator).

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

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

template literal

array join

string concat

the + operator

unallocated array join

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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