Template literals & tagged templates

Strings with blanks you can fill

A template literal is a string written between backticks, like `Hello`, instead of between quotes. On most keyboards, the backtick key is at the top left, under Esc.

Backticks give a string three extra powers:

• Blanks. A blank like ${name} is filled with a value when the code runs.
• Real line breaks. The string can go over several lines.
• Tags. A function can look at the parts of the string before they are joined.

You met blanks in the Strings lesson. This lesson goes further. You will learn which text goes into each blank, where extra spaces come from, what a tag function gets, and why String.raw keeps backslashes.

The longer examples are in code blocks. When you copy one, copy the backticks too. A backtick looks a bit like a quote, but it is a different character.

Putting a value into a piece of text is called interpolation. Each blank is called a placeholder. A placeholder starts with a dollar sign and an opening curly brace, ${, and ends with a closing curly brace, }.

Inside a placeholder you write an expression: any piece of code that gives back a value. It can be a variable, some math, or a function call. JavaScript fills the placeholders one by one, from left to right.

1const user = "Asha";2console.log(`Welcome, ${user}!`);

Line 1 stores the text Asha in the variable user. Line 2 puts user between fixed words, so it prints Welcome, Asha!. The dollar sign and the curly braces only mark the blank. They do not show up in the result.

1const price = 3;2const quantity = 2;3console.log(`Tea costs ₹${price * quantity}`);

Line 3 works out price * quantity first. That gives the number 6. Then JavaScript turns 6 into text and prints Tea costs ₹6. So a placeholder can hold any expression, not only a variable.

1const name = "Ada";Run2const items = ["tea","cake"];3const paid = true;4const line = `${name} ordered ${items.length} ${items.length === 1 ? "item" : "items"}: ${items.join(", ")}`;5const status = `${line} — ${paid ? "paid" : "needs payment"}`;6console.log(status);

Line 4 in the experiment does more than copy variables. It does three jobs:

• It counts the items with items.length.
• It picks "item" or "items" with a ternary, a short if/else written as condition ? a : b.
• It joins the item names with join, a method that puts all the list items into one string with a separator between them.

Each piece of code sits right where its answer goes in the sentence. That makes the code easy to read. It is why templates are a good fit for receipts, labels, log messages, and error messages.

1const obj = { name: "Ada" };2const custom = { toString() { return "custom object"; } };3console.log(`${obj}`);4console.log(`${custom}`);5console.log(`${["a", "b", "c"]}`);

A placeholder always turns its value into a string. It uses the same "string" conversion you met in the Object to primitive conversion lesson:

• Line 3: a plain object becomes [object Object].
• Line 4: an object with its own toString method uses that method, so it prints custom object.
• Line 5: an array becomes its items with commas between them, a,b,c.

To get nicer text, call the method you want yourself, such as items.join(", ") or JSON.stringify(data). JSON.stringify turns an object into text that shows its properties.

A string in quotes must stay on one line. To get a line break inside it, you write \n, which means "new line". A template literal can hold a real line break. You just press Enter inside the backticks.

1const message = `Hi, Asha!2Have a good day.`;3console.log(message);

Line 1 starts the template and ends the first line after Hi, Asha!. Line 2 holds the second sentence and the closing backtick. The line break between them is part of the string, so line 3 prints two lines.

There is a catch. Every space between the backticks is part of the string too. That includes the spaces you add to line up your code.

1const messy = `Dear team,Run2  Ship date: Friday3    Bring snacks`;4const cleaned = messy5  .split("\n")6  .map((line) => line.trim())7  .join("\n");8console.log(messy);9console.log("---");10console.log(cleaned);

The fix in the experiment is simple. It splits the string into lines, removes the spaces at both ends of each line with trim, and joins the lines again. This also removes spaces you wanted to keep. In bigger projects, people use a small helper function, often called dedent, that removes only the spaces that every line has in front.

The table compares the two kinds of strings. Read across a row to see how each one answers the question.

A tagged template is a template literal with a function name written right before it, like highlight`Total: ${price}`. That function is called the tag.

With a tag, JavaScript does not build the finished string. Instead, it calls the tag function and gives it two things:

• the fixed text pieces, in a list called strings,
• the values from the placeholders, one after another.

Whatever the tag function returns is the result.

1function highlight(strings, ...values) {2  console.log(strings.length);3  console.log(values.length);4  console.log(strings.raw[0]);5  return strings.reduce((text, part, index) => text + part + (index < values.length ? "[" + values[index] + "]" : ""), "");6}7const price = 12;8const qty = 3;9console.log(highlight`Total: ${price} for ${qty} items`);

Here is what each highlighted line does:

• Line 1 makes the tag function. Its first parameter, strings, gets the fixed text pieces. Its second parameter, ...values, is a rest parameter: it collects all the other arguments into one array.
• Line 5 uses reduce, an array method that goes through a list one item at a time and builds one result. Here it adds each text piece, then the next value inside square brackets.
• Line 9 calls the tag by writing highlight right before the template.

1function countParts(strings, ...values) {2  console.log(strings.length);3  console.log(values.length);4}5countParts`Order ${3} for ${"tea"}`;

This tag prints 3 and then 2. Two placeholders cut the text into three pieces. The last piece is the text after the last blank. Here it is empty, "", but it still counts. It is easy to forget, so remember it when you write a loop over the pieces.

1function highlight(strings, ...values) {2  console.log(strings.length);3  console.log(values.length);4  console.log(strings.raw[0]);5  return strings.reduce((text, part, index) => text + part + (index < values.length ? "[" + values[index] + "]" : ""), "");6}7const price = 12;8const qty = 3;9console.log(highlight`Total: ${price} for ${qty} items`);Run

