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:
RESlet 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:
RESArray.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:
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.