What are template literals in HTML5?
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.