Benchmark: shvaer 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`; }

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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!

**Benchmark Definition**

The provided JSON represents a benchmark that tests three different approaches to concatenating strings in JavaScript:

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

**Script Preparation Code**

The script preparation code is:
```javascript
var name = "name";
var id = "id";
```
This sets two variables, `name` and `id`, to string values.

**Html Preparation Code**

The HTML preparation code is empty (i.e., `null`). This suggests that the benchmark doesn't require any specific HTML structure or content.

**Individual Test Cases**

There are three test cases:

1. **Using plus operator**
```javascript
for (let i = 0; i < 80; ++i) {
  let result = id + ": 1, " + name + ": someItem";
}
```
This code uses the `+` operator to concatenate the strings `id`, `": 1, ",` and `name`, with the string `"someItem"`.

2. **Using concat function**
```javascript
for (let i = 0; i < 80; ++i) {
  let result = "" + id + ": 1, " + name + ": someItem";
}
```
This code uses the `concat()` function to concatenate strings.

3. **Using template literals**
```javascript
for (let i = 0; i < 80; ++i) {
  let result = `${id}: 1, ${name}: someItem`;
}
```
This code uses template literals (`${}`) to concatenate the strings `id`, `": 1, ",` and `name`, with the string `"someItem"`.

**Benchmark Results**

The latest benchmark results show the performance of each approach on a specific browser (Safari 16) and device platform (Desktop):

* **Using plus operator**: 184714.203125 executions per second
* **Using template literals**: 179995.015625 executions per second
* **Using concat function**: 90758.3984375 executions per second

**Library Used**

None of the test cases use any external libraries.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax used in this benchmark (e.g., `let` declarations, arrow functions, `async/await`, etc.).

**Other Alternatives**

If you're interested in exploring other alternatives for string concatenation in JavaScript, here are a few:

* Using the `+` operator with string formatting: `id + ": 1, " + name + ": someItem"`. This approach is similar to the plus operator method but allows for more formatting options.
* Using `String.prototype.replace()` and `String.prototype.split()`: This approach involves splitting the strings into substrings using a regex pattern, replacing the substring with the desired concatenation, and then joining them back together.

Keep in mind that these alternatives may not always be faster or more efficient than the approaches tested in this benchmark. The performance results can vary depending on specific use cases, browser versions, and device platforms.

Related benchmarks:

shvaer Native JS: concatenate string with + vs template literals vs String.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>

Fastest: N/A

Slowest: N/A

No previous run results

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