JavaScript Template Literals

JavaScript template literals, also known as template strings, are a new feature introduced in ES6. They allow you to create strings in a more flexible and powerful way than with traditional single or double quotes.

Creating template literals

Template literals are enclosed in backtick (`) characters, instead of single or double quotes. For example:

const name = 'Alice';

const greeting = `Hello, ${name}!`;

The ${name} expression inside the template literal is called a placeholder. When the template literal is evaluated, the placeholder will be replaced with the value of the name variable.

Multi-line strings

Template literals can be used to create multi-line strings without having to escape newline characters. For example:


const poem = `

Roses are red,

Violets are blue,

Sugar is sweet,

And so are you!

`;

This will create a string that contains three lines of text.

String interpolation

Template literals support string interpolation, which allows you to embed variables and expressions inside strings. For example:


const age = 25;

const welcomeMessage = `Welcome to our website, ${age}-year-old ${name}!`;

When this template literal is evaluated, the <span class="math-inline">\{age\}\ and `{name}placeholders will be replaced with the values of theageandname` variables, respectively.

Tagged templates

Tagged templates are a special type of template literal that allows you to pass the template literal to a function. The function can then perform any operations you want on the different parts of the template literal.

For example, the following code uses a tagged template to create a string that is all uppercase:


function toUpperCase(strings, ...expressions) {

  const result = [];

  for (let i = 0; i < strings.length; i++) {

    result.push(strings[i].toUpperCase());

    if (i < expressions.length) {

      result.push(expressions[i]);

    }

  }

  return result.join('');

}

const name = ‘Alice’;
const greeting = toUpperCase`Hello, ${name}!`;

When this code is executed, the toUpperCase function will be called with the template literal as its first argument. The function will then return a new string that contains all of the parts of the template literal, but with all of the letters converted to uppercase.

Conclusion

JavaScript template literals are a powerful and flexible feature that can be used to create strings in a more efficient and readable way. They are especially useful for creating multi-line strings and embedding variables and expressions inside strings.

Here are some additional examples of how to use template literals:

To create a string that contains a newline character, simply include the newline character inside the template literal. For example:

const message = `This is the first line of the message.

This is the second line of the message.`;

To escape a backtick (`) character inside a template literal, use a backslash () before the backtick. For example:

const message = `This is a template literal with a backtick character (\`).`;

To use a template literal as a template for a regular expression, use the RegExp constructor. For example:

const regex = new RegExp(/^\d{3}-\d{2}-\d{4}$/); // Matches a US phone number

To use a template literal as a template for an HTML element, use the innerHTML property. For example:

const element = document.createElement('div');

element.innerHTML = This is a heading
;