ES6 Template Literals (Template Strings) Explained

With ES6, we can do string concatenation in a more natural way that improves readability. It’s super simple!

Before ES6, we’d concatenate strings in a couple of ways:

1. The + (addition) operator
2. The concat() method for strings

In practice, this would look like this:

var greeting = "Hi!"
var name = "Rob"
var language = "React"

// Using the + operator
console.log( greeting + " My name is " + name + " and I'm currently learning " + language + "." )

// Using the concat() method
console.log( greeting.concat( " My name is ", name, " and I'm currently learning ", language, "." ) )

// Alternatively
console.log( "".concat( greeting, " My name is ", name, " and I'm currently learning ", language, "." ) )

There’s a few things that just aren’t pleasant here:

• With the addition operator, we alternate between strings and variables multiple times and it’s not easy (at least without syntax highlighting) to always understand whether you’re inside or outside of a string.
• Spaces between variable names, the addition operators and strings make it a little more challenging knowing if you’ve included a space where it’s needed within the string itself (assuming one wasn’t added to the variable). It’s a similar situation with the quotation marks; are they in the right place? Have I closed that string or not? Did I accidently include a variable?
• With the contact() method, you have to start from a string that’s either stored in a variable or directly declared there. You might not want that variable, and declaring either an empty string or the start of a string outside of the contat‘s argument list adds separation. Not nice.
• You have the same challenges here with alternating between variables and strings; going inside of quotation marks, then out again.
• To add a simple full stop to the end of the existing string / sentence, you have to add either + "." or , ".". That’s 5-6 extra characters to add just one.

Overall, the formatting and syntax mean they’re not the most free-flowing lines of code you’ll ever write.

Introducing ES6 Template Literals

With template literals, the syntax for writing strings that include variables is much more natural to both write and to read. Let’s take a look at the same example from before, this time using ES6:

const greeting = "Hi!"
const name = "Rob"
const language = "React"

// Using the ES6 template literal syntax
console.log( `${greeting} My name is ${name} and I'm currently learning ${language}.` )

There we go. Simple!

There’s two main components or syntax to remember:

1. Use backticks (``) to enclose your template literal.
2. Use the dollar sign followed by your variable enclosed in curly braces (${}) to use variables.

There’s more to template literals than the above, such as easier multi-line strings, that you can learn more about here.