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

Script Preparation code:

var name = "name";

Tests:

using plus operator
for (let i = 0; i < 10; ++i) { let result = name + ": someItem"; }
using concat function
for (let i = 0; i < 10; ++i) { let result = "".concat(name, ": someItem"); }
using template literals
for (let i = 0; i < 10; ++i) { let result = `${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: 2 years ago)

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

Browser/OS: Chrome 107 on Windows

View result in a separate tab

Test name	Executions per second
using plus operator	1954964.9 Ops/sec
using concat function	1740529.0 Ops/sec
using template literals	1921074.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**What is being tested?**

The provided benchmark tests the performance of three different approaches for concatenating strings in JavaScript:

1. Using the `+` operator (also known as the "string concatenation" or "plus operator")
2. Using the `concat()` function
3. Using template literals (`${}`)

**Options comparison:**

Here's a brief overview of each approach, their pros and cons, and some considerations:

1. **Using the `+` operator:**
	* Pros: Simple, widely supported, and efficient.
	* Cons: Can be less readable than other approaches, especially for complex concatenations.
	* Considerations: This method is often used in JavaScript code, but it can lead to a lot of unnecessary string allocations and copying, which can impact performance.
2. **Using the `concat()` function:**
	* Pros: More readable than using the `+` operator, as it explicitly separates concatenation from other operations.
	* Cons: Less efficient than using template literals or the `+` operator.
	* Considerations: The `concat()` function is a built-in method that creates a new string object each time it's called. This can lead to unnecessary allocations and copying.
3. **Using template literals (`${}`):**
	* Pros: Most readable of the three options, as it explicitly separates variables from formatting.
	* Cons: Requires support for ES6+ syntax ( template literals were introduced in ECMAScript 2015).
	* Considerations: Template literals are a concise way to format strings and can be more efficient than using `concat()` or the `+` operator.

**Libraries used in test cases:**

None of the provided benchmark definitions include any external libraries. However, it's worth noting that some JavaScript engines may use internal libraries for string manipulation.

**Special JS features or syntax:**

The benchmark uses ES6+ syntax (template literals) and assumes support for `let` and `const` declarations, which were introduced in ECMAScript 2015.

Related benchmarks:

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

find best solution for concatenate 4 strings

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

Created: 2 years ago by: Guest

Jump to the latest result

using plus operator

using concat function

using template literals

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):