Template literals are a feature introduced in ES6 (ES2015) that allow you to create strings with embedded expressions, multi-line text, and string interpolation easily using backticks (`) instead of quotes.
1️⃣ Basic Syntax
let name = "Teekam";
let message = `Hello, ${name}! Welcome to JavaScript.`;
console.log(message);
Output:
Hello, Teekam! Welcome to JavaScript.
💡 The ${} syntax lets you embed variables or expressions directly into the string.
2️⃣ Multi-line Strings
Unlike normal strings, template literals support line breaks naturally:
let paragraph = `
This is a multi-line string.
You can write text on
multiple lines easily.
`;
console.log(paragraph);
3️⃣ Expression Interpolation
You can also use JavaScript expressions inside ${}:
let a = 10, b = 20;
console.log(`The sum is ${a + b}.`);
Output:
The sum is 30.
4️⃣ Tagged Templates (Advanced Use)
Template literals can be used with tag functions to process the string before output:
function highlight(strings, value) {
return `${strings[0]}**${value.toUpperCase()}**${strings[1]}`;
}
let result = highlight`Hello, ${"teekam"}!`;
console.log(result);
Output:
Hello, **TEEKAM**!
💡 In Short:
Template literals are backtick strings that support multi-line text, variable interpolation, and embedded expressions, making string handling cleaner and more readable.
