Template Literals in JavaScript ES6
Let’s talk about concatenating strings and how awful they were prior to ES6 and why the introduction of template literals is useful for us developers. However, before we dive deeper into template literals, I’d like to talk about how JavaScript developers concatenated their strings prior to the introduction of template literals with ECMAScript 2015(ES 6).
The problem
JavaScript developers concatenated their strings with the + operator, it looked something like this:
But wait! Where’s the space? If you check the console, you’ll simply see HelloWorld. Seems like I forgot to add a space between my strings. Should I add the space within the variables themselves or should I make my console.log even longer? The better design choice would probably be to add the space within the console.log itself in case we need to use the length of our string variables later on. So let’s do that.
Notice how messy it is? Now let’s assume we have 5 variables we need to work with and each need to be separated by a space between.
It’s getting even more overwhelming, isn’t it? But that’s not the only reason we needed template literals. See, the + operator we used to concatenate strings caused problems with data types. Let’s assume I have 2 numbers, if I had to display these 2 numbers side by side, I’d have to store them as strings. But why is that? If I simply did console.log(firstNumber + secondNumber); I’d get the sum of those numbers and not the numbers displayed side by side. It caused problems with different data types as well but you get the point.
Template literals are here for the rescue
If you’ve been following along so far, I’m sure you agree this was indeed a problem prior to ES6. Let’s talk about how to use template literals first. You simply use back-ticks(``) instead of the regular quotation marks(“ ” or ‘ ’). If you’re going to add a variable or call a function, you simply add $, put curly brackets and enter the name of your variable or function. It looks something like this:
Notice we used back-ticks instead of the regular quotation marks and we put a dollar sign before our function and wrapped our function in-between curly brackets. Now let’s try displaying 2 numbers side by side and display the sum of those numbers after with a function.
How awesome is that? We can call functions inside our template literals, use variables and more. You can even use the ternary operator to check conditions!
This will display The weather is not sunny if you check the console. Do you remember the bad old days of having to use 2 separate console.log lines or the \n operator to skip to a new line? Well, with template literals all you need to do is…
Let’s check the console.
Well, here you go! No more multiple console.log lines, no more \n characters. What if I wanted to embed HTML code? Well, let’s see!
This will add a paragraph element with “My name is Yiğit Atak and I love JavaScript”. Template literals are truly awesome and are a life saver. Thanks for reading!
Got any questions or would you like to add something I missed? Leave a comment down below! My next article will be on tagged templates.
