“Hello” + reader_of_this_article + “, I am letting you know that javascript ” + negative_descriptor + “ at concatenation. \n Because javascript ” + negative_descriptor + “ at it you ” + negative_descriptor + “ at it too.”;That was ridiculously tough, and looking at it, It takes a little while to understand what is going on there. I had to go back and fix my spaces and triple check that I did it right. It looks disjointed and hard to follow.
Let’s try it again and see if this is better.
`Hello ${reader_of_this_article}, I am letting you know that javascript used to, ${negative_descriptor} at concatenation.
Because javascript used to ${negative_descriptor} at it you used to ${negative_descriptor} at it too. That has all changed now that javascript is ${really_positive_descriptor} at it. You will be ${really_positive_descriptor} at it too.`Wow, isn’t that much better.
Let’s dive in at the coolness of template strings.
What is a template string?
The example above was your first taste of a template string. In short, it is a multi line string that has a syntax for running javascript. Ya, it isn’t just for variables. You run javascript. So this:
`Jimmy is really ${cool}`Is just as valid as something like this:
`Jimmy is really ${findAdjective('jimmy')}`And they are nestable! ya, that’s right.
`${name} ${name === ‘jimmy’ ? `is really ${findAdjective(‘jimmy’)` : `is not so ${findAdjective(‘jimmy’)`}`‘ and “ were bad enough, now you are adding ` ?
Yep, and I like it so much I suggest moving to the ` completely. Look at it this way.
The ‘ and the “ have problems. In some languages there is a difference between them, but in javascript there isn’t. A string with ‘ is exactly the same as a string with “. So why have two? There is a lot to this question that I am not going to answer, but in my practical usage of javascript it comes down to one reason. When I have this sentence 'A man can't own a cloud', The single tick doesn’t work with out escaping, so I used to use “. And when I was needing to declare html properties the ‘ was more useful like so: `'<a href="sam" class="billy>tommy</a>'. That was the reason. But guess what. the ` is rarely used anywhere so that problem is mostly gone with the `.
Yay all is right in the universe, except, at the time writing this article the ` can’t be used in some places in some frameworks, for example with the require in a webpack and babel stack the ` fails. So My rule is ` for everything unless it breaks then ‘.
And back to template strings
Some things in the demo that I am going to show aren’t something that couldn’t be done before, but now it is much easier or much more doable because of the combination of things in the Front End scope these days.
Check this out:
If you have done much in react, this kinda looks like JSX, without the throw up aftertaste. (I just need to add, I like react and am starting to like JSX, but I threw up in my mouth a lot starting out with it.)
And that is some of the awesomeness of ES6 with template strings.
Be sure to look at the whole series: ES6 Series
or the next section: ES6 Series: Default Arguments, Object Definitions & Destructuring
