ES6 For Beginners : Template Strings / literals

Template strings or as they are also called Template literals, are one of my favorite ES6 feature. They are implemented using the backticks character ( the key below Escape). They are easy to use and very helpful when it comes to outputting long string of text along with some variables.

What are template strings?

You know when you had to output some text along with a variable you used the + (concatenation operator) to do this which often led to code which was error prone and difficult to read. Consider the following example

Here as show on line 5 we are storing a sting in a message variable that we declared using let keyword that thanks the user for the purchase. In this example we are using only two variables in the string and the string is of only two sentences but you can imagine the complexity if the number of variables were to increase. Keeping tack of all the quotations would take up a lot of time.


Now let’s see the above example by using template strings

Here we are using template literals on line 5 note that we are not breaking and concatenating the string. We are using ${} for any variables that we might want to use. As you can see this is much easier to write as we do not have to worry about the quotes and concatenations.


This is not the only feature we can also preserve line breaks in out string. Consider the following

Here we are breaking the string up in to two lines and if view look at the console the message will be printed in two separate lines which is useful in some cases.



The Template Literals or Template Strings are easy to read and write and are less prone to error.


Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @uncutAcademy
Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:
Prantik Vaghela

Prantik Vaghela (uncutAcademy)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)