I Literally Can't With Template Literals: 3 Ways to Use Them
Tags: javascript, tutorial, learning, beginners
Published: 2023-10-13 21:50:21

As someone who is still working on my coding-fu, certain fancy-schmancy syntaxes can make me panic a little bit when I see them. One Javascript technique that has given me this kind of trouble in the past is the [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) with its sophisticated backticks and dollar signs. 

In this article, my goal is to boil the concept down into the simplest explanation that makes sense to me. And if you, internet stranger, also struggle to remember how and when to use template literals, I hope it makes sense to you, too.

The first thing you need to know is that template literals are surrounded with backticks (`), instead of the usual double or single quotes that you would use for strings.

Let's focus on three uses of the template literal: [**multi-string lines**](#multi-string-lines), [**string interpolation**](#string-interpolation), and [**tagged templates**](#tagged-templates).


## Multi-string Lines

With a template literal, you can easily make a string that includes multiple lines.

If you're using a normal string and you want multiple lines, you have to do something like this:
![Multi-line string using normal string](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9bse3t4ib77dcpytb6oz.png)

But with the magic of template literals, you can achieve this in a much more elegant way:
![Multi-line string using template literal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycdntvvpm99y8vq5kihs.png)

Pretty simple, right?



## String Interpolation

This one is so useful. Before learning about template literals, if I wanted to include a variable value or an expression in a string, I would have to concatenate the variable or expression with the string(s) using the addition operator (`+`). This can be time consuming and it looks messy. 

Enter string interpolation! This means that you can embed expressions directly into strings. By wrapping an expression with `${}`, you can insert the result of the expression directly into the string. Doing it this way is _so_ much easier on the hands and the eyes.

Here's an example.

This:
![Inserting the result of an expression into a string using concatenation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4672hukyifgga7rzl3s2.png)

Becomes this:

![Inserting the result of an expression using string interpolation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqp59ohap4hkwyyt2r3v.png)
 
String interpolation is way quicker than concatenating, especially when you're dealing with multiple variables/expressions.



## Tagged Templates

This one is more complex and trickier to understand initially, but still very useful. [Tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) (aka tagged templates) allow you to parse a template literal with a function called a tag function.

For example, you can pass the template literal to the tag function and have it return just the interpolated values (the results of the expressions surrounded by `${}`) from the template literal.

![Return interpolated values from template literal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bp4ao5n3swscaehcrpn.png)

You can also return an array of strings, split up by the interpolated values. In other words, everything BUT the interpolated values.

![Return strings from template literal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rh6y9fwsh51p1de0rng6.png)

Note: The rest parameter (`...`) was used in this example. If this is unfamiliar to you, you can read more about it [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters).


There are more applications of template literals in JavaScript, but I think this is a good starting point. It's worth taking the time to get a basic grasp on this stuff, considering the time you will save yourself in the long run. And who doesn't want to be able to write fancy-schmancy code?