Template Literals
Template literals use backticks (`) to allow embedded expressions and multi-line strings.
Featured Developer Sponsor • Zero-Token Protection
📋 Copy Tagged Template Sanitizer Pattern Snippet
/g, ">");
return acc + safe + str;
});
}
const userComment = "";
const safeOutput = sanitizeHtml\`
\${userComment}
\`;`)" style="padding: 0.35rem 0.75rem; font-size: 0.8rem; cursor: pointer; border-radius: 4px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--fg);">📋 Copy
// Tagged Template Literals (Sanitization & HTML)
function sanitizeHtml(strings, ...values) {
return strings.reduce((acc, str, i) => {
const val = values[i - 1];
const safe = String(val ?? "").replace(/</g, "<").replace(/>/g, ">");
return acc + safe + str;
});
}
const userComment = "<script>console.log('blocked')</script>";
const safeOutput = sanitizeHtml`<div>${userComment}</div>`;⚠️ 5 Fatal Traps & JavaScript Pitfalls
Trap #1: XSS Injection from Unescaped HTML Interpolation
Interpolating untrusted user input directly into HTML strings via template literals opens severe Cross-Site Scripting (XSS) holes. Use a tagged sanitizer function.
Trap #2: Unintended Whitespace in Multi-Line Templates
Indentation tabs and line breaks are captured literally. Pre-formatting code or SQL queries with template literals can include dozens of unwanted leading spaces.
Trap #3: Objects Coerced to [object Object]
Interpolating an object (
`User: ${user}`) calls user.toString(), outputting User: [object Object]. Use JSON.stringify(user).Trap #4: Tagged Template Parameter Count Mismatch
In tagged templates, the strings array always has exactly one more element than the values array:
strings.length === values.length + 1.Trap #5: String.raw vs Standard String Escapes
Standard template literals parse escape sequences (
\n becomes a newline). Use String.raw`C:\path\new` to keep escape characters intact.💬 Frequently Asked Questions
Sponsored Utility
While You're Here
Sponsored Recommendations
Advertisement