May 6th, 2020

JavaScript ES6: Template Strings

Template strings (or template literals) in JavaScript ES6 is a technique in which you can put variables into strings. Similar to const and let, template strings don’t offer much in the way of new functionality but instead make some quality of life improvements to our syntax.

In ES5, if you want to add variables into a string you need to end the string, concatenate in your variable and start writing your string again. 

// ES5
var name = "Jonathan";
var currentDate = new Date().getFullYear();
var sentence = "My name is " + name + " and the year is " + currentDate + ".";

console.log(sentence); // My name is Jonathan and the year is 2020.

In the example above, we are concatenating in two variables (name, currentDate) into a string. As you can see, we have to keep ending the string to add the variables and it’s already getting quite messy with double quotes and plus symbols all over the place. It’s also highly prone to syntax errors and just a pain to have to write out.

Let’s tidy it up a bit with ES6 template strings.

A template string is just a nicer way to join together JavaScript variables with a string.

// ES6
var name = "Jonathan";
var currentDate = new Date().getFullYear();
var sentence = `My name is ${name} and the year is ${currentDate}.`;

console.log(sentence); // My name is Jonathan and the year is 2020.

With template strings, instead of using double or single quotes ,we use back-ticks. Inside the back-ticks, any time we want to add a variable we wrap the variable name in curly brackets and put a dollar sign in front of it.

We’re not limited to just using variable names. Any valid JavaScript expression will work.

// We manipulate the variable
var sentence = `...and the year is ${currentDate * 2}.`; // ...and the year is 4040

// We can ignore the variable entirely and add the date directly into the string
var sentence = `...and the year is ${new Date().getFullYear()}.`; // ...and the year is 2020

Using template strings is a small quality of life improvement. The string written out is more legible than it was when we had to keep using double quotes and plus symbols and is less prone to syntax errors. 


Continue Reading

  • April 29th, 2020

    CodePen Challenge: Handling User-Uploaded Images

    In this week's Challenge, we start with a set of very different user-uploaded avatars and it's our job to do something with them to bring them together nicely.

  • April 21st, 2020

    CodePen Challenge: Image Hovers

    This week's challenge prompt was to design a hover effect for an image. I created a simple effect that will jiggle the jelly when it is moused over!

  • March 3rd, 2020

    Friday wins Gold for Best Small Agency at the 2020 DMA Awards

    We are delighted to announce that Friday has been awarded Best Small Agency (15 or fewer employees) at the 2020 DMA Awards in Dublin.

  • May 17th, 2020

    JavaScript ES6: The Basics of Classes

    In this article, you’ll see how messy and complex it is to set up prototypal inheritance in ES5 and how you can use JavaScript ES6 Classes to make understanding and implementing inheritance much easier!

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now