Codectionary / Developer documentation / JavaScript

Tagged Template Literals & String.raw

A tagged template literal calls a function ("tag") with the template's string parts and interpolated values passed separately, letting you fully customize how the final string is built - useful for sanitization, internationalization, or styling libraries. String.raw is a built-in tag that returns the literal string with escape sequences left un-processed.

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 escapes

Best 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

Runtime & versions

Browsers and JavaScript runtimes. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

ECMAScript specification

Specifications & further reading