Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array join vs string template - Js
(version: 0)
Comparing performance of:
Array vs template literal
Created:
3 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var str = "Hello World" var newStr = "Goodbye" var start = 5
Tests:
Array
const foo = [ str, newStr, start ].join('|')
template literal
const foo = `${str}|${newStr}|${start}`
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Array
template literal
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
8 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0
Browser/OS:
Chrome 142 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=620814" width="100%" height="500px"></iframe>
template literal
137.0M/s
Array
15.3M/s
View exact numbers
Test name
Executions per second
✓
template literal
137,034,656 Ops/sec
Array
15,276,647 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll explain the benchmark in detail. **Benchmark Description:** The benchmark measures the performance difference between two approaches to concatenate strings: using the `join()` method with an array and using template literals. **Options Compared:** There are two options being compared: 1. **Array join**: This approach uses the `join()` method on an array of strings, where the elements of the array are concatenated together with a specified separator (in this case, the pipe character `|`). 2. **Template literal**: This approach uses template literals, which allow you to embed expressions inside string literals using backticks (`). **Pros and Cons:** * **Array join**: + Pros: More readable, allows for easy modification of the separator. + Cons: Can be slower due to the overhead of iterating over the array elements. * **Template literal**: + Pros: Faster, more concise, and expressive. + Cons: Less readable for complex expressions. **Library and Special JS Features:** There is no specific library being used in this benchmark. However, template literals are a feature introduced in ECMAScript 2015 (ES6) that allows you to embed expressions inside string literals using backticks (`). **Other Considerations:** * The `join()` method can be optimized by the browser's engine, which might affect its performance. * Template literals are often faster because they don't require the overhead of concatenating strings using the `+` operator. **Alternative Approaches:** 1. **Using `concat()`**: Another approach to concatenate an array of strings would be to use the `concat()` method on the array, like this: `[str].concat([newStr]).concat([start])`. However, this approach is likely to be slower than both `join()` and template literals. 2. **Using `+` operator**: A third approach would be to concatenate the strings using the `+` operator, like this: `str + '|' + newStr + '|' + start`. This approach can be slow due to the overhead of creating intermediate strings. **Benchmark Preparation Code:** The benchmark preparation code sets up some variables: ```javascript var str = "Hello World"; var newStr = "Goodbye"; var start = 5; ``` These variables are used in both test cases. **Individual Test Cases:** There are two test cases: 1. **Array join**: The first test case uses the `join()` method to concatenate the strings, like this: ```javascript const foo = [str, newStr, start].join('|'); ``` 2. **Template literal**: The second test case uses template literals to concatenate the strings, like this: ```javascript const foo = `${str}|${newStr}|${start}`; ``` These two approaches are compared in terms of their performance.
Related benchmarks
Template Literal Vs Array Join
Comments
Confirm delete:
Do you really want to delete benchmark?