Template Literals

Template literals, also known as template strings, are a powerful feature introduced in ES6 (ECMAScript 2015) that improve how we work with strings in

Template literals, also known as template strings, are a powerful feature introduced in ES6 (ECMAScript 2015) that improve how we work with strings in JavaScript. They offer a more concise and readable alternative to traditional string concatenation, especially when dealing with complex or multi-line strings. This post will look at their functionality and demonstrate their advantages through various examples.

Beyond Concatenation: The Power of Template Literals

Before template literals, building strings often involved cumbersome concatenation using the + operator:

const name = "John";
const age = 30;
const message = "My name is " + name + " and I am " + age + " years old.";
console.log(message); // Output: My name is John and I am 30 years old.

This approach becomes increasingly unwieldy as the string complexity grows. Template literals provide a much cleaner solution using backticks (`):

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

Notice how the variables are embedded directly within the string using ${variableName}. This eliminates the need for repetitive concatenation, making the code more readable and maintainable.

Multi-line Strings with Ease

Another significant advantage is the ability to create multi-line strings without using cumbersome \n escape sequences:

const multiLineString = `This is a multi-line string.
It spans across multiple lines
without any special characters.`;
console.log(multiLineString);
// Output:
// This is a multi-line string.
// It spans across multiple lines
// without any special characters.

Expressions within Template Literals

Template literals aren’t limited to just variables. You can embed any valid JavaScript expression within the ${}:

const x = 5;
const y = 10;
const sum = `The sum of ${x} and ${y} is ${x + y}.`;
console.log(sum); // Output: The sum of 5 and 10 is 15.

This allows for dynamic string generation based on calculations or function calls:

function greet(name) {
  return `Hello, ${name.toUpperCase()}!`;
}

console.log(greet("world")); // Output: Hello, WORLD!

Tagged Templates: Advanced Usage

For even more control, template literals can be used with tagged template literals. A tagged template literal is a template literal that is preceded by a function call. This function receives the string parts and the expressions as arguments, allowing you to manipulate the string before it’s rendered.

function highlight(strings, ...values) {
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += `<span style="color:red;">${values[i]}</span>`;
    }
  }
  return result;
}

const highlightedString = highlight`This is a ${'highlighted'} string.`;
console.log(highlightedString);
//Output: This is a <span style="color:red;">highlighted</span> string.

This example demonstrates a simple highlighting function. Tagged templates are powerful and enable complex string manipulation and formatting.

Template literals offer a significant improvement over traditional string concatenation in JavaScript. Their concise syntax, support for multi-line strings, and ability to embed expressions make them a tool for any JavaScript developer. Understanding and utilizing tagged templates opens up even more possibilities for advanced string manipulation. Adopt them in your projects for cleaner, more maintainable code.

Built by the author of this blog — Jovis AI automates project management so your engineering team can focus on building. Try it free →