An Intro to Template Strings

An Intro to Template Strings

In JavaScript, when you want to put a variable inside of a string, it's a pain in the ass because you have to stop your string, concatenate on the variable, and then open your string again and keep going.

var name = 'Snickers';
var age = 2;
var sentence = 'My dog ' + name + ' is ' + age * 7 + ' years old.';

Most other programming languages have the ability to just drop your variables right inside of a string and interpolate it, but until now JavaScript hasn't had this.

What ends up happening is you forget one of your closing quotes, and you get an error and it tells you it's on line 3. You say "Of course it's on line 3, but I don't know where it is!"

We can fix all of that with what's called template strings, or template literals in ES6. In JavaScript we have double quotes and single quotes to make a string. Now we have a third way to make a string, and that is with back-ticks, which I've been using in most of my examples so far.

Let's take the above code. How do we convert it to ES6 template strings? We switch to using back ticks and then use the ${} syntax inside those strings!

const name = 'Snickers';
const age = 2;
const sentence = `My dog ${name} is ${age * 7} years old.'`;
console.log(sentence);

That is going to pop in, or interpolate, the name and age variables that we previously had set there by using $, curly brackets and the variable name.

You can also run JavaScript straight away inside of these curly brackets, too. You can add in a variable, you can run a function, you can run any JavaScript inside of the curly brackets — including more template strings, but we will talk more about that later.

I'm calculating the age in dog years right inside of sentence by using ${age * 7}, so our console.log will just show a regular sentence, My dog Snickers is 14 years old.

That's a very basic overview of template strings. However there's quite a bit more that we can do with them. It can be very handy other than just being able to stick variables inside of it — see you in the next one!

Find an issue with this post? Think you could clarify, update or add something?

All my posts are available to edit on Github. Any fix, little or small, is appreciated!

Edit on Github

Syntax Podcast

Hold on — I'm grabbin' the last one.

Listen Now →
Syntax Podcast

@wesbos Instant Grams

Master Gatsby

Master Gatsby

Building modern websites is tough. Preloading, routing, compression, critical CSS, caching, scaling and bundlers all make for blazing fast websites, but extra development and tooling get in the way.

Gatsby is a React.js framework that does it all for you. This course will teach you how to build your websites and let Gatsby take care of all the Hard Stuff™.

MasterGatsby.com
I post videos on and code on

Wes Bos © 1999 — 2022

Terms × Privacy Policy