When ES6 (aka ES2015) landed in 2015, we were introduced to a new way of working with strings and variables: String Templates. Let's take a look at various ways of working with strings and how string templates improves this experience.

I also added a video version of this lesson which covers much of this same information if you prefer to learn that way.

Escaping Characters

Before the release of ES6, there were essentially two ways of defining strings: with double-quotes or single-quotes.

Single vs Double Quoted Strings

The only difference between single and double quoted strings is that with single-quoted strings you don't have to escape double-quotes. Likewise, with double-quoted strings, you don't have to escape single-quotes. Let's look at a quick example:

const title1 = 'Chip\'s Challenge';
const title2 = "Chip's Challenge";

Notice in title1, since we're using single quotes to define the string, we need to escape the single quote character, otherwise JavaScript will assume that you're closing the string when it reaches that single quote. Now let's look at double quotes:

const link1 = "<a href=\"#go\">Click here!</a>";
const link2 = '<a href="#go">Click here!</a>';

Again, you can see that swapping quotes can avoid having to use the backslash escape character, but if your string contains both single and double quotes, you'll have no choice but to use escape characters.

Enter String Templates

You define a string template using the back tick character: ` (it's the one in the top left corner of your keyboard, to the left of your "1" key.

const link = `<a href="#chip">Chip's Challenge</a>`;

You can see that with string templates, you don't need to escape single or double quotes. Though you still need to escape backticks, for the rare case you'll need to use them:

const message = `Here's a backtick: \``;

// Here's a backtick: `

Handling Line Breaks

The Newline Character

In order to create line breaks (or new lines) in traditional strings, you'll need to use a newline character (\n). Here's what that looks like:

const message = "First Line\nSecond Line\nThird Line";

/*
First Line
Second Line
Third Line
*/

This leads to less readable strings as you need to mentally parse the \n from the text.

You might be wondering: "couldn't you just hit enter to make a new line?", but if you do that, JavaScript will throw an error, because it's expecting to find a closing quote, and instead sees a line break.

const badText = "This will
throw an error";

// Uncaught SyntaxError: Invalid or unexpected token

Line Breaks in String Templates

With string templates we don't need to use any special characters, just simply hit enter and you're good to go:

const message = `First Line
Second Line
Third Line`;

/*
First Line
Second Line
Third Line
*/

One thing to watch out for is that if you try to indent your string, it will add those spaces/tabs to the string:

const text1 = `First Line
    Second Line
    Third Line`;
    
// ...is equivalent to this...    

const text2 = 'First Line\n    SecondLine\n.   Third Line';

That may be ok depending on your use case, but it's just something to keep in mind.

Using Variables with Strings

Traditionally quoted strings don't have a way to include variables within the string, so you'll end up having to concatenate strings and variables:

const name = 'Nick';
const greeting = 'Hi ' + name + '!';

// Hi Nick!

Maybe you built your own template method like this:

const name = 'Nick';
const greeting = 'Hi {name}!'.replace('{name}', name);

// Hi Nick!

The Power of Template Literals

As the name suggests, template literals do provide a templating solution. Simply place your variables inside of the template tag ${} and the'll automatically be inserted in your string:

const name = 'Nick';
const greeting = `Hi ${name}!`;

// Hi Nick!

Not only is it a lot less boilerplate than our DIY template, but it's also easier to read than string concatenation. You can even use expressions inside the tag:

const answer = `100 + 50 = ${100 + 50}`;

// 100 + 50 = 150

Using functions are totally fine too:

const balance = `Your score: ${Math.round(93.6)}`;

// Your score: 94

Any Reason to Not Use String Templates?

In most cases there really isn't any advantage to defining strings using quotes anymore. Some people feel it's easier to type quotes (especially various keyboard layouts), or that quotes are easier to read. In my opinion, it's a matter of preference. For me, I'm used to typing quotes (especially where I switch between languages) so I tend to use single or double quotes until I need to use variables, then I use string templates. Let me know your preference in the comments below.