Kamaljot Singh
Kamaljot's Blog

Kamaljot's Blog

3rd Best Feature of ES6

Increase code readability by two-folds

Kamaljot Singh's photo
Kamaljot Singh
·Oct 22, 2021·

4 min read

3rd Best Feature of ES6

Introduction

Javascript is a language that was developed in only 10 days. Yes, the creator Brendan Eich developed it in less than two weeks and states "It was also an incredible rush job, so there were mistakes in it - and there would be gaps". Fortunately, Javascript has been standardized via ECMAScript which built numerous core features on top of the original Javascript. ES2015 or ES6 was a huge leap in the language that brought many changes and made the language better. One of the exciting features is template literals.

Why Template Literals

Unlike using double or single quotes to express string characters, template literals use backticks (`) and can do much more than what " or ' offer. Template literals give access to do multi-line strings, interpolate expressions, and use tagged templates. They make writing code much neater and understandable compared to using only strings in simple to complex applications.

Dealing With Multi-line Strings

Before template literals, having multi-line strings was accomplished by \n. This method works well with small stings but is not as clean and readable compared to using template literals.

Without template literals:

console.log("JS History:\n" + "Javascript was originally named \"Mocha\"");
//JS History:
//Javascript was originally named "Mocha"

With template literals:

console.log(`JS History:
Javascript was originally named "Mocha"`);
//JS History:
//Javascript was originally named "Mocha"

With these two different methods of doing the same task, it is easy to understand how template literals simplify things. It eliminates the use of including \n to create a new line and enables you easily input double quotes and is displayed just as you wrote it.

Include Expressions

Using the ${} inside the (``) gives access to expressing variables, objects, strings, or even mathematical operations with other values.

let language = "Javascript";
let year = 1995;
let currentYear = 2021;
console.log(`${language} was created in ${year}. 
It has been in use for ${currentYear - year} years`);
//Javascript was created in 1995. 
//It has been in use for 26 years

Creating Tagged Templates

If you like the usability of template literals, you will be interested in an advanced form of it using tagged templates. Tagged templates give access to parse literals with a function. Tagged templates consist of two parts, one being the strings and the other, the variables being passed on. These two parts can also be referred as static content and dynamic content respectively.

For example:

let person = "Kamaljot";
function displayGreeting(strings, name){
  console.log(strings);
  console.log(name);
}
displayGreeting`Hello ${person}, it was nice meeting you`;
//['Hello ', ', it was nice meeting you']
//Kamaljot

Here we notice that the first parameter puts all the strings or static content into a single array and holds the variable or dynamic content separate. Although the dynamic content of the name variable is not in the strings array, it is represented as an empty string.

You can also include more than one dynamic content by using the spread operator ... which allows arrays and can expand them into their individual elements.

let guest1 = "Kamaljot";
let guest2 = "Simran";
function displayGreeting(strings, ...guests){
  console.log(strings);
  console.log(guests);
}
displayGreeting`Hello ${guest1} and ${guest2}, welcome to the event`;
//['Hello ', ' and ', ', welcome to the event']
//['Kamaljot', 'Simran']

Looking closer at our output, we see that our function takes two arguments and holds the static and dynamic content separately. The strings array holds all the static content consisting of strings while the names array holds all the dynamic content also referred to as tags.

To make tagged templates useful and not just output two separate arrays, we can manipulate the arguments being passed and output information in the order we desire.

let guest1= "Kamaljot";
let guest2= "Simran";
function displayGreeting(strings, ...guests){
  let message = strings[0];
  for (let i=0; i<guests.length; i++){
    message += guests[i] +strings[i+1];
  }  
console.log(message);
}
displayGreeting`Hello ${guest1} and ${guest2}, welcome to the event`;
//Hello Kamaljot and Simran, welcome to the event

Conclusion

Template literals is a powerful tool that I believe many of us can implement in our code to make it more readable and concise. The topics I have mentioned here are giving a brief introduction to some of the capabilities of template literals. Tagged templates are unique and give programmers another technique to transform content. Feel free to share your knowledge on template literals and whether you use them or not in the comment section.

 
Share this