Need to translate a greeting or process user input inside HTML? A tagged template puts a function immediately before a template literal: `myTag` followed by a backtick-delimited template. Rather than joining everything into a string first, JavaScript calls the tag with an array of string parts, followed by each `${...}` value as a separate argument. The tag processes those pieces and returns a value—which need not be a string. section 7.3 section 7.1
function logParts() {
let stringParts = arguments[0];
let values = [].slice.call(arguments, 1); 1
console.log( 'Strings:', stringParts );
console.log( 'Values:', values );
}
logParts`1${2}3${4}${5}`; 2
!@%STYLE%@!
{"css":"{\"css\": \"font-weight: bold;\"}","target":"[[{\"line\":2,\"ch\":40},{\"line\":2,\"ch\":41}],[{\"line\":7,\"ch\":9},{\"line\":7,\"ch\":10}],[{\"line\":7,\"ch\":12},{\"line\":7,\"ch\":13}]]"}
!@%STYLE%@!
Try tracing `logParts` from left to right. For `1${2}3${4}${5}`, the string parts are `['1', '3', '', '']` and the values are `2`, `4`, and `5`. Adjacent interpolations and the ending interpolation leave empty string parts. section 7.3
To produce an ordinary interpolated string, interlace the parts and values in order. A helper can collect the arguments, while another can handle that repeated interlacing step; the tag can then focus on what should happen to each value. `String.raw` is a built-in tag that processes a template without interpreting special characters. section 7.3 section 8.1
Listing 8.6. Basic HTML-escaping DSL in action
Here, escaping the entire completed string also escapes the intended `<strong>` markup. The `htmlSafe` tag instead escapes the interpolated `userInput` before interlacing it with the unchanged string parts. The shown escaping function replaces `<` and `>`; this example does not establish broader HTML-safety guarantees. section 8.2
For practice, write a tag that turns an interpolated object into HTML attribute key/value pairs, as in `withProps` applied to an `<img>` template. Decide which pieces should stay literal and which values need processing before you join them. section 7.4
