Syntax
function tag(strings, ...values) { }
tag`text ${value} more text`Examples
A Basic Custom Tag Function
Intercepting a template literal to control the output.
function upperTag(strings, ...values) {
return strings.reduce((result, str, i) => {
return result + str + (values[i] !== undefined ? String(values[i]).toUpperCase() : "");
}, "");
}
const name = "alice";
console.log(upperTag`Hello, ${name}!`); // "Hello, ALICE!"String.raw - Ignoring Escape Sequences
Getting the literal, unprocessed string instead of the interpreted version.
console.log(`Line1\nLine2`); // actual newline between "Line1" and "Line2"
console.log(String.raw`Line1\nLine2`); // "Line1\nLine2" - the backslash-n is kept literal
// Useful for things like regex patterns or Windows file paths
console.log(String.raw`C:\Users\name`); // "C:\Users\name" - not interpreted as escapesBest practices
- Use tagged templates when building a small domain-specific transformation, like escaping HTML or CSS-in-JS libraries
- Use String.raw when a literal string with backslashes (like file paths or regex source) should not have its escape sequences processed
- Remember the tag function receives the literal string segments and interpolated values as two separate arguments - not a pre-combined string
- Prefer plain template literals for everyday string building - tagged templates are a specialized tool, not a default choice
At a glance
- Purpose
- Application logic and interaction
- File extension
- .js · .mjs
- Runs in
- Browsers and JavaScript runtimes
- Usually used with
- HTML, CSS and Web APIs
Specifications & further reading
Related JavaScript documentation
String Basics: length, charAt(), at()
Strings are immutable sequences of characters - every string method returns a new string rather than modifying the original. The length property gives the character count. charAt() returns the character at a given index, while the newer at() method also supports negative indices to count from the end.slice(), substring(), substr()
These three methods extract a portion of a string as a new string. slice() and substring() are similar, but slice() accepts negative indices (counting from the end) while substring() treats negative values as 0 and swaps arguments if start is greater than end. substr() (deprecated) uses a start index and a length rather than an end index.indexOf(), includes(), startsWith(), endsWith()
These methods search within a string for a substring. indexOf() returns the position of the first match (or -1). includes() returns a simple true/false. startsWith() and endsWith() check specifically whether the string begins or ends with a given substring. All are case-sensitive.replace() and replaceAll()
replace() returns a new string with the first match of a pattern replaced by a new value - or all matches, if the pattern is a regex with the global (g) flag. replaceAll(), introduced in ES2021, always replaces every occurrence without needing a regex, making simple find-and-replace-all operations more straightforward.
Strings are immutable sequences of characters - every string method returns a new string rather than modifying the original. The length property gives the character count. charAt() returns the character at a given index, while the newer at() method also supports negative indices to count from the end.slice(), substring(), substr()
These three methods extract a portion of a string as a new string. slice() and substring() are similar, but slice() accepts negative indices (counting from the end) while substring() treats negative values as 0 and swaps arguments if start is greater than end. substr() (deprecated) uses a start index and a length rather than an end index.indexOf(), includes(), startsWith(), endsWith()
These methods search within a string for a substring. indexOf() returns the position of the first match (or -1). includes() returns a simple true/false. startsWith() and endsWith() check specifically whether the string begins or ends with a given substring. All are case-sensitive.replace() and replaceAll()
replace() returns a new string with the first match of a pattern replaced by a new value - or all matches, if the pattern is a regex with the global (g) flag. replaceAll(), introduced in ES2021, always replaces every occurrence without needing a regex, making simple find-and-replace-all operations more straightforward.