Basics
Template Literals
Backticks & ${} Interpolation
💡 Template literals ek fill-in-the-blank form jaisa hai — poora sentence likh do (backticks mein), aur ${} ke andar variables plug in kar do, jaise "Dear ___, aap ___ saal ke ho" mein blanks fill karna.
Template literals (backticks ` ` se) modern string-formatting hai — ${expression} ke andar variables/expressions directly embed kar sakte ho, string concatenation (+) ki zaroorat nahi. Multi-line strings bhi directly support karte hain, bina \n ke.
const name = "Aarav";
const age = 20;
// Purana tareeka (concatenation):
const oldWay = "Hello, " + name + "! You are " + age + " years old.";
// Template literal (modern, clean):
const newWay = `Hello, ${name}! You are ${age} years old.`;
// Expressions bhi likh sakte ho:
const message = `Next year you'll be ${age + 1}.`;
// Multi-line, directly:
const multiLine = `Line 1
Line 2
Line 3`;🔤
Template literals ek fill-in-the-blank form jaisa hai — poora sentence likh do (backticks mein), aur ${} ke andar variables plug in kar do, jaise "Dear ___, aap ___ saal ke ho" mein blanks fill karna.
1 / 2
⚡ झट से Recap
- Backticks (`) + ${expression} = modern string interpolation
- String concatenation (+) se bahut zyada readable
- Multi-line strings directly support, bina \n ke
इस page में (2 subtopics)
Tagged templates ek function ko template literal se PEHLE laga kar, uske parsing par custom control dete hain — advanced feature, rarely everyday code mein zaroori, lekin libraries (jaise styled-components) isse heavily use karte hain.
function highlight(strings, ...values) {
return strings.reduce((result, str, i) =>
result + str + (values[i] ? "**" + values[i] + "**" : ""), "");
}
const name = "Aarav";
const result = highlight`Hello, ${name}!`;
console.log(result); // "Hello, **Aarav**!"Tip: Tagged templates ka sabse famous real-world use styled-components (React CSS-in-JS library) hai — const Button = styled.button`...`; isi feature par based hai.
Template literals multi-line HTML snippets generate karne ke liye bahut common hain JavaScript mein — especially jab DOM manipulation ke through dynamic content insert karna ho.
const products = ["Apple", "Banana"];
const html = products.map(p => `<li>${p}</li>`).join("");
console.log(html); // "<li>Apple</li><li>Banana</li>"
// Multi-line HTML template:
const card = `
<div class="card">
<h3>${products[0]}</h3>
</div>
`;Tip: Template literals se HTML generate karna quick prototyping ke liye theek hai, lekin XSS (Cross-Site Scripting) risk se bachne ke liye user input ko directly HTML mein embed karte waqt sanitize karna zaroori hai.