Benchmark: Concatenation vs Template String

Script Preparation code:

var str = '120';

Tests:

Concat
console.log(str + 'px');
Template string
console.log(`${str}px`);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Concat
Template string

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Concat	1845225.2 Ops/sec
Template string	1744812.4 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 world of JavaScript microbenchmarks and understand what's being tested on this specific benchmark.

**What is being tested?**

The benchmark measures the performance difference between two approaches to concatenate strings:

1. **Concatenation using the `+` operator**: This method uses the string concatenation syntax, where two or more values are joined together.
2. **Template literals (Template String)**: This method uses template literals, a feature introduced in ECMAScript 2015, which allows you to embed expressions inside string literals.

**Options compared**

The benchmark compares the performance of these two approaches on the same input value: `str = '120'`.

**Pros and Cons of each approach**

1. **Concatenation using the `+` operator**:
	* Pros: Simple, widely supported, and easy to understand.
	* Cons: Can lead to slower performance due to string concatenation, which creates a new string object on each iteration.
2. **Template literals (Template String)**:
	* Pros: More readable and expressive than traditional string concatenation. Also, template literals create a single string object that can be optimized by the JavaScript engine.
	* Cons: Requires ECMAScript 2015 support, which might not be present in older browsers or environments.

**Library usage**

There is no explicit library used in this benchmark. However, it's worth noting that the `console.log()` function is a built-in part of the JavaScript environment and doesn't require any additional libraries.

**Special JS feature or syntax**

The benchmark uses template literals (Template String), which is a special syntax introduced in ECMAScript 2015. This syntax allows you to embed expressions inside string literals, making it more readable and convenient for concatenating strings.

**Other alternatives**

If the benchmark didn't use template literals, other alternatives could be:

* Using the `String.prototype.concat()` method
* Using a custom function for concatenation (e.g., a loop that appends values to a single string)

Keep in mind that these alternatives might not provide the same level of expressiveness and performance as template literals.

Overall, this benchmark helps measure the performance difference between two common approaches to concatenating strings in JavaScript, making it easier for developers to choose the most efficient method for their specific use cases.

Related benchmarks:

Concatenation vs Template String (version: 0)

Comparing performance of: Concat vs Template string

Created: 3 years ago by: Guest

Jump to the latest result

Concat

Template string

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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