What are Template Literals?
Template Literals are a new way of making strings in JavaScript. We can make Template Literal by using the backtick or back-quote symbol.
//ES5 Version
var greet = 'Hi I\'m Mark';
//ES6 Version
let greet = `Hi I'm Mark`;
In the ES5 version, we need to escape the '
using the \
to escape the normal functionality of that symbol which in this case is to finish that string value. In Template Literals, we don't need to do that.
//ES5 Version
var lastWords = '\n'
+ ' I \n'
+ ' Am \n'
+ 'Iron Man \n';
//ES6 Version
let lastWords = `
I
Am
Iron Man
`;
In the ES5 version, we need to add this \n
to have a new line in our string. In Template Literals, we don't need to do that.
//ES5 Version
function greet(name) {
return 'Hello ' + name + '!';
}
//ES6 Version
const greet = name => {
return `Hello ${name} !`;
}
In the ES5 version, If we need to add an expression or value in a string we need to use the +
or string concatenation operator. In Template Literals, we can embed an expression using ${expr}
which makes it cleaner than the ES5 version.