All topics
8 / 100
Fundamentalsbeginner

Template Literals and Tagged Templates

Backtick strings that support multi-line text and expression interpolation, plus the tagged template function pattern.

Backtick strings interpolate expressions and span lines.

Template literals are like mail-merge in a word processor: you write a letter with placeholders (`${name}`), and the interpolation engine fills them in — a tagged template is what happens if you hand that merged letter to an editor first, who can reformat or redact parts before it's sent.

Key Concepts

1
    const name = 'Asha';
    const s = `Hello, ${name}.
    You have ${2 + 3} messages.`;
2
${} takes any expression, not just a variable — a function call, a ternary, arithmetic.
${}
3
Multi-line is literal. The newlines and the indentation inside the backticks are part of the string, which matters when building HTML or SQL and produces unexpected whitespace when the template is indented inside a function.
4
Tagged templates are the part worth understanding. A function placed before the backticks receives the pieces:
5
    function tag(strings, ...values) {
      // strings: the literal parts
      // values:  the interpolated expressions
    }
6
    tag`Hello ${name}, you are ${age}`;
    // strings = ['Hello ', ', you are ', '']
    // values  = ['Asha', 30]
Hello ${name}, you are ${age}
7
There is always one more string than value, including empty strings at the ends. The tag rebuilds the result however it likes.
8
Which is what makes escaping possible.
    function html(strings, ...values) {
      return strings.reduce((out, s, i) =>
        out + s + (i < values.length ? escapeHtml(values[i]) : ''), '');
    }
9
    html`<p>${userInput}</p>`   // userInput is escaped, the literal
                               // markup is not
<p>${userInput}</p>
10
The tag can tell the difference between text the developer wrote and values that came from outside — which plain interpolation cannot. That is the mechanism behind libraries that safely build HTML or SQL from templates.
11
String.raw is the built-in tag.
    String.raw`C:\new\folder`   // backslashes preserved
String.rawC:\new\folder
12
It returns the literal source, ignoring escape sequences — useful for regular expressions and Windows paths.
13
Where they are used in practice. Styled-components in React, gql for GraphQL queries, and SQL builders that parameterise rather than concatenate. Recognising the pattern is what makes those libraries make sense.
gql
14
What the interviewer is probing.1. "What does a tag function receive?" Probing: the signature. Stalls: "The string." *Moves up:* an array of literal chunks plus the interpolated values separately, which is what lets it escape or transform them.
15
2. "How do tagged templates help with safety?" Probing: the practical use. Stalls: "They do not." Moves up: the tag sees the values apart from the static text, so it can escape interpolations — the basis of safe HTML and SQL helpers.
16
3. "What is raw in String.raw for?" Probing: escape handling. Stalls: "Nothing useful." Moves up: it exposes the unprocessed text, so backslashes stay literal — useful for regex and Windows paths.
17
4. "Do template literals have a performance cost?" Probing: whether the claim is tested. Stalls: "They are slower." Moves up: no meaningful difference from concatenation; readability is the reason to prefer them.
Use cases:stringses6syntax