JavaScript Tutorial
JavaScript Template Strings
Backticks let you embed ${values} and write multi-line text without +. That is a template literal.
Backticks, not quotes
A template literal is a string wrapped in backticks (`), not " or '. Inside it you can embed an expression with ${values}, and you can press Enter for a real new line. The result is still a string. typeof is still "string".
People also call them template strings. The language name is template literal. This chapter uses both.
Embed a value
Write ${name} inside the backticks. JavaScript evaluates name and splices the result into the text. No +, no extra quotes around the variable.
Example
const name = "Mina";
const city = "Lisbon";
console.log(`Hello, ${name}.`);
console.log(`${name} lives in ${city}.`);
console.log(typeof `Hello, ${name}.`);
Those lines print Hello, Mina. and Mina lives in Lisbon.. The same idea with quotes would be "Hello, " + name + ".". The template is shorter once two or more values appear.
Click Try it in JavaScript. StudyGrid opens /javascript/try — a page and a console.
Any expression, not only a name
The braces can hold an expression: arithmetic, a function call, a property. ${1 + 2} becomes3. ${name.toUpperCase()} becomes MINA when name is"Mina". Keep the expression short. If it needs three lines, compute it above the template and embed the result.
Example
const name = "Mina";
const n = 3;
const price = 4.5;
console.log(`You have ${n} items.`);
console.log(`Total: ${n * price}`);
console.log(`Hello, ${name.toUpperCase()}.`);
console.log(`Pay ${ (n * price).toFixed(2) }`);
n * price runs first, then the product is turned into text. toFixed(2) formats a number as a two-decimal string — useful for money in a label.
Multi-line text
A quoted string cannot span lines unless you put \n in it. A template literal can span lines as you type them. The new lines are part of the string, including any indentation you leave in the source.
Example
const name = "Mina";
const note = `Hello, ${name}.
Your order is ready.
Pick it up at desk 3.`;
console.log(note);
The blank line between the greeting and Your order is ready. is a real blank line innote. If the output looks over-indented, the extra spaces are the ones in your source. Align the template at column 0 inside the <script>, or trim after you build it.
Compared with +
Concatenation still works. Use + for two short pieces. Use a template when the sentence has holes in the middle, or when the text is several lines. Mixing concatenation and backticks on the same line is legal and hard to read. Pick one style.
Quotes cannot embed ${values}. A backtick inside a template that already uses backticks must be escaped with a backslash, or the parser thinks the template ended.
Build page text
Templates are the usual way to fill a heading or a paragraph from variables. Put the template on the right oftextContent so the page shows the filled-in sentence.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template</title>
</head>
<body>
<h1 id="title"></h1>
<p id="out"></p>
<script>
const name = "Mina";
const count = 3;
document.getElementById("title").textContent = `Hello, ${name}`;
document.getElementById("out").textContent =
`You have ${count} item${count === 1 ? "" : "s"} in the cart.`;
</script>
</body>
</html>The second template picks a plural: item vs items. A ternary inside${values} is a common, short pattern. If the wording gets longer, compute aconst label above and embed that.
When not to use a template
A single word with no holes can stay in quotes: const city = "Lisbon". Do not wrap every string in backticks out of habit. Quotes make it obvious that nothing will be interpolated.
User input does not belong raw inside HTML you assign with innerHTML. Templates do not escape HTML. This tutorial sets textContent, which treats the result as text, not markup.
The placeholder is ${values} inside backticks. A quoted string that happens to contain those characters is not a template: quotes do not interpolate. Only a backtick string such as`Hello, ${name}` fills in the value.
Next: numbers — one number type, plus NaN and Infinity.