One useful feature in ES6 that I came across recently is template literals. Template literals can be used to store a sequence of characters in much the same way as string literals, but they come with some added bonuses.
To create a template literal we use back-ticks (` `) as opposed to double or single quotes used for string literals. A basic example would be:
Both of these variables would evaluate to a string if they were logged out in console. The benefits of template literals become apparent when we take things to the next level and try to include variables within a string. Traditionally if we had a variable we could insert it into a string like this:
That is a very basic example but the closing of quotes and the inclusion of multiple
+ operators can become clumsy and unreadable when you’re dealing with large templates and multiple variables.
Template literals allow us to simply type the name of the variable into the middle of the string using the
We don’t need to worry about closing and re-opening quotes and there are no concatenation operators to worry about. Template literals give us a much cleaner method of interpolating variables into a string.
It’s easy to see how this could quickly get quite messy and it isn’t the nicest thing in the world to read. Template literals would let us write that code like this:
Much neater and much closer to natural HTML. We can get rid of the need to close and re-open quotes, we don’t need the
+ at the end of each line and we have even used the expression interpolation syntax from before to include our variables.
Template literals give us a much cleaner method of interpolating variables into a string and make handling multi-line strings much simpler.