JavaScript Strings
JavaScript Template Literals
Template literals use backticks and let you put values directly inside text.
They replace long chains of string joining with something far easier to read.
They also allow real line breaks inside the text.
Example
Example
javascript
const name = "Ada";
console.log(`Hello ${name}`);The output is Hello Ada.
What is a Template Literal?
It is written with backticks instead of quotes.
${'${...}'} inserts the value of any expression.
Line breaks inside the backticks are kept.
Syntax
Syntax
javascript
`text ${expression} more text`The backtick is usually left of the 1 key.
Compared with Joining
The same sentence, written both ways.
Example
Example
javascript
const name = "Ada";
const age = 36;
console.log("Hello " + name + ", you are " + age);
console.log(`Hello ${name}, you are ${age}`);The second is shorter and has no stray spaces to get wrong.
Any Expression Works
Not just variables - anything that produces a value.
Example
Example
javascript
const price = 100;
console.log(`Total: ${price * 1.2}`);
console.log(`Name: ${"ada".toUpperCase()}`);Keep the expressions short, or the line becomes hard to read.
Multiple Lines
Line breaks inside the backticks become part of the string.
Example
Example
javascript
const text = `first line
second line`;
console.log(text.split("\n").length);The output is 2: there really are two lines.
Conditions Inside
A ternary fits neatly into a placeholder.
Example
Example
javascript
const count = 1;
console.log(`You have ${count} ${count === 1 ? "item" : "items"}`);The output is You have 1 item.
Backticks Are Not Quotes
A placeholder inside ordinary quotes is just text.
This is a common mistake when switching between the two.
Example
Example
javascript
const name = "Ada";
console.log("Hello ${name}");
console.log(`Hello ${name}`);The first prints the placeholder literally.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Template Literals</title>
</head>
<body>
<h1>Template Literals</h1>
<p id="out"></p>
<script>
const name = "Ada";
const items = 3;
const price = 100;
document.getElementById("out").innerHTML =
`Hello ${name}<br>` +
`You have ${items} ${items === 1 ? "item" : "items"}<br>` +
`Total with tax: ${price * 1.2}`;
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try one item:
Change items to 1 and watch the wording change.
Important Points
- Template literals use backticks.
${'${...}'}inserts the value of an expression.- Line breaks inside are preserved.
- Any expression can go in a placeholder.
- Placeholders do nothing inside ordinary quotes.
Conclusion
Template literals are the modern way to build strings.
They remove almost all of the plus signs from your code.
Once you have used them, joining with plus feels clumsy.