Benchmark: Template strings vs. String.concat

Script Preparation code:

const base = '1-2'
const separator = '-';
const suffix = 3;

function templateString() {
  return `${base}${something}${suffix}`;
}

function stringConcat() {
  return base.concat(separator, suffix);
}

Tests:

Template string
templateString()
String.concat
stringConcat()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Template string
String.concat

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 88 on Windows

View result in a separate tab

Test name	Executions per second
Template string	0.0 Ops/sec
String.concat	3896232.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark in detail.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case created using MeasureThat.net. The benchmark compares the performance of two approaches: template strings and `String.concat`.

**Template Strings vs. String.concat**

In the script preparation code, we see two functions:

1. `templateString()`: This function uses a template string (a new feature introduced in ECMAScript 2015) to concatenate three strings: `base`, `something` (which is not defined), and `suffix`.
2. `stringConcat()`: This function uses the `concat()` method to concatenate three strings: `base`, `separator` (a literal string `-`), and `suffix`.

**Options Compared**

The benchmark compares the performance of these two approaches:

* **Template Strings**: The template string approach is likely faster because it avoids the overhead of calling a method (`concat()`) and creates an intermediate string object that can be concatenated with other strings.
* **String.concat**: The `concat()` method approach involves multiple function calls, which may lead to slower performance due to the overhead of creating and disposing temporary objects.

**Pros and Cons**

* **Template Strings**
	+ Pros: Faster execution, avoids overhead of function call, creates an intermediate string object that can be concatenated.
	+ Cons: Requires ECMAScript 2015 support (not supported in older browsers or Node.js versions).
* **String.concat**
	+ Pros: More widely supported (older browsers and Node.js versions), easier to use for concatenation tasks.
	+ Cons: Slower execution due to function call overhead, creates multiple temporary objects.

**Library Used**

The `something` variable is not defined in the provided code. However, since it's a template string, it's likely that MeasureThat.net will provide an input value or skip this test case if it cannot be resolved.

**Special JS Feature**

This benchmark uses template strings (a feature introduced in ECMAScript 2015) to concatenate strings. Template strings are a new way of formatting strings using backticks (`\`) instead of `+` for string concatenation.

**Other Alternatives**

In addition to the two approaches compared in this benchmark, other alternatives for concatenating strings include:

* Using an array and joining elements with the `join()` method
* Using the `String.prototype.split()` method followed by `join()`
* Using a library like Lodash or Underscore.js, which provides utility functions for string manipulation.

It's worth noting that these alternatives may have different performance characteristics than the two approaches compared in this benchmark.

Related benchmarks:

Template strings vs. String.concat (version: 0)

Comparing performance of: Template string vs String.concat

Created: 5 years ago by: Guest

Jump to the latest result

Template string

String.concat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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