Are ES6 template literals faster than string concatenation?

by

It seems for the moment string concatenation is faster: http://jsperf.com/es6-string-literals-vs-string-concatenation

ES6 with variable                     19,992,512    ±5.21%    78% slower
String concatenation with variable    89,791,408    ±2.15%    fastest
ES6 with function                     461,358       ±3.12%    99% slower
String concatenation with function    503,255       ±1.77%    99% slower

I tested was run on Chrome 43.0.2334.0 canary (64-bit), which is using V8 4.3.31, with the #enable-javascript-harmony flag enabled.

For reference, the latest version on Node.js (0.12.0 at the time of writing) is using V8 3.28.73: https://raw.githubusercontent.com/joyent/node/master/ChangeLog

I’m sure all the possible performance optimizations that could be applied have not been applied yet, so it would be reasonable to expect performance to get better as ES6 gets closer to finalization and these features get migrated to the stable branch.

Edit: Thanks for the comments @user1329482, @icl7126, Nicolai Borisik, and FesterCluck. Now that about 2 years have passed since this question was asked, ES6 browser support has greatly increased, and a good amount of performance optimization has taken place. Here are some updates.

Edit: (February 2020) Updated Chrome result based on @JorgeFuentesGonzález comments and subsequent confirmation.

In Chrome (as of 59.0.3035), ES6 string literals are faster:

ES6 with variable                     48,161,401       ±1.07%    fastest
String concatenation with variable    27,046,298       ±0.48%    44% slower
ES6 with function                     820,441          ±1.10%    98% slower
String concatenation with function    807,088          ±1.08%    98% slower

Update: In Chrome (as of 79.0.3945), String concatenation is faster… See comments.

In Firefox (as of 57.0.0), ES6 string literals are faster:

ES6 with variable                     1,924,610,984    ±0.50%    fastest
String concatenation with variable    1,876,993,458    ±0.79%    3% slower
ES6 with function                     539,762          ±5.04%    100% slower
String concatenation with function    546,030          ±5.88%    100% slower

In Safari (as of 11.0.2), it depends:

ES6 with variable                     1,382,752,744    ±0.71%    fastest
String concatenation with variable    1,355,512,037    ±0.70%    2% slower
ES6 with function                     876,516          ±1.01%    100% slower
String concatenation with function    883,370          ±0.79%    100% slower

When using a typecast string, ES6 string literals are faster. However, when calling a function from the literal, string concatenation is faster in this example.

If you really want to go deep and need to squeeze every drop of performance out of Safari, I would suggest setting up tests that see if/how incorrectly typed variables and multiple references within a literal effect performance.

More Related Contents:

  1. Fastest method to escape HTML tags as HTML entities?
  2. What’s the best way to convert a number to a string in JavaScript?
  3. Most efficient way to concatenate strings in JavaScript?
  4. Is there a downside to using ES6 template literals syntax without a templated expression?
  5. Efficient Javascript String Replacement
  6. Prepend text to beginning of string
  7. Javascript – Template Strings Don’t Pretty Print Objects
  8. When should I use a return statement in ES6 arrow functions
  9. How to check if a string “StartsWith” another string?
  10. Fastest method to replace all instances of a character in a string [duplicate]
  11. Evaluating a string as a mathematical expression in JavaScript
  12. Using Node.js require vs. ES6 import/export
  13. When to use Vanilla JavaScript vs. jQuery?
  14. Convert string with commas to array
  15. ES6 destructuring function parameter – naming root object
  16. What is the motivation for bringing Symbols to ES6?
  17. How to destructure into dynamically named variables in ES6?
  18. ECMAScript 2015: const in for loops
  19. Create object from array
  20. Error Duplicate Const Declaration in Switch Case Statement
  21. ES6 Dynamic class names
  22. Best way to execute js only on specific page
  23. Determine if string is in list in JavaScript
  24. Does the tag position in HTML affects performance of the webpage?
  25. Is there a way to tell if an ES6 promise is fulfilled/rejected/resolved? [duplicate]
  26. How to get the day of the week from the day number in JavaScript?
  27. How can I mock the imports of an ES6 module?
  28. spread operator vs array.concat()
  29. String interpolation on variable
  30. Why should forEach be preferred over regular iterators?

Leave a Comment