String Interpolation in JavaScript

In JavaScript, string interpolation is a way to embed expressions within string literals. This lets developers create dynamic strings that include variables and expressions by seamlessly incorporating them into a string. The most common way to perform string interpolation in JavaScript is by using template literals, which are enclosed by the backtick (`) characters instead of single or double quotes.

What are template literals in JavaScript?

Template literals provide an easy syntax to incorporate expressions within JavaScript strings. To include a variable or an expression, you use the ${expression} syntax within the template literal. This approach simplifies concatenating strings and expressions, making the code more readable and maintainable.

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

Complex expressions

Template literals are not limited to simple variables. You can include more complex expressions, such as arithmetic operations or function calls, within the placeholders.

const price = 9.99;
const taxRate = 0.07;
const total = `Total: $${(price * (1 + taxRate)).toFixed(2)}`;
console.log(total); // Output: Total: $10.69

Multiline strings

Another advantage of template literals is their support for multiline strings without the need for concatenation or escaping newline characters.

const multiLineString = `This is a string
that spans multiple
lines.`;
console.log(multiLineString);

Tagged template literals

Tagged template literals allow you to parse template literals with a function. The first argument of the tag function is an array of string values, and the subsequent arguments are the values of the expressions. This feature can be used for more advanced string manipulation tasks, such as localization, styled components in web development, or custom string processing logic.

function highlight(strings, ...values) {
  return strings.reduce((result, string, i) => `${result}${string}<strong>${values[i] || ''}</strong>`, '');
}

const name = "Jane";
const age = 28;
const message = highlight`My name is ${name} and I am ${age} years old.`;
console.log(message); // Output: My name is <strong>Jane</strong> and I am <strong>28</strong> years old.

JavaScript's string interpolation feature significantly enhances the way developers work with strings, offering a flexible and efficient method to create dynamic content.