Today I'm going to cover a very useful tool in JavaScript that comes with ES6. Where going to take a deep deep dive into Template Strings, What they are and what they can be used for. Ever since I was introduced to them in the middle stage of my program I stopped using the old way to write strings when I needed to add some outside source into the string. This old way in JS is called string concatenation. Of course sometimes I might copy and paste some code with this old method of writing a Dynamic string and forget to refactor it to template string, then have to write a very long blog about Template strings.
Starting out with the basics to create a string in JavaScript we can either use single quotes to create a string such as
('This is a string') or you can use double quotes to create a string ("This is another string"). Which ever you pick really doesn't make a difference for a simple string that is going to be a one liner. Now with ES6 we are given another option to write a string which instead of the quotes we use back ticks. If your not that key savy, the back-ticks are at the top Left of your keyboard right to the left of the number (1). So now you can write another string using back-ticks.
For this instance I had to use a picture because when you use back-ticks when writing a blog in Dev it formats it into a block. Luckily I was able to catch this small feature otherwise my example would of been lost. So now you're probably asking what's so special about this different syntax, and what separates it from the single quotes and double quotes. Well there's a lot of things that these back-ticks can do. Back to the string concatenation example when we have to add an outside source into a string we simply can't just inject the variable right into the string, we would have to close off the string then use the addition symbol but it in the variable then add another addition symbol then finish the rest of the string.
From the example above there's a lot going on, and that's one putting one outside source, could you imagine if there was three or four might variables that the sentence might need. That's a lot of addition or plus signs. Also another small detail that could easily be looked over is the WHITESPACE, you definitely have to take that into account if you want the proper formatting. If you ask me that's a lot to worry about. As developers where probably off solving complicated code and running into bugs all the time so we need tools that make things very convenient for us so we won't be frustrated. String concatenation if you ask me is very frustrating. Back-ticks to solve this problem we now have a Template tag. The syntax for a template tag is as followed ${}. Where going to take the previous example and switch it out for a the new way.
As you see in the example above there's no addition signs to be seen, this is because the template tag creates a space for the variable to be placed directly inside of the string, then it will transform it into a string! So now you can just write the string and add the outside source just like another word in the sentence. This just doesn't restrain itself from adding adding string into the string you can add any JavaScript expression. Such as function calls, arithmetic, boolean, and more. When I was first trying to implement my very first template tag, was when I was taking an exam and I knew about the template tag but completely forgot about the back-ticks because a good amount of time had passed since I ran into this new feature and I just recalled the template tag. It took a professor to point out what I was missing and when he said back-ticks let's just say I had forgot how they looked like and where they were on the keyboard. It was a pretty embarrassing moment, but I had figured out the complex prompt of course.
Now if you thought that was all that template strings can do, think again there's more. Not only can it substitute variables it can also do line breaks for you without the need to actually write out \n if you want your string to be multi-lined. In the old way of writing a string your code would have to look like this.
Now as you can clearly see if we want to make a line break we have to type out the characters forward slash "\" and "n" that's two unnecessary characters that I can honestly do without, and just imagine if your righting out a a nine multi line string, that's an extra eighteen characters. So now if we want to achieve the same thing with template string's all you have to do is this.
Here comes our hero template strings to come save the day and also our fingers from having to type out unnecessary characters. As you can see, you can type out the string just the way that you want it, so it's easily to visualize and you don't have to write those extra two characters \n. Now of course everything has it's drawbacks and special conditions but for this instance I'm not really complaining because of the fact that the upside to template strings far outweigh the draw backs. I'd even compare it too the drawback on a scale is a feather, and the upside if the Eiffel tower. If you want to use the forward slash character "\" in the template you would have to write it out like by adding another forward slash.
The same would be said if you were for some ever reason need to write out "${" characters in the string you would have to use the forward slash also in order to use them.
Top comments (0)