Template literals

A cleaner way to build strings

• Wrap a string in backticks ` and you can drop values straight in with ${...}.
• This is a template literal — much tidier than joining with lots of +.

let name = "Ada";
let age = 15;
console.log(`${name} is ${age}`);   // → Ada is 15

Any expression fits inside ${ }

• Whatever you write inside ${...} is worked out first, then dropped into the string.

let a = 3;
let b = 4;
console.log(`${a} + ${b} = ${a + b}`);   // → 3 + 4 = 7

Same string, two ways

• + and a template literal can build exactly the same text.
• In backticks, spaces and punctuation stay where you type them, so a missing space is easy to see.

let item = "pen";
let price = 3;
console.log("A " + item + " costs " + price + " yuan.");   // → A pen costs 3 yuan.
console.log(`A ${item} costs ${price} yuan.`);             // → A pen costs 3 yuan.

Watch out

• Backticks ` are not the same as quotes ' or ". ${...} only works inside backticks.
• Bonus: a backtick string can span several lines — handy for longer messages.

Common mistakes

• Template literals use backticks and ${...}: `Hi ${name}`, not quotes.
• Inside ${...} you can put any expression.

Now you try

• Use backticks and ${...}.
• Press Check answer to test it.