ES6 / ECMA6 template literals - not working

I wanted to try using template literals and it's not working: it’s displaying the literal variable names, instead of the values. I am using Chrome v50.0.2 (and jQuery).

Example:

console.log('categoryName: ${this.categoryName}\ncategoryElements: ${this.categoryElements} ');

Output:

${this.categoryName} 
categoryElements: ${this.categoryElements} 

Answers:

Answer

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) - 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: What is the usage of the backtick symbol (`) in JavaScript?

Answer

1.) add .jshitrc same folder level with your app.js and other files

2.) put this inside the newly created file { "esversion": 6 }

3.) never use single quote ' use backticks `

Answer

// Example
var person = {
  name: "Meera",
  hello: function(things) {
    console.log(`${this.name} Says hello ${things}`);
  }
}

// Calling function hello
person.hello("World");

//Meera Says hello World

Answer

you need to use `` instead of single ' ' or double quotes " " . these quotes will be found in the button on the left of number 1.

Happy coding !!

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.