Benchmark: Native JS: Array.join strings vs template literals vs String.concat

Script Preparation code:

var name = "name";
var id = "id";

Tests:

join
for (let i = 0; i < 80; ++i) { let result = [id, ':', i, ', ', name, ':', 'name', i].join(); }
concat
for (let i = 0; i < 80; ++i) { let result = "".concat(id, ':', i, ', ', name, ':', 'name', i); }
using template literals
for (let i = 0; i < 80; ++i) { let result = `${id}:${i}, ${name}:name${i}`; }

Historical Performance Data aggregated from 37 community runs

Desktop Results:

Chrome 37 runs

using template literals

138K/s

concat

96K/s

join

66K/s

Fastest: using template literals (2.1x faster)

View exact numbers

✓ using template literals: 137,601 ops/sec
• concat: 96,315 ops/sec
• join: 66,438 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
join
concat
using template literals

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0

Browser/OS: Chrome 142 on Windows

View result in a separate tab

using template literals

130K/s

concat

84K/s

join

54K/s

View exact numbers

Test name	Executions per second
✓ using template literals	130,347 Ops/sec
concat	83,917 Ops/sec
join	53,875 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help you understand the provided benchmark.

**Benchmark Overview**

The benchmark compares three approaches for concatenating strings in JavaScript:

1. `String.concat()`
2. Template literals (`${}`)
3. The older method of using the `join()` method with an array of strings

**Options Compared**

Here's a brief description of each approach:

* **`String.concat()`**: This is a method that concatenates two or more strings together, returning a new string. It takes multiple arguments and returns a single concatenated string.
* **Template literals (`${}`)**: Introduced in ECMAScript 2015 (ES6), template literals allow you to embed expressions inside backticks (``) and use them as values in string concatenation. They provide more readable syntax than traditional string concatenation methods.
* **`join()` method**: This is a method of arrays that returns a new array containing all elements from the original array, separated by a specified separator.

**Pros and Cons**

Here are some pros and cons of each approach:

* **`String.concat()`**:
	+ Pros: Simple syntax, widely supported in older browsers.
	+ Cons: Can lead to performance issues with large strings or many concatenations, as it creates multiple temporary strings.
* **Template literals (`${}`)**:
	+ Pros: Readable syntax, more efficient than `join()` method for small strings, and can handle nested expressions.
	+ Cons: Requires support for ES6 features in older browsers, may be less familiar to developers without recent training.
* **`join()` method**:
	+ Pros: Can handle large arrays efficiently, but requires an array as input.
	+ Cons: Less readable syntax than template literals or `concat()`, and may not work with non-array inputs.

**Library Usage**

There is no library explicitly mentioned in the benchmark definition. However, if you were to use a library like jQuery, it might provide an alternative implementation for string concatenation, such as using its `$()` function.

**Special JS Features/Syntax**

The benchmark uses ES6 template literals (`${}`) and `let`/`const` declarations, which are part of modern JavaScript syntax. If you're not familiar with these features, they can be explained briefly:

* **Template literals**: Allows you to embed expressions inside backticks (``) in your code, making string concatenation more readable.
* **`let`/`const`**: Declares variables that have a scope and are scoped to the surrounding block. They're used here to declare variables `id` and `name`.

**Alternative Approaches**

If you'd like to explore alternative approaches for string concatenation in JavaScript, consider:

* Using `+` operator for traditional string concatenation
* Utilizing `String.prototype.replace()` method with a regex pattern to concatenate strings
* Employing a library or function that provides a specific implementation for string concatenation (e.g., jQuery's `$().text()` method)

Native JS: Array.join strings vs template literals vs String.concat (version: 0)

find the best solution for concatenate strings

Comparing performance of: `join vs concat vs using template literals`

Created: 4 years ago by: Guest

Go to the latest result

join

concat

using template literals

Historical Performance Data aggregated from 37 community runs

Desktop Results:

Chrome 37 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Native JS: Array.join strings vs template literals vs String.concat (version: 0)

find the best solution for concatenate strings

Comparing performance of: join vs concat vs using template literals

Created: 4 years ago by: Guest

Go to the latest result

join

concat

using template literals

Historical Performance Data aggregated from 37 community runs

Desktop Results:

Chrome 37 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: `join vs concat vs using template literals`