Backticks (`…`) calling a function in JavaScript

by

It is called Tagged Template in ES-6 more could be read about them Here, funny I found the link in the starred section of the very chat.

But the relevant part of the code is below (you can basically create a filtered sort).

function tag(strings, ...values) {
  assert(strings[0] === 'a');
  assert(strings[1] === 'b');
  assert(values[0] === 42);
  return 'whatever';
}
tag `a${ 42 }b`  // "whatever"

Basically, its merely tagging the “1” with console.log function, as it would do with any other function. The tagging functions accept parsed values of template strings and the values separately upon which further tasks can be performed.

Babel transpiles the above code to 

var _taggedTemplateLiteralLoose = function (strings, raw) { strings.raw = raw; return strings; };

console.log(_taggedTemplateLiteralLoose(["1"], ["1"]));

As you can see it in the example above, after being transpiled by babel, the tagging function (console.log) is being passed the return value of the following es6->5 transpiled code.

_taggedTemplateLiteralLoose( ["1"], ["1"] );

The return value of this function is passed to console.log which will then print the array.

More Related Contents:

  1. ES6 tagged templates practical usability
  2. What does this `…${…}…` code in the node docs mean? [duplicate]
  3. Convert a string to a template string
  4. Defer execution for ES6 Template Literals
  5. Template String As Object Property Name
  6. Can ES6 template literals be substituted at runtime (or reused)?
  7. ES6 template literals vs. concatenated strings
  8. Is there a downside to using ES6 template literals syntax without a templated expression?
  9. How can I construct a Template String from a regular string? [duplicate]
  10. Template literals syntax is not working in IE11
  11. What is the purpose of template literals (backticks) following a function in ES6?
  12. Wrap long template literal line to multiline without creating a new line in the string
  13. Unexpected comma using map()
  14. How to call native es6 template string replacement from tag function?
  15. Are ‘Arrow Functions’ and ‘Functions’ equivalent / interchangeable?
  16. What’s the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?
  17. What do multiple arrow functions mean in JavaScript?
  18. What is destructuring assignment and its uses?
  19. Arrow function without curly braces
  20. Why shouldn’t JSX props use arrow functions or bind?
  21. What are the precise semantics of block-level functions in ES6?
  22. javascript extract certain properties from all objects in array
  23. Fulfill (don’t resolve) promise with another promise
  24. ES6 modules in local files – The server responded with a non-JavaScript MIME type
  25. What does @@ (“at at”) mean in ES6 JavaScript?
  26. How to call another function within the same object?
  27. Declare a class property outside of a class method
  28. Importing javascript file for use within vue component
  29. Binding context when calling ES6 method. How to access object from within method called as callback?
  30. using await on global scope without async keyword

Leave a Comment