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

Script Preparation code:

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

Tests:

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

Historical Performance Data aggregated from 171 community runs

Desktop Results:

Chrome 121 runs

using plus operator

113K/s

using template literals

111K/s

using concat function

92K/s

Fastest: using plus operator (1.2x faster)

View exact numbers

✓ using plus operator: 113,081 ops/sec
• using template literals: 110,857 ops/sec
• using concat function: 92,291 ops/sec

Firefox 31 runs

using plus operator

14.8M/s

using template literals

4.2M/s

using concat function

280K/s

Fastest: using plus operator (52.8x faster)

View exact numbers

✓ using plus operator: 14,794,168 ops/sec
• using template literals: 4,172,990 ops/sec
• using concat function: 280,445 ops/sec

Mobile Results:

Chrome 12 runs

using plus operator

35K/s

using template literals

34K/s

using concat function

28K/s

Fastest: using plus operator (1.2x faster)

View exact numbers

✓ using plus operator: 34,521 ops/sec
• using template literals: 33,877 ops/sec
• using concat function: 27,944 ops/sec

Safari 7 runs

using plus operator

38K/s

using template literals

38K/s

using concat function

33K/s

Fastest: using plus operator (1.2x faster)

View exact numbers

✓ using plus operator: 38,432 ops/sec
• using template literals: 38,105 ops/sec
• using concat function: 32,597 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
using plus operator
using concat function
using template literals

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Browser/OS: Chrome 149 on Windows

View result in a separate tab

using plus operator

116K/s

using template literals

114K/s

using concat function

84K/s

View exact numbers

Test name	Executions per second
✓ using plus operator	115,976 Ops/sec
using template literals	113,866 Ops/sec
using concat function	84,442 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 explanation.

**Benchmark Purpose and Comparison**

The provided benchmark measures the performance of three different methods to concatenate strings in JavaScript:

1. Using the `+` operator
2. Using the `concat()` function
3. Using template literals (`${}`)

The goal is to find the best solution for concatenating four strings, which is a common operation in many JavaScript applications.

**Pros and Cons of Each Approach**

1. **Using the `+` operator**: This method is simple and widely supported, but it can lead to performance issues due to string concatenation creating new objects each time. It's also slower than other methods.
2. **Using the `concat()` function**: The `concat()` function is a built-in method that creates a new object by concatenating multiple strings. While it's slightly faster than using the `+` operator, it still involves creating and garbage-collecting objects, which can be slower.
3. **Using template literals**: Template literals are a modern feature introduced in ECMAScript 2015 (ES6). They provide a more concise and readable way to concatenate strings while avoiding the need for explicit concatenation methods.

Template literals have several advantages:

* They avoid creating intermediate objects or using explicit concatenation methods.
* They provide better readability and maintainability.
* They're supported by most modern browsers, including Firefox 131.

However, template literals might not be supported in older browsers, which could affect the benchmark results.

**Library Usage**

None of the test cases use any libraries explicitly. However, the `concat()` function is a built-in method that uses JavaScript's string concatenation mechanism under the hood.

**Special JS Features or Syntax**

The benchmark uses the `let` keyword for variable declarations (introduced in ECMAScript 2015), which is not a special feature per se but has become increasingly common in modern JavaScript code. Additionally, the use of arrow functions (`=>`) is not relevant to this specific benchmark.

**Other Alternatives**

If you wanted to explore other alternatives, you could consider:

* Using `String.join()` method (introduced in ECMAScript 2009)
* Using a custom function or module for string concatenation
* Using a library like Underscore.js or Lodash for string manipulation

However, these alternatives are not part of the original benchmark and would likely change the outcome of the performance comparison.

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

find best solution for concatenate 4 strings

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

Created: 6 years ago by: Registered User

Go to the latest result

using plus operator

using concat function

using template literals

Historical Performance Data aggregated from 171 community runs

Desktop Results:

Chrome 121 runs

Firefox 31 runs

Mobile Results:

Chrome 12 runs

Safari 7 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: concatenate string with + vs template literals vs String.concat (version: 0) Benchmark.js

find best solution for concatenate 4 strings

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

Created: 6 years ago by: Registered User

Go to the latest result

using plus operator

using concat function

using template literals

Historical Performance Data aggregated from 171 community runs

Desktop Results:

Chrome 121 runs

Firefox 31 runs

Mobile Results:

Chrome 12 runs

Safari 7 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: `using plus operator vs using concat function vs using template literals`