HUH函數
2022-12-22 14:57:21
<%- user ? '<h1>Hello user.name </h1>' : '<h1>Hello Guest</h1>' %>user.name 是一個變量,但是當我加載頁面時,它將顯示 user.name 而不是 user.name 包含的值。
4 回答

至尊寶的傳說
TA貢獻1789條經驗 獲得超10個贊
你在這里有兩個錯誤:
您使用
<%=
, 它不會轉義 html,這可能會導致 xss。您實際上并沒有
user.name
在字符串中嵌入變量,它只是文本。
由于不必要的未轉義 HTML 會導致 XSS,最好的方法是將h1
字符串移出并使用模板字符串嵌入名稱:
<h1><%= user ? `Hello ${user.name}` : 'Hello Guest' %></h1>

叮當貓咪
TA貢獻1776條經驗 獲得超12個贊
幾乎一針見血。將三元的左側“if”結果替換為使用串聯user.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>

哈士奇WWW
TA貢獻1799條經驗 獲得超6個贊
<%= user ? ('<h1>Hello ' + user.name + '</h1>') : '<h1>Hello Guest</h1>' %>

烙印99
TA貢獻1829條經驗 獲得超13個贊
您可以有一個空的用戶對象或空用戶變量,因此請在下面使用
<h1>Hello <%- user && user.name ? user.name : 'Guest' %></h1>
添加回答
舉報
0/150
提交
取消