Here is the rule. If a template has n placeholders, the tag gets n + 1 text pieces:

• one piece before the first placeholder,
• one piece between each pair of placeholders,
• one piece after the last placeholder.

An empty piece still counts.

1function highlight(strings, ...values) {2  return strings.reduce((text, part, index) =>3    text + part + (index < values.length ? "[" + values[index] + "]" : ""), "");4}5function currency(strings, ...values) {6  return strings.reduce((text, part, index) => {7    const value = values[index];8    const money = typeof value === "number" ? "₹" + value.toFixed(2) : String(value ?? "");9    return text + part + (index < values.length ? money : "");10  }, "");11}12function safeHtml(strings, ...values) {13  return strings.reduce((text, part, index) =>14    text + part + (index < values.length ? escapeHtmlValue(values[index]) : ""), "");15}

The "Escape HTML values" tag in the lab makes risky text safe to show on a web page. It changes five characters in each value into safe codes: &, <, >, double quotes, and apostrophes. It changes only the values. The fixed pieces are code you wrote yourself, so you can trust them. Text typed by a user always arrives as a value. The later lesson XSS & safe DOM updates explains this kind of safety in full.

A backslash, \, starts an escape sequence: a short code for a character that is hard to type. For example:

• \n means a new line.
• \t means a tab, a wide space.

In a normal template, JavaScript swaps each escape sequence for the character it stands for. String.raw is a tag that comes with JavaScript. It skips that swap. It keeps each backslash and the letter after it, exactly as you typed them.

1const digits = String.raw`\d+`;2console.log(digits);

Line 1 stores \d+: a backslash, the letter d, and a plus sign. Line 2 prints \d+. This text is a pattern for a regular expression, a tool for searching text. In the pattern, \d means "any digit", so the backslash must stay.

1const normal = `C:\new\table`;Run2const raw = String.raw`C:\new\table`;3console.log(normal);4console.log(raw);5console.log(String.raw`\d+\sitems`);

Use String.raw when the text has many backslashes that you want to keep, for example:

• Windows file paths, like C:\new\table,
• regular expression patterns,
• lesson examples that should show an escape sequence as typed.

One warning: no template literal can end with a single backslash just before the closing backtick. JavaScript would read that backslash as an escape for the backtick, so the string would never end.

1const user = "Asha";2console.log(String.raw`Hello\n${user}`);

The \n stays as two characters: a backslash and the letter n. The ${user} placeholder still runs. So line 2 prints Hello\nAsha. Raw mode changes the fixed text, not what the placeholder does.

Template literals show up wherever a program writes a message for a person:

• labels on buttons and screens,
• log messages and error messages,
• receipts,
• file paths built from parts,
• sample text for tests.

Tags are less common. They help when a team wants one rule, like "always write money this way", for many strings.

1const user = "Asha";2const unread = 0;3console.log(`${user} has ${unread} unread messages`);

Line 3 prints Asha has 0 unread messages. The placeholder keeps the value you give it, even zero. Later code can pick "message" or "messages" if the page needs it.

1const user = "Ada";2const unread = 4;3const label = `${user} has ${unread} unread messages`;4console.log(label);5 6const lines = ["first", "second"];7const report = `Report:8${lines.join("\n")}`;9console.log(report);10 11const folder = "invoices";12const filename = "april.csv";13const separator = "\\";14const path = String.raw`C:\exports${separator}${folder}${separator}${filename}`;15console.log(path);16 17const unsafeName = "<Ada>";18const html = safeHtml`<strong>${unsafeName}</strong>`;19console.log(html);

This code prints four results:

• Line 3 builds the label Ada has 4 unread messages.
• Lines 7 and 8 build a report. It keeps its two line breaks.
• Line 14 builds a Windows path with String.raw. It stays on one line.
• Line 18 uses the safeHtml tag. The name <Ada> is made safe, so the result is <strong>&lt;Ada&gt;</strong>.

Each job is different, but each one keeps the changing value right next to the words around it.

• "Quotes fill blanks too." They don't. The string "Hello ${name}" prints the dollar sign, the braces, and the word name as plain text.
• "The braces are optional." A placeholder needs the dollar sign and both curly braces. $name is just text.
• "An object prints the way the console shows it." The console shows an object's properties. A placeholder only turns the object into a string, and a plain object becomes [object Object].
• "A tag gets one finished string." A tag gets the fixed text pieces and the values separately. That is what lets it change the values.
• "String.raw stops everything from running." It only keeps the backslashes in the fixed text. Placeholders still run as usual.

1const price = 3;2console.log(`Price: $${price}`);

Line 2 prints Price: $3. A dollar sign starts a placeholder only when a curly brace, {, comes right after it. The first dollar sign has no brace after it, so it prints as plain text.

1const name = "Ada";2console.log("Hello ${name}");3 4const item = { title: "Tea" };5console.log(`Item: ${item}`);6 7const drive = "C:";8console.log(`${drive}\new\table`);

Try to find each mistake before you read the list:

• Line 2 uses double quotes, so the blank is not filled.
• Line 5 puts an object in a blank, so it prints [object Object].
• Line 8 is a normal template, not String.raw, so \n becomes a new line and \t becomes a tab.

Key takeaways

• Backticks make template literals. Quotes make normal strings.
• Each placeholder runs a piece of code, turns the answer into text, and puts it in the blank.
• Line breaks and spaces between the backticks are part of the string.
• A tag is a function. It gets the text pieces and the values separately, before anything is joined.
• String.raw keeps the backslashes in the fixed text exactly as typed.

A template literal is a string with blanks. JavaScript fills each blank by running the code inside it.

Up next: Unicode & string internals.