JavaScript Academy · Lesson

Tagged Template Functions

Process template parts with tag functions.

Tagged Template Functions is a free JavaScript Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Tag Function

A tagged template is a function call where the function name is placed directly before a template literal. The function receives the parsed pieces of the template and can transform them.

function tag(strings, value) {
  return strings[0] + value.toUpperCase() + strings[1]
}
console.log(tag(["Hi ", "!"], "bob"))

The Strings Array

The first argument a tag function receives is an array of the literal string parts. These are the chunks of text that sit between and around the placeholders.

function tag(strings) {
  return strings.join("|")
}
console.log(tag(["a", "b", "c"]))

The Values

After the strings array, the tag function receives each interpolated value as a separate argument. Using rest parameters collects them into an array.

function tag(strings, ...values) {
  return values.join(",")
}
console.log(tag(["", " and ", ""], "x", "y"))

Reassembling the String

A typical tag walks the strings array and inserts each value between the parts, rebuilding the final string with whatever transformation you want.

function tag(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? values[i] : "")
  })
  return out
}
console.log(tag(["A", "B", "C"], 1, 2))

Strings Length Rule

The strings array always has exactly one more element than the values array. There is text before the first placeholder and after the last one, even if some pieces are empty.

function tag(strings, ...values) {
  return "strings=" + strings.length + " values=" + values.length
}
console.log(tag(["", "", ""], 1, 2))

Transforming Values

Because the tag controls how values are inserted, you can format them. Here every numeric value is doubled before insertion.

function dbl(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? values[i] * 2 : "")
  })
  return out
}
console.log(dbl(["", " ", ""], 3, 4))

Returning Non-Strings

A tag function does not have to return a string. It can return any value, such as an object or array built from the template parts.

function parts(strings, ...values) {
  return { strings: strings, values: values }
}
const r = parts(["a", "b"], 9)
console.log(r.values[0])

The Raw Property

The strings array also carries a raw property, which holds the strings without processing escape sequences. This is how String.raw works.

console.log(String.raw({ raw: ["a\\n", "b"] }, "X"))

Upper-Casing Interpolations

A common demo tag upper-cases every interpolated value while leaving the static text untouched.

function loud(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? String(values[i]).toUpperCase() : "")
  })
  return out
}
console.log(loud(["name is ", "."], "alice"))

Why Use Tags

Tag functions enable powerful patterns: escaping untrusted input, internationalization, SQL or query building, and custom formatting, all driven by the template structure.

function highlight(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "[" + values[i] + "]" : "")
  })
  return out
}
console.log(highlight(["score: ", " pts"], 42))

Ignoring Values

A tag can choose to ignore the interpolated values entirely and produce output based only on the static parts, useful for analysis or logging.

function onlyStatic(strings) {
  return strings.filter(function (s) { return s.length > 0 }).join(" ")
}
console.log(onlyStatic(["Hello ", " world ", ""]))

Quick Check

Test your tag function knowledge.

Recap

Recap: Tagged templates call a function with parsed template parts.

First argument is the strings array
Remaining arguments are the interpolated values
Strings has one more element than values
The raw property holds unprocessed text

function tag(s, ...v) { return s[0] + v[0] }
console.log(tag(["go "], "fast"))

Frequently asked questions

Is the “Tagged Template Functions” lesson free?

Yes — the full text of “Tagged Template Functions” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Tagged Template Functions”?

Process template parts with tag functions. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Tagged Template Functions” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy