Template literals — strings made easy
1 min read
Tired of gluing strings with +?
Joining text and variables with + gets messy fast:
let name = "Riya";
let age = 25;
console.log("Hi " + name + ", you are " + age + " years old");
Modern JavaScript has a cleaner way called a template literal. Instead of normal quotes, use backticks ( ) and drop variables in with${ }`.
console.log(`Hi ${name}, you are ${age} years old`);
Same result, far easier to read. No more + juggling, no missing spaces.
Why is this better?
You can put any value — even maths — inside ${ }:
console.log(`Next year you will be ${age + 1}`);
And they can span multiple lines naturally:
let msg = `Dear ${name},
Welcome aboard!
Team DevSchool`;
With normal quotes, multi-line text was painful. With backticks, it just works.
One thing to remember
The character is a backtick ( ), not a normal quote ( ' ). It usually sits just left of the1` key on your keyboard.
Template literals: backticks +
${ }= clean, readable strings. Once you switch, you never go back to+.