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

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

4

4 回答 4

4

你这里有两个错误：

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

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

<h1><%= user ? `Hello ${user.name}` : 'Hello Guest' %></h1>
于 2020-08-06T12:29:37.610 回答
2

几乎一针见血。将三元的左侧“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 是否已经是一个假值。如果条件评估为真，我们还会在三元的左侧结果中输出修剪后的值。

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

<h1>Hello <%- user?.name?.trim()?.length ? user.name.trim() : 'Guest' %></h1>
于 2020-08-06T12:34:59.853 回答
1 
<%= user ?  ('<h1>Hello ' + user.name + '</h1>') : '<h1>Hello Guest</h1>'  %>
于 2020-08-06T12:27:15.940 回答
0

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

<h1>Hello <%- user && user.name ? user.name : 'Guest' %></h1>
于 2020-08-06T12:45:57.897 回答