ES6 (ECMAScript 2015) introduced new kind of literals called template literals. These literals are nothing but the strings enclosed by the back-tick (e.g. `my-string`). This allows to write a string as it is i.e. line-breaks and spaces are preserved. Also at the same time we can use template variables within such strings.

Examples

Multiline strings literals

var str = `A logic     a day 
helps you  
work and play.`;
console.log(str);

Template variable substitution (Expression interpolation)

Variables within ${} are replaced by their values:

var a = 5;
var b = 6;
var result = `Addition:  ${a} + ${b} = ${a + b} `;
console.log(result);

We can even write multiline strings while using template variables:

var a = 5;
var b = 6;
var result = `A D D I T I O N:
${a} + ${b} = ${a+b}`;
console.log(result);

Above we saw that the operator '+' is evaluated if used inside a template. Following shows other statements/operators (like ternary) are also evaluated:

function compare(a, b){
 var result = `${a} is ${ a > b ?  "greater":  "less"} than ${b}`;
 return result;
}
console.log(compare(3, 5));
console.log(compare(7, 5));

Nesting back-ticks:

function compare(a, b){
 var result = `${a} is ${a > b ?  "greater than":  `${a == b ?  "equal to":  "less than"}`} ${b}`;
 return result;
}
console.log(compare(3, 5));
console.log(compare(7, 5));
console.log(compare(6, 6));

Without nesting:

function compare(a, b){
 var result = `${a} is ${a > b ?  "greater than":  (a == b ?  "equal to":  "less than")} ${b}`;
 return result;
}
console.log(compare(3, 5));
console.log(compare(7, 5));
console.log(compare(6, 6));

Tagged Templates

A tagged template is a function call where the arguments of the call are assigned from a TemplateLiteral:

function printAll(literalArray, operator1, operator2, result){
 console.log(literalArray);
 console.log(operator1);
 console.log(operator2);
 console.log(result);
}
a = 3;
b = 4;
printAll `Addition:  ${a} + ${b} = ${a+b}`;

Following shows we can even use template literals inside tagged template functions to return a value:

function getSimplified(literalArray, operator1, operator2, result){
 console.log(`literalArray= ${literalArray}`);
 literalArray.forEach((v, i) => console.log(`literalArray[${i}]=${v}`));
 console.log(`operator1= ${operator1}`);
 console.log(`operator2= ${operator2}`);
 console.log(`result= ${result}`);
 return `${literalArray[0].trim()} ${result}`;
}
a = 3;
b = 4;
var result = getSimplified `Addition:  ${a} + ${b} = ${a + b}`;
console.log(result);

Raw strings

String.raw() is a new built-in function which accepts a string literal argument and returns raw string. Here raw string means uninterpreted text (escape sequences not processed).

var a =3;
var b =4;
var myString = String.raw`sum:\n ${a+b}`;
console.log(myString);

raw is a new special built-in property which can be used on the first function argument of tagged templates. This allows us to access the raw strings as they were entered.

function indexTest(literalArray){
 console.log(literalArray.raw[0]);
 console.log(literalArray[0]);
}
indexTest `"finding \n errors"`;