插值（Interpolation）

插值指的是将 JavaScript 表达式的输出与原始文本标记一起嵌入。EdgeJS 使用双花括号 {{ }} 作为分隔符。

Hello {{ username }}!

假设 username 为 Virk，输出将是

Hello Virk!

你可以在花括号中使用任意有效的 JavaScript 表达式，Edge 会为你求值。

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

多行表达式

表达式也可以跨越多行。例如：

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

书写多行表达式时，请确保双花括号在同一行内。

无效 ❌	有效 ✅
`{ { users.map((user) => { return user.username }) }}` `{{ users.map((user) => { return user.username }) } }`	`{{ users.map((user) => { return user.username }) }}`

由于模板的输出始终是 string，JavaScript 表达式的输出也会被转换为字符串——具体做法是用 String 函数包裹输出。

给定以下表达式

Expression

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

JavaScript 输出将是

JavaScript output code

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

字符串化后的输出将是

Output

virk,romain,julien,michael

如果你不想依赖默认行为，可以使用 JavaScript 的 Array.join 方法自行将数组转换为字符串。

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

JavaScript 表达式的输出会被进行 HTML 转义，以防止你的应用遭受 XSS 攻击。

给定以下 HTML 字符串

{{
  '<span style="color: red">This should be red.</span>'
}}

输出将是

&lt;span style="color: red"&gt;This should be red.&lt;/span&gt;

如果你想原样渲染 HTML，可以使用三重花括号，或者使用 html.safe 全局方法。

{{{

  '<span style="color: red">This should be red.</span>'
}}}

{{
  html.safe(
    '<span style="color: red">This should be red.</span>'
  )
}}

如果你将 Edge 与同样使用双花括号的前端框架结合使用，可以通过在花括号前加 @ 符号来指示 Edge 跳过某些语句。

{{-- 输入 -- }}
Edge should not parse @{{ username }}

{{-- 输出 -- }}
Edge should not parse {{ username }}