Docs / Language Manual / Tagged templates

Tagged templates

Since 11.1

Tagged templates provide a special form of string interpolation, enabling the creation of template literals where placeholders aren't restricted to strings. Moreover, the resulting output isn't confined solely to strings either. You can take a look at the JS documentation about tagged templates to learn more about them.

Define a tag function

Tag functions in ReScript have the following signature:

let myTagFunction : (array<string>, array<'param>) => 'output

As you can see, you can have any type you want both for the placeholder array and for the output.

Given how string interpolation works, you'll always have the following invariant:

Array.length(strings) == Array.length(placeholder) + 1

Let's say you want to interpolate strings with all kind of builtin types and make it work inside React components, you can define the following tag function:

ReScriptJS Output
type params =
  | I(int)
  | F(float)
  | S(string)
  | Bool(bool)

let s = (strings, parameters) => {
  let text = Array.reduceWithIndex(parameters, Array.getUnsafe(strings, 0), (
  ) => {
    let s = Array.getUnsafe(strings, i + 1)
    let p = switch param {
    | I(i) => Int.toString(i)
    | F(f) => Float.toString(f)
    | S(s) => s
    | Bool(true) => "true"
    | Bool(false) => "false"
    acc ++ p ++ s

Write tagged template literals

Now that you have defined your tag function, you can use it this way:

ReScriptJS Output
module Greetings = {
  let make = (~name, ~age) => {
    <div> {s`hello ${S(name)} you're ${I(age)} year old!`} </div>

Pretty neat, isn't it? As you can see, it looks like any regular template literal but it accepts placeholders that are not strings and it outputs something that is not a string either, a React.element in this case.