What is the use of the template literal in JavaScript?

Template literals are a feature of JavaScript that allow for easier string interpolation and multiline strings. Template literals use backticks (“) instead of single or double quotes, and allow for embedded expressions using the ${} syntax.

Here are various usage of template literals:

1. Creating a Basic Template Literal:

The simplest way to create a template literal is to enclose a string in backticks, like so:

const name = "John";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Output: "Hello, John!"

In this example, the string "Hello, " is concatenated with the value of the variable name and the string "!" to create the final string "Hello, John!". The ${name} expression is evaluated and replaced with the value of the name variable.

2. Using Template Literals for Multiline Strings:

Template literals can also be used to create multiline strings, which can be helpful for formatting text or creating strings that span multiple lines.

To create a multiline string with a template literal, simply include line breaks within the string by pressing the Enter key.

For example:

const message = `This is a
multiline string`;
console.log(message); // Output: "This is a
//          multiline string"

In this example, the string "This is a" is followed by a line break, and then the string "multiline string". When the message variable is logged to the console, the output includes the line break between the two strings.

3. Using Template Literals for Function Calls:

Template literals can also be used to call functions and embed the result within a string. To do this, include the function call within the ${} syntax, like so:

function add(a, b) {
  return a + b;
}
const result = `The sum of 2 and 3 is ${add(2, 3)}.`;
console.log(result); // Output: "The sum of 2 and 3 is 5."

In this example, the ${add(2, 3)} expression is evaluated and replaced with the result of the add function, which is 5. The final string is "The sum of 2 and 3 is 5.".

4. Using Template Literals for Conditional Statements:

Template literals can also be used to include conditional statements within a string. To do this, use the ternary operator within the ${} syntax, like so:

const age = 20;
const message = `You are ${age >= 18 ? "an adult" : "a minor"}.`;
console.log(message); // Output: "You are an adult."

In this example, the ${age >= 18 ? "an adult" : "a minor"} expression is evaluated and replaced with the result of the ternary operator, which is "an adult" because the value of age is greater than or equal to 18. The final string is "You are an adult.".

5. Using Template Literals for Object Properties:

Template literals can also be used to reference object properties within a string. To do this, enclose the object property name within ${}, like so:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
};
const message = `My name is ${person.firstName} ${person.lastName} and I am ${person.age} years old.`;
console.log(message); // Output: "My name is John Doe and I am 30 years old."

In this example, the ${person.firstName}, ${person.lastName}, and ${person.age} expressions are evaluated and replaced with the corresponding property values of the person object. The final string is "My name is John Doe and I am 30 years old.".

6. Using Template Literals with Tag Functions:

Template literals can also be used with tag functions, which are functions that are called with the template literal as an argument. The tag function can then manipulate the template literal in various ways before returning the final string. To create a tagged template literal, prefix the template literal with the name of the tag function followed by a space, like so:

function highlight(strings, ...values) {
  let result = "";
  strings.forEach((string, i) => {
    result += string;
    if (i < values.length) {
      result += `<mark>${values[i]}</mark>`;
    }
  });
  return result;
}
const name = "John";
const message = highlight`Hello, ${name}!`;
console.log(message); // Output: "Hello, <mark>John</mark>!"

In this example, the highlight function is called with the template literal Hello, ${name}! as its argument. The strings parameter is an array containing the static parts of the string, and the values parameter is an array containing the interpolated values. The highlight function then concatenates the static parts with the interpolated values wrapped in <mark> tags. The final string is "Hello, <mark>John</mark>!".