I recently started learning JavaScript. It is a very powerful language that can create wonders on your webpage.
But it is not easy, just like any other language, you need to do a lot of practice to get an in-depth understanding of the concepts.
That means spending hours sitting in front of your system and writing hundreds of lines of code.
In such situations, even a little help seems like a lot, and that's what template literals did for me!
WHAT DOES THIS BLOG COVER?
This blog will talk about the use of template literals by comparing them to the normal concatenation method that is done using single or double quotes.
BEFORE I MET TEMPLATE LITERALS
The first thing I learned was logging to the console, which I did by using the quotes. I had no problem with that and it was fun to finally see myself playing with the console.
console.log("Hello World");
But as I learned more concepts, the use of quotes started to annoy me. Every time I had to combine a variable in between a string, I would need to close the quotes, use the + operator and then again start the quote after adding the variable.
const Name = "Mr. JS"
console.log("Today, I met " + name + ", he is a very complicated, yet powerful man.");
//output
Today, I met Mr. Js, he is a very complicated, yet powerful man.
Not, just that, taking care of all those spaces was a headache too. You need to make sure that you add space manually, inside the quotes, after adding a variable. So many times, I would miss the spaces and then the output looked very messy.
And then, I learned about template literals.
AFTER I MET TEMPLATE LITERALS
Introduced in ES6, template literals or template strings takes care of those spaces and variables in a single flow!
To use a template literal, we use backticks instead of quotes.
We can simply add any variable by using the ${...} syntax in between the backticks and type the variable between the curly braces.
const Name = `Mr. JS`;
console.log(`Today I met ${Name}, he is a very complicated, yet powerful man.);
//output
Today I met Mr. JS, he is a very complicated, yet powerful man.
We can completely replace quotes with backticks and it will work just fine. As you can see above, the variable declaration is done using backticks as well. Not necessary to do so, but it works the same.
Not, just that, we can even perform calculations between those curly braces!
const Name = `Mr. JS`;
const birthYear = `1995`; //JavaScript was invented in 1995 😉
let currentYear = `2022`;
console.log(`${Name} was born in ${birthYear} and is ${currentYear - birthYear} years old.`);
//output
Mr. JS was born in 1995 and is 27 years old.
Changing a line wasn't so simple too while using the quotes method. To go to the next line, when using the quotes method, we need to use \n\, which indicates a new line.
const Name = "Mr. JS";
const age = "27";
console.log("I met " + Name + ". \n\
He is " + age + " years old.");
//output
I met Mr. JS.
He is 27 years old.
As you can see, it looks very messy. But with template literal, all you need to do is press enter and continue typing!
const Name = "Mr. JS";
const age = "27";
console.log(`I met Mr. JS.
He is 27 years old.`);
//output
I met Mr. JS.
He is 27 years old.
CONCLUSION
With reference to the above examples, I can say that the template literals provide a much better experience of javaScript when compared with the use of single or double quotes.
Since the time I learned about template literals, I have never used quotes for writing my code. In my opinion, it is a good practice to use backticks instead of quotes all the time as it makes spending hours sitting in front of your system less painful.