I Literally Can't With Template Literals: 3 Ways to Use Them

Rachel Lawson — Fri, 13 Oct 2023 21:50:21 +0000

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 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, string interpolation, and 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:

But with the magic of template literals, you can achieve this in a much more elegant way:

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:

Becomes this:

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 (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.

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

Note: The rest parameter (...) was used in this example. If this is unfamiliar to you, you can read more about it here.

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?

A Belated Introduction

Rachel Lawson — Thu, 21 Sep 2023 20:35:17 +0000

Hi, I'm Rachel. I joined this community a few years ago, but I quickly got distracted with school and life and never did anything with it. Since then, I had a baby and graduated with my bachelor in IT.

Now that I'm done with my courses, I have some time to explore my interests and possibly choose a specialization. I've known for a long time that I wanted to work in tech, but I can see myself doing so many different things that it's hard to narrow it down! I started in the computer science program, picturing myself working as a software developer, but I felt bogged down and bored with all the theory of it. I'm a hands-on learner and it was hard to stay motivated and confident in my career direction without learning the tools or ever applying my knowledge. I also had the desire to explore things like hardware and networking, and ultimately decided to switch my major to information technology. I was happy with that direction and learned a ton, but now that I've graduated, I still feel that itch to code.

At the moment, I am a full-time parent, but I plan to rejoin the work force soon. I'm using this time to explore some possible career paths - namely, web development and/or cloud computing.

I love to write, so I'm hoping I can use this platform to chronicle my journey, solidify things I've learned, and keep up my momentum.

I so appreciate your time if you’ve read this far! Whether you’re a fellow learner hoping to break into the industry, or a seasoned professional willing to share their experience, please feel free to say hey!

DEV Community: Rachel Lawson

I Literally Can't With Template Literals: 3 Ways to Use Them

Multi-string Lines

String Interpolation

Tagged Templates

A Belated Introduction