Template literals are enclosed by the back-tick (` `)

Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}). The expressions in the placeholders and the text between them get passed to a function.

In order to embed expressions within normal strings, you can use the following syntax:

var a = 5;
var b = 10;
console.log(‘Fifteen is ‘ + (a + b) + ‘ and\nnot ‘ + (2 * a + b) + ‘.’);
// “Fifteen is 15 and
// not 20.”

Now, with template literals, you are able to make use of the syntactic sugar making substitutions like this more readable:

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// “Fifteen is 15 and
// not 20.”

Nesting Templates:

In certain times, nesting a template is the easiest and perhaps more readable way to have configurable strings. Within a backticked template it is simple to allow inner backticks simply by using them inside a placeholder ${ } within the template. For instance, if condition a is true: then return this templated literal.

The post WHAT ARE TEMPLATE LITERALS IN HTML5? appeared first on Pro-Tek Blog.