How do template literals work?

Template literals are a feature in JavaScript (introduced in ES6) that allow for easier string creation and manipulation. Here’s how they work:

1. Backticks: Template literals are enclosed by backticks (`) instead of single (') or double (") quotes. This allows for multi-line strings and more readable formatting.

   const multiLineString = `This is a string
   that spans multiple lines.`;
   

2. String Interpolation: You can embed expressions inside template literals using the ${} syntax. This allows you to include variables or expressions directly within the string.

   const name = "Labby";
   const greeting = `Hello, ${name}!`; // Outputs: Hello, Labby!
   

3. Expressions: You can include any valid JavaScript expression inside the ${}. This can be variables, arithmetic operations, function calls, etc.

   const a = 5;
   const b = 10;
   const sumMessage = `The sum of ${a} and ${b} is ${a + b}.`; // Outputs: The sum of 5 and 10 is 15.
   

4. Tagged Templates: You can also create tagged templates, which allow you to parse template literals with a function. This can be useful for custom formatting or escaping.

   function tag(strings, ...values) {
       // Custom processing of strings and values
       return strings.reduce((result, str, i) => `${result}${str}${values[i] || ''}`, '');
   }
   
   const name = "Labby";
   const message = tag`Hello, ${name}!`; // Custom processing can be applied here.
   

Template literals enhance the readability and maintainability of your code, especially when dealing with complex strings.