Tagged template
A tagged template is a JavaScript template literal invocation that passes its literal segments and interpolated values to a tag function for processing.
Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond
A JavaScript function that is invoked with a template literal's parts to customize how the literal is processed.
- How it is used
- Customizes template-literal processing, particularly for interpolated values such as user input or text marked for translation.
- How deep it goes
- Works through tag arguments and reconstruction helpers, then builds an HTML-escaping tag; does not develop a complete HTML sanitizer.
- Examples
- Traces logged string parts and values, contrasts whole-string with interpolation-only HTML escaping, and offers an object-to-attributes exercise.
- What you can do after
- Build it from scratch: collect and interlace tag arguments, then selectively transform interpolated values.
Web Components in Action
A template literal expression passed to a function tag that can interpret its literal parts and interpolated values.
- How it is used
- Organizes Web Component HTML and CSS while replacing custom JavaScript menu-generation logic.
- How deep it goes
- Explains the concise function-template syntax and interpolation, but stops short of detailed tag-call internals.
- Examples
- Demonstrates repeated select options, nested html templates, and interpolated change-event handlers.
- What you can do after
- Apply it via lit-html to render repeated HTML and update only changed pieces.
Read how Web Components in Action explains tagged template →
Related concepts
- lit-htmlused by · lit-html is a JavaScript library that uses tagged template literals to efficiently render and update HTML content in the DOM.
- styled-componentsused by · styled-components is a JavaScript library for defining component-scoped CSS through framework-integrated components and generated styles.
- argumentsuses · The JavaScript arguments object is an array-like object available inside non-arrow functions that exposes the values passed to the current function invocation.
- template literalused by · A JavaScript string literal delimited by backticks that supports multiline text and embedded expressions.
- domain-specific languageuses · A domain-specific language is a specialized language, notation, or terminology tailored to express concepts and tasks within a particular subject domain.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.