How do template literals insert values into JavaScript strings?
Quick answer
Put a template literal in backticks and write ${expression} where you want a value inserted. JavaScript evaluates the expression, converts its result to a string, and places it in the surrounding text. For example, with const n = 3, ` Value: ${n * 2} becomes Value: 6. In single or double quotes, ${n * 2}` is ordinary text, not an expression. [S1]
The question, the details, the next step.
I see ${name} in JavaScript examples. What makes that insert a value instead of printing those characters?
The surrounding backticks make the text a template literal. Inside it, ${...} marks an expression for JavaScript to evaluate; its result is converted to a string and substituted at that spot. [S1]
For example, assuming name has the value Mina:
const name = "Mina";
const message = `Hello, ${name}!`;The exact value of message is Hello, Mina!.
The braces are part of the placeholder syntax, not characters added to the result. Text before and after the placeholder stays in place.
What if I write the same placeholder with ordinary double quotes? How can I tell what the exact output will be?
Ordinary single- or double-quoted strings do not evaluate ${...}. Those characters remain part of the string. [S1]
Assuming n is 3:
const n = 3;
const a = `Value: ${n * 2}`;
const b = "Value: ${n * 2}";The exact values are:
a:Value: 6b:Value: ${n * 2}
A reliable way to work it out is to check the outer delimiters first. Backticks allow placeholders; single and double quotes treat the same-looking characters as literal text. Then evaluate the expression inside each ${...} and join its string result to the surrounding text.
Can the expression do more than name a variable? And what happens if I put two placeholders in one string?
Yes. The placeholder can contain an expression, such as arithmetic or a function call, and a template literal can contain multiple placeholders. Each expression is evaluated where it appears. [S1]
For example, assuming price is 12 and quantity is 3:
const price = 12;
const quantity = 3;
const line = `Total: ${price * quantity}; quantity: ${quantity}`;The exact result is Total: 36; quantity: 3. The multiplication is evaluated as part of the expression; its result becomes the text 36. The second placeholder inserts 3. You can predict the final value from left to right: keep the literal text, replace each placeholder with its evaluated result, and retain punctuation and spaces outside the braces.
Is there anything that looks like interpolation but needs extra care? Could you give me a small check I can reuse?
The examples here cover ordinary, untagged template literals. Tagged templates are an advanced exception: a tag function receives the template parts and can return something other than a string, so do not assume every tagged-template result follows the simple substitution pattern. [S1] Template literals can also include line breaks in their source code. [S1]
For the usual untagged case, use this quick check:
- Are the outer delimiters backticks?
- Is the intended expression inside
${...}? - What value does that expression evaluate to?
- What exact text remains before and after it?
If the delimiters are quotes, expect ${...} to appear literally. If you are reading code rather than running it, write down each placeholder result before joining the pieces.
A practical checklist
Check whether the string starts and ends with backticks or ordinary quotes.
For a backtick string, identify each
${...}placeholder.Evaluate each placeholder expression using the values in the example.
Convert each result to text and join it with the unchanged surrounding characters.
Write the complete resulting string, including spaces and punctuation.
A few more useful answers
Do I include the braces in the inserted output?
No. In an ordinary untagged template literal, ${...} marks where the expression goes; the expression's string value is inserted, not the placeholder punctuation. [S1]
Can a template literal span more than one line?
Yes. Template literals can include line breaks in their source code. [S1] The examples above focus on inserting values into one-line strings.
Will every template literal produce a string?
The simple substitution explanation applies to ordinary, untagged template literals. A tagged template calls a tag function, which may return something other than a string. [S1]
Sources
References used for this guide.
- [S1] Template literals (Template strings) — JavaScript | MDN developer.mozilla.org · Checked