如何在EJS中使用三元运算符

Question

<%- user ?  '<h1>Hello  user.name  </h1>' : '<h1>Hello Guest</h1>'  %>user.name 是一个变量，但是当我加载页面时，它将显示 user.name 而不是 user.name 包含的值。

Answer 1

你在这里有两个错误：

1. 您使用<%=, 它不会转义 html，这可能会导致 xss。

2. 您实际上并没有user.name在字符串中嵌入变量，它只是文本。

由于不必要的未转义 HTML 会导致 XSS，最好的方法是将h1字符串移出并使用模板字符串嵌入名称：

<h1><%= user ? `Hello ${user.name}` : 'Hello Guest' %></h1>

Answer 2

几乎一针见血。将三元的左侧“if”结果替换为使用串联user.name应该可以解决问题，因此它将其读取为动态值而不是纯文本。

您可能还需要检查以确保名称属性存在于用户中并且它具有非空、非空白值。

试试这个：

<%- user?.name && user.name.trim().length ? '<h1>Hello ' + user.name.trim() + '</h1>' : '<h1>Hello Guest</h1>' %>

如果你更喜欢它而不是连接，你也可以使用模板文字：

<%- user?.name && user.name.trim().length ? `<h1>Hello ${user.name.trim()}</h1>` : '<h1>Hello Guest</h1>' %>

一些注意事项：

• ?.称为可选链接，允许您检查对象变量中是否存在属性，同时防止在对象不存在时触发任何错误。

• 我在.trim()这里使用来确保该值不仅不为空，而且还通过从字符串中删除所有前导和尾随空格（如果存在）然后检查以确保字符串的长度来确保它包含非空白字符使用 仍然大于零.length。我们不需要检查是否.length > 0因为 0 已经是一个虚假值。如果条件评估为真，我们还会在三元的左侧结果中输出修剪后的值。

也许最重要的是，您可以将一些 HTML 移到 JS 语句之外，以使代码尽可能简洁：

<h1>Hello <%- user?.name?.trim()?.length ? user.name.trim() : 'Guest' %></h1>

Answer 3

<%= user ?  ('<h1>Hello ' + user.name + '</h1>') : '<h1>Hello Guest</h1>'  %>




Answer 4

您可以有一个空的用户对象或空用户变量，因此请在下面使用

<h1>Hello <%- user && user.name ? user.name : 'Guest' %></h1>