Check out a free preview of the full Professional JS: Features You Need to Know course

The "Template Strings" Lesson is part of the full, Professional JS: Features You Need to Know course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano demonstrates how template strings can be used for string interpolation, executing functions and complex expressions, and creating multi-line strings. He also mentions that characters like tabs and spaces will be included in the string when using template strings.

Preview
Close
Get $100 Off
Get $100 Off!

Transcript from the "Template Strings" Lesson

[00:00:00]
>> Maximiliano Firtman: Template strings also appear in ES6, and the idea is to solve a problem that we used to have in JavaScript. For example in this case, where we have a string and then we concatenate, and it's a mess because, for example, if I want the name to be in double quotes, I need to escape the double quote, which is kind of a mess.

[00:00:24]
Okay, and and then concatenate. And sometimes, when we concatenate the strings with numbers, where things may happen, okay? It depends on the case, but where things may happen. If you wanna go to a new line, like, we need to have this forward slash, new line characters. So it creates a new line, which, yeah, I mean, it works, but if you have been there, it's dirty, okay?

[00:00:52]
So now we have a new string, the new string is using the backtick, okay? And using the Backtick Tick, you can say, well, hello, my name is, and open double quotes.
>> Maximiliano Firtman: And if you want to use the first name variable, you use the expression syntax that makes an interpolation.

[00:01:17]
This is similar to the React.jsx template, but slightly different. We use dollar and kind of a code block, so in this case, first name. And within that block, you can execute functions, you can add complex expressions, you can even add other templates inside. So I can concatenate with other templates and do whatever you want, okay?

[00:01:42]
So it's a full JavaScript expression that you can add there. And also if you wanna do a new line or two new lines, you can just go multi-line with a template string without closing the string. So then I have the age, I live in city.
>> Maximiliano Firtman: So now, you will see that something exactly the same, but it looks cleaner.

[00:02:11]
Have in mind that if you like to little things like this because you feel like you should have, tabs to your stream like blah, blah, blah. Those tabs will also go to the string.
>> Maximiliano Firtman: Okay, so have in mind that, okay? It's multiline, but also if you open a template string every character Including new lines, including tabs and spaces, are going to the string.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now