在前端開發中，常需透過 JavaScript 動態生成 HTML 字串並插入頁面。若動態生成的 HTML 中包含事件處理器（如 onclick），且需傳遞字串參數給對應函式，若處理不當會導致函式無法正確接收參數甚至完全不響應。
function insert() {
var a = "jioho";
// 錯誤寫法：字串拼接時未對參數加單引號
var str = "<table><tr><button type='button' onclick='test(" + a + ")'>點擊</button>";
document.getElementById("1").innerHTML = str;
}
function test(a) {
alert(a);
}
上述代碼中，onclick='test(" + a + ")' 產生的 HTML 為 onclick='test(jioho)'，瀏覽器會嘗試尋找名為 jioho 的變數，而非字串 "jioho"，導致錯誤。
在拼接字串時，需為字串參數額外加上單引號，確保生成的 HTML 中參數被視為字串字面量：
var str = "<table><tr><button type='button' onclick='test(\"" + a + "\")'>點擊</button>";
// 或使用模板字面量（ES6+）
var str = ``;
生成的 HTML 將變為 onclick='test("jioho")'，函式 test 即可正確接收字串參數。
最佳實踐建議
- 優先使用
addEventListener 綁定事件，避免內聯 onclick 拼接字串的風險。
- 若必須動態生成 HTML，善用模板字面量提升可讀性並減少轉義錯誤。
- 對用戶輸入內容進行適當轉義，防範 XSS 攻擊。
總結
動態嵌入 HTML 時傳遞字串參數的關鍵在於確保生成的 HTML 語法正確，參數被正確引用為字串。採用單引號包裹或模板字面量均可解決此問題，並建議採用現代事件綁定方式提升代碼健壯性。
- 上一篇文章： JSP 頁面中 JavaScript 外部檔案無法執行的排查
- 下一篇文章： 前端開發 CSDN 風格下拉選單的實作方式
Copyright © 程式碼之家 All Rights Reserved
