DEV Community

Cover image for Benchmarking String Literal ("") vs Template Literal (``) - using Performance.now()
Muhammad A Faishal
Muhammad A Faishal

Posted on

Benchmarking String Literal ("") vs Template Literal (``) - using Performance.now()

Let's talk about String in JavaScript. There are 2 ways developers can define a string:

a. Using String Literal

const str = "Hello " + "world!";
Enter fullscreen mode Exit fullscreen mode

b. Using Template Literal

const worldText = "world!"
const str = `Hello ${worldText}`;
Enter fullscreen mode Exit fullscreen mode

So, have you ever wondered what the difference between the tow? Which one do you usually use? Is the one you're using better?

Let's find out by doing performance test.

Benchmarking

Here are the test case and String Literal and Template Literal used for benchmarking.

Test Case

const iterations = ITERATION_TOTAL // 10, 100, 10000, 1000000
const stringText = 'string'
let text = ''

const start = performance.now()

for (let i = 0; i < iterations; i++) {
  // String or Template literal test case here
}

const end = performance.now()

console.log(`It took ${end - start} ms.`);
Enter fullscreen mode Exit fullscreen mode

String Literal

text = "text"
Enter fullscreen mode Exit fullscreen mode

Template Literal

text = `text`
Enter fullscreen mode Exit fullscreen mode

String Literal concatenating a String

text = "text " + stringText
Enter fullscreen mode Exit fullscreen mode

Template Literal concatenating a String

text = `text ${stringText}`
Enter fullscreen mode Exit fullscreen mode

String Literal concatenating Two Strings

text = stringText + " text " + stringText
Enter fullscreen mode Exit fullscreen mode

Template Literal concatenating Two Strings

text = `${stringText} text ${stringText}`
Enter fullscreen mode Exit fullscreen mode

I ran the tests on Node Js v18.17.0 with different loop iterations: 10, 100, 10,000, 100,000, and 1,000,000. I measured the average times for each iteration.

Result

Here are the results for each iteration (the lower is better):

10 Iterations

String literal & Template literal

100 Iterations

String literal & Template literal

1,000 Iterations

String literal & Template literal

100,000 Iterations

String literal & Template literal

1,000,000 Iterations

String literal & Template literal

Conclusion

It's still good to use both String Literal & Template Literal in simple iteration, displaying a limited items. The results showed a slightly different between the two which is still acceptable.

When dealing with processing large datasets, complex algorithm, generating long strings, using React components that frequently re-render that require a large number of iterations, String Literal is the only one to go.

It's important to understand that not every method is the best fit for every case and project. There might be some trade-offs to consider.

Top comments (24)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

You should really test in more than one environment. What holds true in NodeJS may not hold true in other JS engines.

Collapse
 
maafaishal profile image
Muhammad A Faishal • Edited

Yeah, that is possible. I chose Node JS because it's currently the most popular JavaScript runtime used by many developers.

Thanks for the suggestion. I'll make a note of it.

Collapse
 
miketalbot profile image
Mike Talbot ⭐

Isn't Chrome probably the most popular JavaScript runtime?

Thread Thread
 
maafaishal profile image
Muhammad A Faishal

yeah, it can also, but Chrome is different thing. I meant between Node, Deno, and Bun.

Thread Thread
 
jamesthomson profile image
James Thomson

They both use the same engine, V8, so much of a muchness, really.

Collapse
 
imista profile image
Benjamin Rodriguez

It's amazing! I never think about the difference

Collapse
 
maafaishal profile image
Muhammad A Faishal

I'm glad I could help!

Collapse
 
miketalbot profile image
Mike Talbot ⭐ • Edited

My tests show that concat is faster if the strings being concatenated are longer. There is a lot less work going on and a lot less memory allocated using concat - therefore less garbage collection.

My test case is indicative of the kinds of volumes a website concatenating articles might face, possibly smaller. I would point out that all of them are very fast and this should probably not be the first point of optimisation.

Collapse
 
maafaishal profile image
Muhammad A Faishal • Edited

It's interesting, I checked that concat is the lowest now. This is the reason I didn't use neither measurethat nor perflink, because the result is always different.

Anyway, I hardly ever use concat, nice reference.

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

I suggest to watch this, you will change your mind about the benchmark results:

Collapse
 
maafaishal profile image
Muhammad A Faishal

It's interesting, so much magic behind V8. Regardless, this post just shows the perspective of using performance.now() for string literal and template literal. From this, we can also do other things to improve the accuracy.

Anyway, thanks for sharing. I got new ideas from the video.

Collapse
 
kodcapsule profile image
KUSEH SIMON WEWOLIAMO

Amazing , a good read .

Collapse
 
pravneetdev profile image
Pravi

This was a good read!

Collapse
 
ethanwillingham profile image
Ethan Willingham

Thank you for your work! You’ve helped me deepen my understanding of JavaScript!

Collapse
 
maafaishal profile image
Muhammad A Faishal

Happy to help!

Collapse
 
miguelowd profile image
Miguel Ortega Ward

Interesting post!

Collapse
 
natikos profile image
natikos

It’s odd, I am pretty sure I saw similar post about comparision string and template literals and the outcome was different (in favor of template literal) 🤨

Collapse
 
maafaishal profile image
Muhammad A Faishal

I'd love it if you could share it

Collapse
 
jtlapp profile image
Joe Lapp

Interesting. What about memory usage and garbage collection frequency?

Collapse
 
maafaishal profile image
Muhammad A Faishal

I didn't check either one. I'll make a note of it to be a reference for my next post.

Good question.

Collapse
 
respect17 profile image
Kudzai Murimi

I never thought about the difference too

Collapse
 
zirkelc profile image
Chris Cook

I’m not sure if a simple assignment of exactly same the string gives much insight. I could imagine that V8 is able to optimize it away and just generates static operations.

Collapse
 
maafaishal profile image
Muhammad A Faishal • Edited

It's supposed to be. Regardless, I still did it to have an actual data about the two