Benchmark: Template vs string concat 2

Script Preparation code:

var obj = {0:"test",1:"test",2:"test",3:"test"};

​x
 
var obj = {0:"test",1:"test",2:"test",3:"test"};​​​

Tests:

Concatenation

for (let i = 0; i < 10000; i++){
 	let s = "";
  	for (let j = 0; j < 4; j++){
    	s += obj[j] + " - "; 
    }
    s = s.substring(0,s.length - 3);
}

 
for (let i = 0; i < 10000; i++){    let s = "";    for (let j = 0; j < 4; j++){        s += obj[j] + " - ";     }    s = s.substring(0,s.length - 3);}​

Template strings

for (let i = 0; i < 10000; i++){
 	let s = `${obj[0]} - ${obj[1]} - ${obj[2]} - ${obj[3]}`;
}

 
for (let i = 0; i < 10000; i++){    let s = `${obj[0]} - ${obj[1]} - ${obj[2]} - ${obj[3]}`;}

Concatenating strings with template strings

for (let i = 0; i < 10000; i++){
 	let s = "";
  	for (let j = 0; j < 2; j++){
    	s += obj[j] + " - "; 
    }
    s += `${obj[2]} - `;
    s += `${obj[3]}`;
}

 
for (let i = 0; i < 10000; i++){    let s = "";    for (let j = 0; j < 2; j++){        s += obj[j] + " - ";     }    s += `${obj[2]} - `;    s += `${obj[3]}`;}

Concatenation without substring call
for (let i = 0; i < 10000; i++){ let s = obj[0] + " - " + obj[1] + " - " + obj[2] + " - " + obj[3]; }
for (let i = 0; i < 10000; i++){
let s = obj[0] + " - " + obj[1] + " - " + obj[2] + " - " + obj[3];
}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Concatenation
Template strings
Concatenating strings with template strings
Concatenation without substring call

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/110.0.0.0 Safari/537.36

Browser/OS: Chrome 110 on Windows

View result in a separate tab

Test name	Executions per second
Concatenation	267.6 Ops/sec
Template strings	322.1 Ops/sec
Concatenating strings with template strings	293.5 Ops/sec
Concatenation without substring call	326.5 Ops/sec

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

Let's dive into the benchmark and explore what's being tested.

Benchmark Overview

The benchmark is comparing four different approaches to concatenate strings in JavaScript:

Template literals (Template strings)
Concatenating strings using the + operator
Concatenating strings without calling substring()
Concatenating strings with template literals, but only appending two elements at a time

Options Being Compared

The benchmark is comparing the performance of these four approaches on a specific use case:

Creating an object obj with 4 string properties
Looping 10,000 times and concatenating the string values using each approach

Pros and Cons of Each Approach

Template literals (Template strings):
- Pros: readable, efficient, and modern syntax.
- Cons: not supported in older browsers or Node.js versions.
Concatenating strings using the + operator:
- Pros: widely supported, easy to implement.
- Cons: inefficient, can lead to performance issues for large strings.
Concatenating strings without calling substring():
- Pros: simple and efficient, avoids substring() overhead.
- Cons: may not be as readable or maintainable as other approaches.
Concatenating strings with template literals, but only appending two elements at a time:
- Pros: combines the benefits of template literals and string concatenation.
- Cons: slightly less efficient than using template literals directly.

Library Used

There is no explicit library used in this benchmark. The script uses native JavaScript features to create the object obj and concatenate strings.

Special JS Feature or Syntax

The benchmark uses ES6 template literals (${...}) for the "Template strings" approach, which was introduced in ECMAScript 2015. Other approaches use standard string concatenation using the + operator.

Other Alternatives

If you're interested in exploring other alternatives, consider:

Using a library like Lodash or Underscore.js, which provide efficient string manipulation functions.
Implementing a custom string concatenator using an internal buffer or array to minimize allocations and garbage collection.

Keep in mind that the specific performance characteristics of these approaches may vary depending on your use case, browser, and JavaScript engine.

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what's being tested.

**Benchmark Overview**

The benchmark is comparing four different approaches to concatenate strings in JavaScript:

1. Template literals (Template strings)
2. Concatenating strings using the `+` operator
3. Concatenating strings without calling `substring()`
4. Concatenating strings with template literals, but only appending two elements at a time

**Options Being Compared**

The benchmark is comparing the performance of these four approaches on a specific use case:

* Creating an object `obj` with 4 string properties
* Looping 10,000 times and concatenating the string values using each approach

**Pros and Cons of Each Approach**

1. **Template literals (Template strings)**:
	* Pros: readable, efficient, and modern syntax.
	* Cons: not supported in older browsers or Node.js versions.
2. **Concatenating strings using the `+` operator**:
	* Pros: widely supported, easy to implement.
	* Cons: inefficient, can lead to performance issues for large strings.
3. **Concatenating strings without calling `substring()`**:
	* Pros: simple and efficient, avoids `substring()` overhead.
	* Cons: may not be as readable or maintainable as other approaches.
4. **Concatenating strings with template literals, but only appending two elements at a time**:
	* Pros: combines the benefits of template literals and string concatenation.
	* Cons: slightly less efficient than using template literals directly.

**Library Used**

There is no explicit library used in this benchmark. The script uses native JavaScript features to create the object `obj` and concatenate strings.

**Special JS Feature or Syntax**

The benchmark uses ES6 template literals (`${...}`) for the "Template strings" approach, which was introduced in ECMAScript 2015. Other approaches use standard string concatenation using the `+` operator.

**Other Alternatives**

If you're interested in exploring other alternatives, consider:

* Using a library like Lodash or Underscore.js, which provide efficient string manipulation functions.
* Implementing a custom string concatenator using an internal buffer or array to minimize allocations and garbage collection.

Keep in mind that the specific performance characteristics of these approaches may vary depending on your use case, browser, and JavaScript engine.

Related benchmarks:

Template vs string concat 2 (version: 0)

Comparing performance of: Concatenation vs Template strings vs Concatenating strings with template strings vs Concatenation without substring call

Created: 2 years ago by: Guest

Jump to the latest result