index.html中意外的百分号错误：如何轻松解决？

2024-03-18 23:09:31

# index.html:1 中的意外百分号符号错误：轻松解决方法

问题

在 index.html 文件中使用 function templateComment(item, postInfo, conditionComment) 时，会出现以下错误：Uncaught SyntaxError: Unexpected token '%'. 这个错误表示在解析代码时遇到了一个意外的百分号 (%) 符号。

错误原因

百分号 (%) 符号在 JavaScript 中通常用于取模运算或字符串格式化。然而，在这段代码中，它被用作 onclick 事件处理程序的开始，这是不正确的语法。

解决方法

要解决此错误，需要用正确的语法替换百分号 (%) 符号。在 onclick 事件处理程序中，可以使用 javascript: 前缀，如下所示：

<div class="comment pb-1" onclick="javascript: ${!conditionComment ? `showUserInfo(${encodeURIComponent(JSON.stringify(postInfo))})` : 'showUserInfo(null)'}>

通过添加 javascript: 前缀，可以明确指示浏览器将该代码解析为 JavaScript，从而避免出现语法错误。

代码示例

以下是修改后的代码示例，其中包含正确的 onclick 事件处理程序：

<div class="comment pb-1" onclick="javascript: ${!conditionComment ? `showUserInfo(${encodeURIComponent(JSON.stringify(postInfo))})` : 'showUserInfo(null)'}>
  <div class="pt-1 flex align-items-center justify-content-center gap-3 pb-1">
    ${typeof item.author.profile_image === "string" ?
      `<img src="${item.author.profile_image}" alt="Avatar1" class="img-fluid my-1" style="width: 30px; height: 30px; border-radius: 50% !important;" />`
      :
      `<img src="images/icons8-user-48.png" alt="Avatar2" class="img-fluid my-1" style="width: 30px; height: 30px; border-radius: 50% !important;" />`
    }                     
    <span><strong>@${item.author.username}</strong></span>
  </div>
  <h5>${item.body}</h5>
</div>