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

Script Preparation code:

const count = 10000;

Tests:

using plus operator
for (let i = 0; i < count; ++i) { let result = i result += 'px'; }
using concat function
for (let i = 0; i < count; ++i) { let result = i result = ''.concat(result, 'px'); }
using template literals
for (let i = 0; i < count; ++i) { let result = i result = `${result}px`; }

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: 4 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
using plus operator	87032.7 Ops/sec
using concat function	1674.7 Ops/sec
using template literals	3436.4 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 6 days ago):

LLMs can make mistakes. Check important info.

The provided benchmark focuses on measuring the performance of three different methods for concatenating strings in JavaScript. Specifically, it evaluates the efficiency of concatenating an integer converted to a string with the suffix 'px' using the following three approaches:

1. **Using the Plus Operator (`+`)**
2. **Using the `String.concat` Function**
3. **Using Template Literals (`` `${}` ``)**

### Comparison of Options

1. **Using Plus Operator (`+`)**
   - **Pros**:
     - Simple and widely used for string concatenation.
     - Generally offers the best performance in this benchmark, as indicated by the execution speed.
   - **Cons**:
     - Can become less readable and harder to manage when dealing with complex concatenations involving multiple variables or strings.
   
2. **Using `String.concat` Function**
   - **Pros**:
     - Explicitly indicates the intent to concatenate multiple strings, which can improve readability in certain contexts.
   - **Cons**:
     - Significantly slower than using the plus operator in this benchmark, suggesting less efficiency for simple concatenations. 
     - Potentially less recognizable for developers familiar primarily with the plus operator for concatenation.

3. **Using Template Literals (`` `${}` ``)**
   - **Pros**:
     - Enhances readability, particularly when dealing with complex expressions or multiple variables.
     - Facilitates multi-line strings and embedding of expressions directly within the string.
   - **Cons**:
     - Performance is the lowest among the tested options, indicating that it may not be suitable for performance-critical applications where numerous concatenations are required.

### Library and Features
In this benchmark, no external libraries are used; all three methods are native JavaScript features. Specifically, Template Literals is a feature introduced in ES6 (ECMAScript 2015) that enables a more flexible way to construct strings.

### Other Considerations

When considering alternatives to these methods:
- **Array Join**: Concatenating strings using an array and the `join` method (i.e., `array.join('')`) can be more efficient when constructing a string from many pieces, especially within loops. This approach avoids the issues of repeated string allocations.
  
- **String Interpolation Libraries**: In some cases, libraries like `lodash` or `sprintf-js` can be used for formatted string construction, but they usually come at a cost due to additional overhead.

In summary, when opting for string concatenation in JavaScript, the choice between these methods often hinges on the need for performance versus readability. The benchmark clearly shows that for simple and frequent concatenations, the plus operator (`+`) is the standout choice, while Template Literals and `String.concat` offer advantages in readability and structure.

Related benchmarks:

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

find best solution for concatenate 4 strings

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

Created: 6 days ago by: Registered User

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 gpt-4o-mini, generated 6 days ago):