Template Literals and Tags

Introduction: Beyond String Concatenation

In our previous lessons, we spent a lot of time learning how to manage, protect, and move data. We used destructuring to unpack objects and optional chaining to safely navigate missing information. However, eventually, you will need to display that data to a user as a readable message. In the past, JavaScript developers had to build strings by joining pieces together with the plus sign (+). This process, called concatenation, often becomes messy and hard to read, especially when you have to manage spaces or multi-line text manually. Modern JavaScript provides a much cleaner solution called template literals . These allow you to embed variables directly into strings and handle multiple lines of text with ease. Beyond simple formatting, JavaScript also offers a powerful feature called tagged templates . This allows you to run a string through a function before it is displayed, which is incredibly useful for tasks such as formatting currency or securing user input. In this lesson, we will explore how these tools make your code more readable and your data presentation more professional within the CodeSignal IDE .

Template Literal Basics

Template literals are a modern way to create strings using backticks (`) instead of single or double quotes. The most powerful feature of these strings is interpolation . This is a fancy way of saying that you can drop variables or expressions directly into your string using the ${} syntax. When JavaScript sees this syntax inside backticks, it evaluates the code inside the curly braces and converts the result into text. JavaScript "use strict"; const name = "Ada"; const balance = 1250.5; const summary = `Holder: ${name} Balance: $${balance.toFixed(2)}`; console.log(summary); Output: text Holder: Ada Balance: $1250.50 In the example above, we use ${name} to insert the string variable directly into the message. We also use ${balance.toFixed(2)} to run a small piece of code that formats the number to two decimal places before it becomes part of the string. This is much cleaner than using the plus operator because you can see exactly what the final sentence will look like as you write it.

Multi-line Strings Made Easy

One of the most frustrating parts of older JavaScript syntax was creating strings that spanned multiple lines. You used to have to add a special newline character (\n) at the end of every line or concatenate several strings together. With template literals, JavaScript respects the actual line breaks you type inside the backticks. Looking back at our previous code example, you can see that the summary variable was defined over two separate lines within the backticks. When we printed it to the console, the output maintained that exact same structure. This makes template literals perfect for building blocks of HTML or long text messages where the visual layout is important. You no longer need to worry about manual line breaks; you simply press Enter and keep typing.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Tagged Templates for Safety and Escaping

Tagged templates are also vital for security. When your application accepts input from users, there is a risk that they might enter malicious code, such as a script tag, which could break your site or steal data. This is often called a Cross-Site Scripting (XSS) attack. You can use a tagged template to "escape" this input, turning dangerous characters like < or > into safe text versions.

JavaScript

"use strict";

function safeHTML(strings, ...values) {
  const esc = (s) =>
    String(s).replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c]));
  return strings.reduce(
    (acc, str, i) => acc + str + (i < values.length ? esc(values[i]) : ""),
    ""
  );
}

const userInput = "<script>alert(1)</script>";
console.log(safeHTML`<div>Hello, ${userInput}!</div>`);

"use strict";

function safeHTML(strings, ...values) {
  const esc = (s) =>
    String(s).replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c]));
  return strings.reduce(
    (acc, str, i) => acc + str + (i < values.length ? esc(values[i]) : ""),
    ""
  );
}

const userInput = "<script>alert(1)</script>";
console.log(safeHTML`<div>Hello, ${userInput}!</div>`);

Output:

text

<div>Hello, &lt;script&gt;alert(1)&lt;/script&gt;!</div>

<div>Hello, &lt;script&gt;alert(1)&lt;/script&gt;!</div>

The safeHTML function uses an internal helper called esc to find and replace dangerous characters. Just like our money formatter, it uses reduce to combine the safe, static HTML pieces with the transformed user input. This ensures that even if a user tries to inject a script, it will be rendered as harmless text rather than being executed by the browser. This pattern is often used by professional libraries to create Domain Specific Languages (DSLs) that make complex tasks safer and easier to write.

Note: This safeHTML helper is a simplified demonstration of how tagged templates work. It is only appropriate for interpolating untrusted text into standard HTML content. In production applications, security is much more complex, requiring context-aware sanitization for attributes, URLs, and CSS. For real-world projects, you should use established framework-level escaping or dedicated sanitization libraries.

Introduction: Beyond String Concatenation

Template Literal Basics

Multi-line Strings Made Easy

Join the 1M+ learners on CodeSignal

Introduction to Tagged Templates

Building a Custom Formatter

Tagged Templates for Safety and Escaping

Summary and Next Steps