Template literals in JavaScript

Laurie - Aug 6 '20 - - Dev Community

Earlier this week I asked people which piece of syntax they always find themselves Googling. My answer to that question was string literals in React (officially called template literals but we'll get to that).

In response, I got a lot of people asking questions. Aren't string literals an ES6 piece of syntax? Yes, they are.

What I should have said is that I always seem to mess up string literals INSIDE React. What's the difference? Let's talk about it!

"Just strings"

String literals are a concept with many names! You may have heard them referred to as template literals, template strings, and then my combined version 😅.

The long name for regular strings is “string literal”. However, due to the naming of template strings/template literals it’s gotten confused in modern conversations.

In some ways, string literals and strings can be the same thing. The following is considered a string literal.

const text = `some string`
Enter fullscreen mode Exit fullscreen mode

That looks like it's a regular string. The only difference is that it's surrounded by backticks instead of quotation marks.

Multi-line strings

The reason this concept is more powerful than strings is because you can do more with it than the example above.

For instance, string literals allow for multiline strings.

const text = `some string line 1
and line 2 too`
Enter fullscreen mode Exit fullscreen mode

How about an expression?

String literals are popular not necessarily because of the two use cases above, but because of the fact that you can include expressions in them.

const text = `some string ${expression}`
Enter fullscreen mode Exit fullscreen mode

An expression can be a lot of things. Some kind of string or number manipulation logic. Or, more commonly, a variable.

let name = getName()
const fullName = `some string ${name}`
Enter fullscreen mode Exit fullscreen mode

So how is it different in React?

Why does this confuse me in React? Arguably it shouldn't, it's the same ES6 syntax. The reason I always seem to mess it up in React is because you can't use a string literal directly when you pass it in a component.

<Component name=`some string ${name}`/>
Enter fullscreen mode Exit fullscreen mode

The above code isn't valid. In order to use that string literal, you have to surround it with curly braces.

<Component name={`some string ${name}`} />
Enter fullscreen mode Exit fullscreen mode

It's powerful code. Incredibly important and often used. But for me, it's one too many characters to remember.

And?

So I look it up! And maybe in the future, I'll look at this post instead. However, even if I can't write it off the top of my head it's invaluable to know what it is.

As with any piece of syntax, the more building blocks you know the more approachable it is to read code. It allows you to start to understand how the final codebase was put together.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .