JavaScript template literals

Something cool that was introduced in JavaScript ES6 is Template Literals.

You might wonder, what the hell are Template Literals Chris, and more importantly, why do I even need them?

Template Literals are a very quick and widely adopted new way of defining strings.

Besides that, they come with some extra new and handy methods. I'm going to be showcasing some examples of the changes between the old method and the new one.

Difference between strings and template literals

If we want to define a string in JavaScript, we can do that using quotes, either single (') or double (") quotes.

const myString = 'Cool I can be anything';
const otherString = "Me too!";

With template literals we can do the same, but using a backtick (`).

const templateLiteral = `I can also be a string`;

Ok, but that almost looks the same so what makes them so great?

Template literals can be multiline

Creating a multiline string was always an issue when it comes to JavaScript, we had to include a \n or just use multiple strings.

const multi = 'Hello\
Also hello'
console.log(multi); 
// 'HelloAlso hello'

const multi = 'Hello \n Also hello';
console.log(multi); 
// 'Hello 
// Also hello'

As you can see this can be super annoying to include these \n escapes everywhere.

With template literals this is way easier, we can just type multiple lines.

const multi = `Hi

Yes I'm on multiple lines
How cool`;
console.log(multi);
//"Hi
//
//Yes I'm on multiple lines
//How cool"

Ok that's a big pro already!

It can handle variables

Another thing that will annoy you as a developer is that you have to escape the string to use a variable.

console.log("What is 2 + 3: " + ( 2 + 3 ) + "!");
//'What is 2 + 3: 5!'

Jeez, such a hassle to include a simple variable or function.

With template literals, we can use variables using this syntax ${variable}.

console.log(`What is 2 + 3: ${2+3}!`);
//'What is 2 + 3: 5!'

Oh, wow way shorted and easier on the eyes already!

Another great example and everyday use-case would be expressions.

Let's say we have a dynamic class we need to add.

With normal string we have to either escape or break this in two separate things.

let bodyClass = 'body ' + (isLargeScreen() ? 'large' : 'small' );
console.log(bodyClass);
// 'body large'

With template literals this can be made easier.

let bodyClass = `body ${isLargeScreen() ? 'large' : 'small'}`;
console.log(bodyClass);
// 'body large'

So with this being said, create a habit of using template literals, it will make your life so much easier.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Emmanuel Marabe Omokagbo's photo

Great write up Chris! I was actually planning on writing on this for my bootcamp task till I saw it as a featured article here. Now I have to write about something else 😆.

Chris Bongers's photo

Ah no, we can never have enough content on Template Literals!

Feel free to give it your twist Emmanuel Marabe Omokagbo

Braydon Coyer's photo

An excellent introduction that's extremely easy to follow. Great job, Chris!

Chris Bongers's photo

Thanks Braydon!

Glad you enjoyed it 🤟

Shamaayil Ahmed's photo

Always hit up with these.

Chris Bongers's photo

Are you using them or struggling with them?