Template literals like ‘some ${string}’ or “some ${string}” are not working

by

JavaScript template literals require backticks, not straight quotation marks.

You need to use backticks (otherwise known as “grave accents” – which you’ll find next to the 1 key if you’re using a QWERTY keyboard) – rather than single quotes – to create a template literal.

Backticks are common in many programming languages but may be new to JavaScript developers.

Example:

categoryName="name";
categoryElements="element";
console.log(`categoryName: ${this.categoryName}\ncategoryElements: ${categoryElements} `)

Output:

VM626:1 categoryName: name 
categoryElements: element

See:

Usage of the backtick character (`) in JavaScript

More Related Contents:

  1. ECMAScript template literals like ‘some ${string}’ are not working
  2. Backticks (`…`) calling a function in JavaScript
  3. Defer execution for ES6 Template Literals
  4. Template String As Object Property Name
  5. Can ES6 template literals be substituted at runtime (or reused)?
  6. Template literal inside of the RegEx
  7. Is there a downside to using ES6 template literals syntax without a templated expression?
  8. What does this `…${…}…` code in the node docs mean? [duplicate]
  9. Template literals syntax is not working in IE11
  10. What is the purpose of template literals (backticks) following a function in ES6?
  11. Wrap long template literal line to multiline without creating a new line in the string
  12. Unexpected comma using map()
  13. How would you turn a JavaScript variable into a Template literal?
  14. How to call native es6 template string replacement from tag function?
  15. How to add a black shadow on top of a div block with background image?
  16. What is the difference between JSON and Object Literal Notation?
  17. Response to preflight request doesn’t pass access control check
  18. How to properly reuse connection to Mongodb across NodeJs application and modules
  19. How to import jquery using ES6 syntax?
  20. Is it possible to use JS to open an HTML select to show its option list? [duplicate]
  21. Random number, which is not equal to the previous number
  22. Preventing click event with jQuery drag and drop
  23. Why can’t I reliably capture a mouseout event?
  24. jQuery: Toggling between 3 classes (initially)
  25. How to include Javascript in xml-document?
  26. jQuery won’t parse xml with nodes called option
  27. How to Set port in next.js
  28. CSRF protection with CORS Origin header vs. CSRF token
  29. apply formatting filter dynamically in a ng-repeat
  30. Dynamically Trigger HTML5 Cache Manifest file?

Leave a Comment