Detailed explanation
Template literals are a JavaScript syntax for writing strings using backticks (`) instead of single or double quotes. Introduced in ES2015, they support embedded expressions and multiline text, making strings that combine fixed text with dynamic values easier to read. For example, const name = 'Anu'; const msg = `Hello ${name},\nyou have ${2 + 3} messages`; produces a greeting followed by a second line saying that Anu has 5 messages. In source code, you can replace the \n escape with an actual line break inside the backticks.
Interpolation uses the ${expression} syntax. When an ordinary, untagged template literal is evaluated, JavaScript evaluates each embedded expression, converts its result to a string, and combines it with the surrounding text. Expressions can include variables, arithmetic, function calls, property access, or conditional expressions. They cannot directly contain statements such as an if statement or a variable declaration. The resulting value is an ordinary string, not a special template object. It is also a snapshot: changing name afterwards does not update msg; the template must be evaluated again to produce new text.
Template literals preserve literal line breaks and whitespace, including indentation. This is useful for readable messages and text blocks, but extra indentation can accidentally become part of the output. Escape sequences still work in ordinary template literals: \n represents a newline, \` includes a backtick, and \${ includes the interpolation marker as literal text. Backticks therefore improve convenience without removing the need to understand string escaping.
A tagged template places a function before the template, as in tag`Hello ${name}`. Instead of performing ordinary interpolation, JavaScript calls the tag with an array of literal text segments and the evaluated substitution values as separate arguments. The tag controls processing and may return any value, not necessarily a string. Tags can implement escaping or styling, but template literals are not automatically safe for HTML or SQL. Interviewers typically expect correct syntax, expression evaluation, whitespace behaviour, and this distinction between ordinary and tagged templates.
Key points to remember
- Template literals use backticks and were introduced in ES2015.
- ${expression} embeds evaluated expressions in an ordinary template string.
- Actual line breaks and indentation are preserved in the output.
- Ordinary template literals produce strings that do not automatically update.
- Tagged templates pass text segments and substitution values to a function for custom processing.
Common mistakes candidates make
- Using single or double quotes and expecting ${name} to interpolate.
- Forgetting that indentation and line breaks become part of the string.
- Assuming template literals automatically escape untrusted HTML or prevent SQL injection.
Likely follow-up questions
How are template literals different from string concatenation?
Both can produce ordinary strings, but template literals keep dynamic expressions next to the surrounding text without repeated + operators. They also support literal multiline text, which single- and double-quoted strings cannot directly contain.
Can you call a function inside ${}?
Yes: `Hello ${getName()}` calls getName when the template is evaluated and inserts its result into an ordinary template string. Keep expressions simple because complex logic inside strings reduces readability.
What arguments does a tagged-template function receive?
For tag`Hello ${name}!`, the first argument contains the text segments ['Hello ', '!'], and the next argument is the value of name. Substitution values retain their original types, and the text-segment array also exposes raw text through its raw property.
Interview tip: Start with backticks and interpolation, demonstrate the Anu example, then briefly distinguish tagged templates from ordinary strings.