前端必讀：正確使用 eval() 解析服務端返回的 JSON 字符串

問題現象

服務端返回的 JSON 數據往往是字符串格式（帶引號），直接訪問屬性會得到 undefined：

var json = '{"id":1}';
alert(json.id); // undefined —— 因為 json 是字符串，不是對象

核心解決方案：eval()

eval() 能將符合 JS 語法的字符串作為代碼執行，從而將 JSON 字符串轉為對象：

var jsonStr = '{"id":1}';
var jsonObj = eval("(" + jsonStr + ")");
alert(jsonObj.id); // 1 —— 成功轉為對象

兩大關鍵注意點

1. 單個對象必須用括號包裹

eval(jsonStr) 會將 {} 視為代碼塊而非對象字面量，導致語法錯誤或返回 undefined。必須寫成 eval("(" + jsonStr + ")")。

2. 雙引號包裹的字符串拼接

eval("(" + jsonStr + ")") 正確；eval('(' + jsonStr + ')') 會因單引號干擾內層雙引號導致解析失敗。

數組情況特殊處理

若 JSON 字符串最外層是數組 [...]，可直接 eval(jsonStr)：

var jsonArr = '[{"id":1}]';
var arr = eval(jsonArr);
alert(arr[0].id); // 1

原因：[] 不會被誤認為代碼塊，無需括號包裹。

現代最佳實踐：JSON.parse()

強烈建議使用原生 JSON.parse() 替代 eval()：

var jsonObj = JSON.parse(jsonStr); // 安全、快速、標準
var arr = JSON.parse(jsonArr);

優勢對比

歷史遺留項目兼容策略

• IE6/7 無原生 JSON，可引入 json2.js Polyfill。
• 若必須用 eval()，請嚴格驗證數據來源可信，並使用 new Function("return " + jsonStr)() 稍微安全些（但仍不推薦）。

總結

理解 eval() 解析 JSON 的原理與坑，是前端進階的基礎功。但在現代開發中，請無條件使用 JSON.parse()。它更安全、更快、更標準，也是所有主流框架（jQuery, Axios, Fetch API）內部的實現方式。