ES6 Template Literals or Template Strings

ES6 is an in-depth series which has many features, that makes the life of a developer much easier and one of them is template literals also knows as template strings. If you don’t know about ES6, I have a brief introduction article on it, have a read.

A new, fast and best way to deal with strings is Template Literals, it is a way to concatenate strings with variables and javascript expressions making the code more readable.

ES6: Template Literals or Template Strings

If you are fed up concatenating strings and variables using + sign then string literal is for you, and I assure you after seeing this template literal in ES6 you’re surely gonna love it and start using it right now.

How we are concatenating string till now, have a look at below example:

const a = 5;
const b = 6;
let sum = a+b;
//ES5 String concatenation
console.log(“The sum of “ + a + “ and “ + b + “ is “ + sum);

Doesn’t it look horrible using + something+ something + again and again? Have a look at how the same thing can be easily done in ES6 using Template Literals.

const a = 5;
const b = 6;
let sum = a+b;
//ES6 Template literals
console.log(`The sum of ${a} and ${b} is ${sum}`);

Now I don’t think I need to tell you which one is easy to write.

Unlike the traditional strings, template strings do not use ‘single quotes’ or “double quotes” but uses a `backticks` to write string which makes it easier to use single quotes or double quotes in your string without worrying as shown in below code.

If you don’t know what are backticks, its the key left to number 1 on your keyboard.

console.log(`Hello “this is text in in double quotes” and ‘this one in single quotes’`);
//And this print the same without any error.
//Output: Hello "this is text in in double quotes" and 'this one in single quotes'

It's not only you can pass variables is ${ } but you can pass any valid javascript expression in it and concatenate it with string. Let’s take the same sum of two numbers example.

const a = 5;
const b = 6;
//let sum = a+b;
//Instead of making third variable sum just pass a+b in console.log    statement.
//ES6 Template literals
console.log(`The sum of ${a} and ${b} is ${a+b}`);

One more example,

//new Date().getFullYear() returns the current year
function whichYear(){
 return `This year is ${new Date().getFullYear()}.`;
}
whichYear();
//Output : This year is 2020.

Now there is one last thing I want to point out to you in the template literals if you end up with a template string that looks like where you have a template string having just javascript variable, you don't need to wrap it in template string you can just put the variable by itself it’s same.

const year=new Date().getFullYear()
//Never do this it’s not wrong but not a good practise
//const yearStr=`${year}`;
//Instead you can write it like this no need to wrap in template string
const yearStr=year;

This article was about template strings, I will try to write more articles explaining all the syntaxes of ES6. Hope it was useful.

Reading is good but reading with implementation is great !

Suggestions and critics about the article are most welcome.