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

Question

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

user.name 是一个变量，但是当我加载页面时，它将显示 user.name 而不是 user.name 包含的值。

Answer 1

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

Answer 2

你这里有两个错误：

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

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

Answer 3

差不多spot-on。将三元的 left-hand “if”结果替换为对 user.name 使用串联应该可以解决问题，因此它将其读取为动态值而不是纯文本。

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

试试这个：

<%- 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() 来确保该值不仅不为空，而且还包含 non-whitespace 个字符，方法是从字符串（如果存在）然后使用 .length 检查以确保字符串的长度仍然大于零。我们不需要检查是否 .length > 0 因为 0 已经是一个虚假值。如果条件评估为真，我们还会在三元的 left-hand 结果中输出修剪后的值。

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

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

Answer 4

你可以有一个空的用户对象或空的用户变量，所以使用下面

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

How to use Ternary Operator in EJS