ES6 template literals vs. concatenated strings

by

If you are using template literals only with placeholders (e.g. `Hello ${person.name}`) like in the question’s example, then the result is the same as just concatenating strings. Subjectively it looks better and is easier to read, especially for multi-line strings or strings containing both ' and " since you don’t have to escape those characters any more.

Readability is a great feature, but the most interesting thing about templates are Tagged template literals:

let person = {name: 'John Smith'}; 
let tag = (strArr, name) => strArr[0] + name.toUpperCase() + strArr[1];  
tag `My name is ${person.name}!` // Output: My name is JOHN SMITH!

In the third line of this example, a function named tag is called. The content of the template string is split into multiple variables, that you can access in the arguments of the tag function: literal sections (in this example the value of strArr[0] is My name is and the value of strArr[1] is !) and substitutions (John Smith). The template literal will be evaluated to whatever the tag function returns.

The ECMAScript wiki lists some possible use cases, like automatically escaping or encoding input, or localization. You could create a tag function named msg that looks up the literal parts like My name is and substitutes them with translations into the current locale’s language, for example into German:

console.log(msg`My name is ${person.name}.`) // Output: Mein Name ist John Smith.

The value returned by the tag function doesn’t even have to be a string. You could create a tag function named $ which evaluates the string and uses it as a query selector to return a collection of DOM nodes, like in this example:

$`a.${className}[href=~'//${domain}/']`

More Related Contents:

  1. What does this `…${…}…` code in the node docs mean? [duplicate]
  2. Using Node.js require vs. ES6 import/export
  3. Call async/await functions in parallel
  4. Convert a string to a template string
  5. Node.js plans to support import/export ES6 (ECMAScript 2015) modules
  6. ES6 variable import name in node.js?
  7. How can I mock an ES6 module import using Jest?
  8. What is “export default” in JavaScript?
  9. Template String As Object Property Name
  10. Destructuring in Node.JS
  11. Javascript ES6 TypeError: Class constructor Client cannot be invoked without ‘new’
  12. Why do I need to await an async function when it is not supposedly returning a Promise?
  13. Why is let slower than var in a for loop in nodejs?
  14. Importing modules using ES6 syntax and dynamic path [duplicate]
  15. Why doesn’t instanceof work on instances of Error subclasses under babel-node?
  16. How to clone a javascript ES6 class instance
  17. ES6 tagged templates practical usability
  18. Why couldn’t popular JavaScript runtimes handle synchronous-looking asynchronous script?
  19. then() callback firing before promise is resolved in node.js [duplicate]
  20. Difference between import X and import * as X in node.js (ES6 / Babel)?
  21. ‘Access-Control-Allow-Credentials’ header in the response is ” which must be ‘true’
  22. ES2015 “import” not working in node v6.0.0 with with –harmony_modules option
  23. How to run Node.js app with ES6 features enabled?
  24. Node JS / V8 destructuring bug?
  25. JavaScript asynchronous programming: promises vs generators
  26. How to add mixins to ES6 javascript classes?
  27. using await on global scope without async keyword
  28. ECMA6 generators: yield promise
  29. How to bind methods when destructuring an object in JavaScript?
  30. ESLint: “error Parsing error: The keyword ‘const’ is reserved”

Leave a Comment