What are template literals in JavaScript

Introduction

This article is in continuation of our ES6 series, and today we will be treating TEMPLATE LITERALS, a new feature in ES6. Template literals were introduced in ES6 to create strings, prior to ES6, the only way to concatenate strings was by using this operator (+). For example

const student = {
  name: 'Amara Metu',
  guardian: 'Joy Ishang'
};

const teacher = {
  name: 'Mrs. Cole',
  room: 'N231'
}

let message = student.name + ' please see ' + teacher.name + ' in ' + teacher.room + ' to pick up your report card.';

Amara Metu please see Mrs. Cole in N231 to pick up your report card.

This works fine till we have to start a new line.

let note = teacher.name + ',\n\n' +
  'Please excuse ' + student.name + '.\n' +
  'He is recovering from the flu.\n\n' +
  'Thank you,\n' +
  student.guardian;

Mrs. Cole,

Please excuse Amara Metu. He is recovering from the flu.

Thank you, Joy Ishang Looks grumpy and confusing right, this is changed with the introduction of template literals (previously referred to as "template strings" in releases of ES6.

Syntax

string text

string text line 1 string text line 2

string text ${expression} string text

A brief description

Template literals are denoted by backticks (`` ), rather than using single or double quotes '' or " ". Template literals can contain placeholders that are represented using the dollar sign and the expression encompassed in curly brackets ${expression} making it easier for you to build strings. The expression in the placeholder and the text between the backticks get passed to a function.

• Example We will use our previous example but now in a template literal

  let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick up your report card.`;
  

It returns

Amara Metu please see Mrs. Cole in N231 to pick up your report card. Example 2

let note = ${teacher.name}, 
  Please excuse ${student.name}.
  He is recovering from the flu.
  Thank you, 
  ${student.guardian};

Result

Mrs. Cole,

Please excuse Amara Metu. He is recovering from the flu.

Thank you,

Joy Ishang

Using Multiline strings

//Template string

console.log('string text line 1\n'+
'string text line 2');

// "string text line 1
// string text line 2"

//Template literal

console.log(`string text line 1
string text line 2`);

// "string text line 1
// string text line 2"

Using Expression Interpolation

When embedding expressions within template strings, we use the following syntax:

let x = 62;
let y = 25;
console.log((x + y) + ' is the total money spent and \n not ' + (2 * x + y) + '.');
// "87 is the total money spent and 
 // not 149."

The same example with Template literals:

let x = 62;
let y = 25;
console.log(` ${x + y} is the total money spent and
not ${2 * x + y}.`);
// " 87 is the total money spent and
//not 149."

Conclusion

Using template literals has made our codes look less grumpy and clean.

Happy reading!

If you liked this article please follow me on Hashnode for my latest articles. I'm tweeting my journey on Twitter daily, this way to my LinkedIn . Hasnode

I share my knowledge on,

• 🌐 Web Development
• ✍️ Content Creation
• 💼 Career Development
• 🦾Personal Growth
• BlockChain
• And more!

Happy reading!