JavaScript字串拼接EL表達式報錯？正確寫法與常見坑一次搞懂

在JSP頁面撰寫JavaScript時，若需將後端EL表達式（${...}）拼接進JS字串變數，許多開發者會踩到語法錯誤：IE提示「缺少物件」、Chrome報「function未定義」。本文針對這類情境，說明正確的拼接規則與原理。

錯誤示範與錯誤原因

// 錯誤寫法：EL表達式直接裸露在JS字串拼接中
var src = "";
src = ${ctx} + "/houseInfoTj_getLfxxDetail.do?xqid=" + ${xqid} + "&xqcj=" + ${xqcj} + "&lfmc=" + lfmc;

問題核心： JSP編譯階段，EL表達式${xqid}會被直接替換為其值（如123），但不帶引號。上述代碼編譯後變成：

src = /contextPath + "/houseInfoTj_getLfxxDetail.do?xqid=" + 123 + "&xqcj=" + 456 + "&lfmc=" + lfmc;

這導致JS語法錯誤：/contextPath被視為除法運算子，123成為數字字面值，整個陳述式語法崩壞，進而導致後續函數定義失效（Chrome報show1 is not defined）。

正確寫法：用雙引號包裹EL表達式

// 正確寫法：將EL表達式放在雙引號內，使其輸出為JS字串字面值
var src = "${ctx}/houseInfoTj_getLfxxDetail.do?xqid=${xqid}&xqcj=${xqcj}&lfmc=" + lfmc;

編譯後輸出：

var src = "/contextPath/houseInfoTj_getLfxxDetail.do?xqid=123&xqcj=456&lfmc=" + lfmc;

此時${ctx}、${xqid}、${xqcj}皆被視為字串常數，語法完整，變數拼接正常運作。

關鍵規則總結

1. EL表達式輸出不帶引號：${val} → value；"${val}" → "value"。
2. JS字串上下文中，所有動態值必須是字串字面值：數字、布林值直接拼接雖合法，但路徑、參數值建議統一用引號包裹，避免特殊字元（如/、&）導致語法錯誤。
3. URL查詢參數連接符為&而非"&"：正確?id=1&p=2，錯誤?id=1"&p="2。
4. 建議使用模板字面值（ES6）：var src = `${ctx}/path?xqid=${xqid}&lfmc=${lfmc}`;（需確認瀏覽器支援度）。

除錯小技巧

在瀏覽器開發者工具的「Sources」或「Elements」頁籤查看實際輸出的JS原始碼，對比預期與實際差異，能快速定位EL表達式輸出位置錯誤。