Advanced Strings & Tagged Template Literals
Tagged template literals let you process template strings with a function - used for SQL queries, CSS-in-JS (styled-components), HTML sanitization, and internationalization. An advanced but powerful feature.
Advanced Strings
- String.raw - Access raw string without escape processing: String.raw`\n` = '\\n' (literal)
- padStart / padEnd - Pad strings: '5'.padStart(3, '0') = '005'
- repeat - '⭐'.repeat(5) = '⭐⭐⭐⭐⭐'
- matchAll - Get all regex matches with groups: str.matchAll(/pattern/g)
- replaceAll - Replace all occurrences: str.replaceAll('old', 'new')
- Tagged templates - function tag(strings, ...values) { }. Processes template literal
Advanced Strings Code
// padStart / padEnd
console.log("5".padStart(3, "0")); // "005"
console.log("42".padStart(5, " ")); // " 42"
console.log("Hi".padEnd(10, ".")); // "Hi........"
// Time formatting
const h = 9, m = 5, s = 3;
const time = `${String(h).padStart(2,"0")}:${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}`;
console.log(time); // "09:05:03"
// repeat
console.log("⭐".repeat(5)); // "⭐⭐⭐⭐⭐"
console.log("-".repeat(20)); // "--------------------"
// replaceAll (ES2021)
const text = "foo bar foo baz foo";
console.log(text.replaceAll("foo", "qux")); // "qux bar qux baz qux"
// Tagged template literal
function highlight(strings, ...values) {
return strings.reduce((result, str, i) => {
const value = values[i] !== undefined ? `【${values[i]}】` : "";
return result + str + value;
}, "");
}
const name = "Alice";
const age = 25;
console.log(highlight`Hello, ${name}! You are ${age} years old.`);
// "Hello, 【Alice】! You are 【25】 years old."
// HTML sanitizer tag
function safe(strings, ...values) {
const escape = s => String(s)
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
return strings.reduce((result, str, i) =>
result + str + (values[i] !== undefined ? escape(values[i]) : ""), "");
}
const userInput = '<script>alert("xss")</script>';
console.log(safe`User said: ${userInput}`);
// "User said: <script>alert("xss")</script>"Tip
Tip
Tagged template literals are the foundation of styled-components and GraphQL queries (gql`...`). Understanding them unlocks powerful DSL patterns used in production React and Node.js applications.
Use backticks for strings with variables.
Common Mistake
Warning
Using eval() or new Function() for template evaluation. These are security risks (code injection). Use tagged templates instead - they're safe, fast, and give you full control over string processing.
Practice Task
Note
Template mastery: (1) Create a tagged template that sanitizes HTML in interpolated values. (2) Build a simple SQL query builder using tagged templates. (3) Create a localization (i18n) tagged template function.
Quick Quiz
Key Takeaways
- Tagged template literals let you process template strings with a function - used for SQL queries, CSS-in-JS (styled-components), HTML sanitization, and internationalization.
- String.raw - Access raw string without escape processing: String.raw`\n` = '\\n' (literal)
- padStart / padEnd - Pad strings: '5'.padStart(3, '0') = '005'
- repeat - '⭐'.repeat(5) = '⭐⭐⭐⭐⭐'