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:

RES
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:

RES
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:

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

let s = (strings, parameters) => {
  let text = Array.reduceWithIndex(parameters, Array.getUnsafe(strings, 0), (
    acc,
    param,
    i,
  ) => {
    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
  })
  React.string(text)
}

Write tagged template literals

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

module Greetings = {
  @react.component
  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.