JS 動態拼接 onclick 參數：轉義引號與模板字符串最佳實踐

問題代碼

var link = "<a href='javascript:void(0)' onclick='failCardDetail('" + abc + "')' >" + data.lt + "</a>";
// 結果：onclick='failCardDetail('value')' → 引號未閉合，語法錯誤

根本原因

單引號包裹的 `onclick` 屬性值中，拼接的字符串 `abc` 若含引號或直接拼接會導致**屬性值提前閉合**，產生無效 HTML/JS。

三種修復方案（推薦順序）

1. 模板字符串 + 雙引號屬性值 (ES6，最清晰)

const link = `<a href="javascript:void(0)" onclick="failCardDetail('${escapeHtml(abc)}')">${data.lt}</a>`;
// 關鍵：onclick 用雙引號，JS 字符串參數用單引號，模板字符串自動處理插值

2. 手動轉義雙引號 (ES5 兼容)

var link = '<a href="javascript:void(0)" onclick="failCardDetail(\'' + escapeHtml(abc) + '\')">' + data.lt + '</a>';
// 層層轉義：HTML 屬性雙引號 → JS 字符串單引號 → 參數內容再包單引號

3. DOM API 構建 (最安全，無 XSS 風險)

var a = document.createElement('a');
a.href = 'javascript:void(0)';
a.textContent = data.lt;
a.onclick = function() { failCardDetail(abc); }; // 直接綁定函數，無字符串拼接
container.appendChild(a);

必須的安全函數：escapeHtml

function escapeHtml(str) {
    return String(str)
        .replace(/&/g, '&')
        .replace(//g, '>')
        .replace(/"/g, '"')
        .replace(/'/g, ''');
}

防止 `abc` 含有 `'` `"` `<` `>` 導致 HTML 注入或 JS 語法錯誤。

對比總結

總結

動態生成 HTML 事件屬性，**首選 DOM API 綁定函數**，徹底避開字符串拼接地獄。若必須拼接字符串，**模板字符串 + 嚴格 escapeHtml** 是底線。