<%- user ? '<h1>Hello user.name </h1>' : '<h1>Hello Guest</h1>' %>
user.name是一个变量,但是当我加载页面时,它将显示user.name而不是user.name包含的值。
这里你有两个错误:
<%=
,它不转义html,这可能导致XSS.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>