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

Question

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

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

Answer 1

你在这里有两个错误：您使用<%=, 它不会转义 html，这可能会导致 xss。您实际上并没有user.name在字符串中嵌入变量，它只是文本。由于不必要的未转义 HTML 会导致 XSS，最好的方法是将h1字符串移出并使用模板字符串嵌入名称：<h1><%=&nbsp;user&nbsp;?&nbsp;`Hello&nbsp;${user.name}`&nbsp;:&nbsp;'Hello&nbsp;Guest'&nbsp;%></h1>

Answer 2

几乎一针见血。将三元的左侧“if”结果替换为使用串联user.name应该可以解决问题，因此它将其读取为动态值而不是纯文本。您可能还需要检查以确保名称属性存在于用户中并且它具有非空、非空白值。试试这个：<%-&nbsp;user?.name&nbsp;&&&nbsp;user.name.trim().length&nbsp;?&nbsp;'<h1>Hello&nbsp;'&nbsp;+&nbsp;user.name.trim()&nbsp;+&nbsp;'</h1>'&nbsp;:&nbsp;'<h1>Hello&nbsp;Guest</h1>'&nbsp;%>如果你更喜欢它而不是连接，你也可以使用模板文字：<%-&nbsp;user?.name&nbsp;&&&nbsp;user.name.trim().length&nbsp;?&nbsp;`<h1>Hello&nbsp;${user.name.trim()}</h1>`&nbsp;:&nbsp;'<h1>Hello&nbsp;Guest</h1>'&nbsp;%>一些注意事项：?.称为可选链接，允许您检查对象变量中是否存在属性，同时防止在对象不存在时触发任何错误。我在.trim()这里使用来确保该值不仅不为空，而且还通过从字符串中删除所有前导和尾随空格（如果存在）然后检查以确保字符串的长度来确保它包含非空白字符使用 仍然大于零.length。我们不需要检查是否.length > 0因为 0 已经是一个虚假值。如果条件评估为真，我们还会在三元的左侧结果中输出修剪后的值。也许最重要的是，您可以将一些 HTML 移到 JS 语句之外，以使代码尽可能简洁：<h1>Hello&nbsp;<%-&nbsp;user?.name?.trim()?.length&nbsp;?&nbsp;user.name.trim()&nbsp;:&nbsp;'Guest'&nbsp;%></h1>

Answer 3

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

Answer 4

您可以有一个空的用户对象或空用户变量，因此请在下面使用<h1>Hello&nbsp;<%-&nbsp;user&nbsp;&&&nbsp;user.name&nbsp;?&nbsp;user.name&nbsp;:&nbsp;'Guest'&nbsp;%></h1>