What is the purpose of template literals (backticks) following a function in ES6?

by

These are tagged template literals. The part before the backpacks is a reference to a function that will be called to process the string.

The function is passed the variables (the ${} parts) as arguments as well as the pieces of the string that surround the variables broken into an array. The return value of the function becomes the value of the template. Because of this very generalized format, you can do almost anything with the function. Here’s a quick and dirty example that takes the variables (gathered into an array for convenience), makes them uppercase, and puts them back in the string:

function upperV(strings, ...vars) {
  /* make vars uppercase */
  console.log("vars: ", vars)       // an array of the passed in variables
  console.log("strings:", strings)  // the string parts

  // put them together
  return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}

let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)

More Related Contents:

  1. Backticks (`…`) calling a function in JavaScript
  2. Defer execution for ES6 Template Literals
  3. Can ES6 template literals be substituted at runtime (or reused)?
  4. Is there a downside to using ES6 template literals syntax without a templated expression?
  5. What does this `…${…}…` code in the node docs mean? [duplicate]
  6. Template literals syntax is not working in IE11
  7. Wrap long template literal line to multiline without creating a new line in the string
  8. Unexpected comma using map()
  9. How to call native es6 template string replacement from tag function?
  10. Unable to access React instance (this) inside event handler [duplicate]
  11. Javascript object literal: what exactly is {a, b, c}?
  12. ES6 Modules: Undefined onclick function after import
  13. Javascript ES6 TypeError: Class constructor Client cannot be invoked without ‘new’
  14. ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
  15. Why do I need to await an async function when it is not supposedly returning a Promise?
  16. Scope of Default function parameters in javascript
  17. “This” within es6 class method [duplicate]
  18. Syntax error in IE using ES6 arrow functions
  19. Using Array objects as key for ES6 Map
  20. How can I alias a default import in JavaScript?
  21. Not recommended to use “use strict” in ES6?
  22. Clean way to keep original variable and destructure at the same time
  23. Property change subscription with Aurelia
  24. How will browsers handle ES6 import/export syntax
  25. arrow function and this
  26. When would someone need to create a deferred?
  27. How to namespace es6 classes (for React components)
  28. Re-export default in ES 6 modules
  29. gulp babel, exports is not defined
  30. Why will ES6 WeakMap’s not be enumerable?

Leave a Comment