Benchmark: Template strings vs. String.concat v2

Script Preparation code:

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

Tests:

Template string
templateString()
String.concat
stringConcat()

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Template string

169.0M/s

String.concat

40.8M/s

Fastest: Template string (4.1x faster)

View exact numbers

✓ Template string: 169,018,736 ops/sec
• String.concat: 40,769,416 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 6 months ago)

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

Browser/OS: Chrome 143 on Windows

View result in a separate tab

Template string

15.7M/s

String.concat

14.5M/s

View exact numbers

Test name	Executions per second
✓ Template string	15,746,265 Ops/sec
String.concat	14,530,921 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its options, pros and cons, and considerations.

**Benchmark Overview**

The benchmark compares two ways of concatenating strings in JavaScript: template strings (also known as template literals) and `String.concat()` (version 2).

**Template Strings vs. String.concat v2**

Template strings are a feature introduced in ECMAScript 2015 (ES6). They allow you to embed expressions inside string literals, using the `$` symbol followed by an expression.

In this benchmark, the template string version uses the `${}` syntax to concatenate three values: `base`, `separator`, and `suffix`.

The `String.concat()` version, on the other hand, uses the `concat()` method with two arguments, which concatenates the first argument with the second argument.

**Pros and Cons**

**Template Strings:**

Pros:

1. Readability: Template strings are more readable, as they clearly show the intent of concatenating values.
2. Performance: Some benchmarks have shown that template strings can be faster than `String.concat()` due to the compiler's ability to optimize them at compile-time.

Cons:

1. Compatibility: Older browsers and Node.js versions may not support template strings or may have limited support.
2. Complexity: When using multiple values, template strings can become complex and harder to read.

**String Concat v2:**

Pros:

1. Wide compatibility: `String.concat()` has been part of JavaScript since its inception and is widely supported across browsers and Node.js versions.
2. Simple syntax: The syntax is straightforward and easy to understand.

Cons:

1. Readability: Using `concat()` can make the code harder to read, as it requires more manual effort to concatenate values.
2. Performance: Some benchmarks have shown that `String.concat()` can be slower than template strings due to the overhead of function calls and string concatenation.

**Other Considerations**

When choosing between these two options, consider the following:

1. **Performance**: If you need high-performance string concatenation, template strings might be a better choice.
2. **Readability**: If readability is more important than performance, template strings are likely a better option.
3. **Compatibility**: If you need to support older browsers or Node.js versions, `String.concat()` might be a safer choice.

**Library and Special JS Features**

There are no libraries used in this benchmark. However, the use of template strings demonstrates the newer ECMAScript 2015 (ES6) feature.

**Alternatives**

If you're looking for alternative ways to concatenate strings, consider:

1. `String.prototype.join()`: This method concatenates multiple values into a single string.
2. `Array.prototype.concat()`: This method concatenates two arrays together.

Note that these alternatives may have different performance characteristics and readability trade-offs compared to template strings or `String.concat()`.

**Benchmark Preparation Code**

The provided script preparation code defines the base, separator, and suffix variables, as well as the two functions: `templateString()` and `stringConcat()`. The `templateString()` function uses a template string, while the `stringConcat()` function uses `concat()`.

The benchmark is designed to run these two functions repeatedly, measuring their performance and comparing the results.

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

Comparing performance of: `Template string vs String.concat`

Created: 6 years ago by: Guest

Go to the latest result

Template string

String.concat

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: Template string vs String.concat

Created: 6 years ago by: Guest

Go to the latest result

Template string

String.concat

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Template string vs String.concat`