Interpolation

Interpolation

Interpolation refers to embedding the output of JavaScript expressions alongside the raw text markup. Jig uses double curly braces {{ }} as delimiters.

Hello {{ username }}!

Given the username is Virk. The output will be

Hello Virk!

You can use any valid JavaScript expression inside the curly braces, and Jig will evaluate it for you.

{{ user.username }}
{{ user.username.toUpperCase() }}
{{ (2 + 2) * 3 }}
{{ (await getUser()).username }}

Multiline expressions

Expressions can also span across multiple lines. For example:

Hello {{
users.map((user) => {
return user.username
})
}}

When writing multiline expressions, ensure the double curly braces are in the same line.

Invalid ❌ Valid ✅
{
{
users.map((user) => {
return user.username
})
}}
{{
users.map((user) => {
return user.username
})
}
}
{{
users.map((user) => {
return user.username
})
}}

Stringified output

Since the output of a template is always a string, the output of a JavaScript expression is also converted to a string by wrapping the output inside the String function.

Given the following expression

Expression
{{
users.map((user) => {
return user.username
})
}}

The JavaScript output will be

JavaScript output code
String(users.map((user) => {
return user.username
}))

The stringified output will be

Output
virk,romain,julien,michael

If you do not want to rely on the default behavior, you can self-convert the array to a string using the JavaScript Array.join method.

Hello {{
users.map((user) => {
return user.username
}).join(', ')
}}

Filter syntax

Jig supports a filter syntax for transforming output. Use {{ mode :: expression }} where mode is a registered filter name.

{{ json :: { name: 'User', id: 1 } }}

Output:

{"name":"User","id":1}

The built-in json filter outputs JSON. You can register custom filters using jig.registerFilter:

jig.registerFilter('upper', (value) => String(value).toUpperCase())
{{ upper :: username }}

Skipping curly braces from evaluation

If you are using Jig to generate code that includes double curly braces (e.g., generating templates for other systems), you can instruct Jig to skip certain statements by prefixing the braces with the @ symbol.

{{-- Input -- }}
Jig should not parse @{{ username }}
{{-- Output -- }}
Jig should not parse {{ username }}

Jig is free and open source. If you find it useful, consider supporting its development.

Become a Sponsor