JavaScript 字符串轉 JSON 對象：eval vs JSON.parse 安全解析指南

問題場景

後端返回 JSON 格式字符串 '{"total":2,"list":[{"id":1}]}'，前端 array.push(str) 導致數組元素為字符串而非對象，無法直接訪問屬性。

正確轉換流程

方案一：JSON.parse（推薦，安全標準）

const jsonStr = '{"total":2,"list":[{"id":1,"t":"1026px","top":"308px;"}]}';
let arr = [];

try {
    const obj = JSON.parse(jsonStr); // 解析為 JS 對象
    arr.push(obj);                   // 推入對象，而非字符串
    console.log(arr[0].total);       // 2
    console.log(arr[0].list[0].id);  // 1
} catch (e) {
    console.error('JSON 解析失敗:', e);
}

方案二：eval（不推薦，有安全風險）

// 僅在受信環境、舊瀏覽器兼容時使用
const obj = eval('(' + jsonStr + ')'); // 括號強制表達式上下文
arr.push(obj);

安全性對比

常見錯誤與修正

// 錯誤 1：單引號包裹雙引號 JSON
const bad = "{'a':1}"; // JSON 要求雙引號
// 修正：後端輸出標準 JSON，或前端 replace(/'/g, '"') 有風險

// 錯誤 2：尾隨逗號
const bad = '{"a":1,}'; // JSON 不允許
// 修正：後端修正序列化

// 錯誤 3：undefined/函數/Date 等非 JSON 類型
const bad = '{"fn": function(){}}';
// 修正：轉為字符串或時間戳

進階：流式解析大數據

超大 JSON (＞10MB) 考慮 oboe.js、JSONStream 流式解析，避免阻塞主線程。

最佳實踐清單

1. **永遠用 JSON.parse**
2. **捕獲異常** 防止崩潰
3. **後端設置 Content-Type: application/json**
4. **前端 fetch().then(r => r.json())** 自動解析
5. **TypeScript 定義接口類型** 提升開發體驗

拒絕 eval，擁抱 JSON.parse，構建安全穩健的前端應用。