Interpolation
Interpolation refers to embedding the output of JavaScript expressions alongside the raw text markup. EdgeJS 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 Edge 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 ✅ |
---|---|
|
|
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
{{
users.map((user) => {
return user.username
})
}}
The JavaScript output will be
String(users.map((user) => {
return user.username
}))
The stringified output will be
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(', ')
}}
Escaped HTML output
The output of a JavaScript expression is HTML escaped to prevent your applications from XSS attacks.
Given the following HTML string
{{
'<span style="color: red">This should be red.</span>'
}}
The output will be
<span style="color: red">This should be red.</span>
If you want to render HTML as it is, you can either wrap it inside triple curly braces or use the html.safe
global method.
{{{
'<span style="color: red">This should be red.</span>'
}}}
{{
html.safe(
'<span style="color: red">This should be red.</span>'
)
}}
Skipping curly braces from evaluation
If you are using Edge in combination with a frontend framework that also uses double curly braces, you can instruct Edge to skip certain statements by prefixing the braces with the @
symbol.
{{-- Input -- }}
Edge should not parse @{{ username }}
{{-- Output -- }}
Edge should not parse {{ username }}