提问者:小点点

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


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

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


共3个答案

匿名用户

这里你有两个错误:

  1. 您使用<%=,它不转义html,这可能导致XSS.
  2. 实际上并没有在字符串中嵌入变量user.name,它只是文本。

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

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

匿名用户

几乎一针见血。 将三元值左边的“if”结果替换为user.name使用串联应该可以做到这一点,因此它将其作为动态值而不是纯文本读取。

您可能还希望检查以确保用户中存在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已经是一个falsy值。 如果条件的计算结果为true,我们还输出三进制左边结果中的修整值。

  • 匿名用户

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

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