Benchmark: Native JS: concatenate string with + vs template literals vs String.concat v2

Script Preparation code:

var name = "name";
var id = "id";
var result = "";
var i = 0;

Tests:

using plus operator
for (i = 0; i < 80; ++i) { result = id + ": 1, " + name + ": someItem"; }
using concat function
for (i = 0; i < 80; ++i) { result = "".concat(id, ": 1, ", name, ": someItem"); }
using template literals
for (i = 0; i < 80; ++i) { result = `${id}: 1, ${name}: someItem`; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
using plus operator
using concat function
using template literals

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 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

Browser/OS: Chrome 142 on Windows

View result in a separate tab

Test name	Executions per second
using plus operator	25474.4 Ops/sec
using concat function	23483.7 Ops/sec
using template literals	24312.7 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 provided benchmark and explain what is being tested, compared, and their pros and cons.

**Benchmark Overview**

The test aims to measure the performance of concatenating strings in JavaScript using three different approaches:

1. **Plus Operator (`+`)**: Using the `+` operator to concatenate two or more strings.
2. **Template Literals**: Using template literals (backticks `` ``) to create a new string by inserting expressions inside them.
3. **Concat Function (`String.concat()` v2)**: Using the `concat()` method on the `String` prototype to concatenate two or more strings.

**Comparison**

The test case is designed to compare the performance of these three approaches for concatenating 4 strings.

**Pros and Cons**

*   **Plus Operator (`+`)**:
    *   Pros: widely supported, easy to use.
    *   Cons: can lead to slower performance due to string creation and copying.
*   **Template Literals**: 
    *   Pros: faster performance, more readable code.
    *   Cons: requires backticks ` `` around the expressions to be concatenated.
*   **Concat Function (`String.concat()` v2)**:
    *   Pros: fast performance, allows for easy concatenation of multiple strings.
    *   Cons: less commonly used due to its less intuitive syntax.

**Library Used**

There is no explicit library mentioned in the benchmark definition. However, it uses a `concat()` function which was part of the JavaScript standard library from the 4th edition onwards.

**Special JS Features or Syntax**

Template literals are a relatively new feature introduced in ECMAScript 2015 (ES6). They allow creating strings by inserting expressions inside backticks `` ` ``. This syntax is more readable and efficient than traditional string concatenation methods.

**Benchmark Result Interpretation**

The provided benchmark result shows the performance of each approach across different executions per second for Mobile Safari 14 on an iPhone running iOS 14.5.1. The results suggest that template literals outperform both plus operator and concat function for this test case, likely due to their more efficient string creation mechanism.

**Alternatives**

If you need to concatenate strings in JavaScript but want alternatives to the above approaches:

*   **Spread Operator (`...`)**: This is another modern syntax introduced in ES6 that allows creating arrays or objects by spreading existing ones. It can also be used for string concatenation, although it may not offer better performance than template literals.
*   **String Interpolation**: Some modern JavaScript frameworks and libraries (like React) use a feature called "string interpolation," which uses special syntax to create strings by replacing placeholders with actual values. This approach can be more readable but is usually less performant than traditional string concatenation methods.

In summary, the test case aims to compare the performance of different string concatenation methods in JavaScript: plus operator, template literals, and concat function. Template literals are shown to outperform the other two due to their faster execution time, likely because they avoid creating temporary strings during concatenation.

Related benchmarks:

Native JS: concatenate string with + vs template literals vs String.concat v2 (version: 0)

find best solution for concatenate 4 strings

Comparing performance of: using plus operator vs using concat function vs using template literals

Created: 4 years ago by: Guest

Jump to the latest result

using plus operator

using concat function

using template literals

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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