從string轉成json

隨着Web應用的不斷發展和演進，前後端交互數據格式越來越複雜，而JSON（JavaScript Object Notation）這種輕量級的數據交換格式因為格式簡潔、易於閱讀和編寫，逐漸成為前後端交互的主流格式。在前端開發中，我們通常需要將字符串轉換成JSON格式的數據對象，接下來我們將從多個方面對string轉成JSON做詳細的闡述。

一、JSON.parse()方法

我們可以使用JSON.parse()方法將一個符合JSON格式的字符串轉換成JSON對象。該方法可以接收兩個參數：需要轉換的字符串和一個可選的reviver函數。reviver函數可以用來在轉換過程中對生成的JSON對象進行修改。該方法會拋出異常，如果傳入的不是一個有效的JSON字符串。

const jsonStr = '{"name": "小明", "age": 18}';
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // '小明'
console.log(jsonObj.age); // 18

上述代碼將jsonStr字符串轉換為jsonObj對象，我們可以通過訪問jsonObj對象中的屬性來取得相應的值。

二、使用eval函數

eval函數可以執行js代碼，我們可以利用這個特性將JSON字符串轉換成對應的JSON對象。但是需要注意的是，因為eval函數存在安全隱患，所以不推薦使用，並且在嚴格模式下無法使用。

const jsonStr = '{"name": "小明", "age": 18}';
const jsonObj = eval("(" + jsonStr + ")");
console.log(jsonObj.name); // '小明'
console.log(jsonObj.age); // 18

上述代碼將jsonStr字符串轉換為jsonObj對象。我們需要將JSON字符串傳入一個括號中，這麼做是因為JSON字符串只不過是一個JavaScript對象字面量的表現形式，並不是一個完整的JS語句。如果不加括號將無法正確解析。

三、使用Function構造函數

Function構造函數可以接收多個字符串參數，這些字符串將組成一個新的函數體，然後將這個函數體作為一個函數返回。我們可以利用這個特性將JSON字符串轉換成對應的JSON對象。但是同樣需要注意安全隱患，不推薦使用。

const jsonStr = '{"name": "小明", "age": 18}';
const funcStr = 'return ' + jsonStr;
const jsonObj = new Function(funcStr)();
console.log(jsonObj.name); // '小明'
console.log(jsonObj.age); // 18

上述代碼將jsonStr字符串轉換為jsonObj對象。首先我們構造了一個函數體字符串，然後用 Function 構造函數創建了一個函數，並返回執行這個函數的結果，最終得到了對應的JSON對象。

四、使用第三方庫

為了方便開發，我們可以使用一些現成的第三方庫來轉換字符串到JSON對象。下面是一些常用的庫。

4.1 jQuery.parseJSON()

jQuery庫提供了 $.parseJSON()方法可以用來轉換符合JSON格式的字符串。該方法可以避免一些不安全的情況，因為會先檢查JSON字符串是否合法。該方法相當於JSON.parse()方法。

const jsonStr = '{"name": "小明", "age": 18}';
const jsonObj = $.parseJSON(jsonStr);
console.log(jsonObj.name); // '小明'
console.log(jsonObj.age); // 18

4.2 Lodash庫的_.parseJSON()

Lodash庫提供了 _().parseJSON()方法可以用來轉換符合JSON格式的字符串。該方法會拋出異常，如果傳入的不是一個有效的JSON字符串。該方法相當於JSON.parse()方法。

const jsonStr = '{"name": "小明", "age": 18}';
const jsonObj = _().parseJSON(jsonStr).value();
console.log(jsonObj.name); // '小明'
console.log(jsonObj.age); // 18

4.3 ES6中的JSON.parse()

現代瀏覽器普遍支持ES6的JSON對象，其中包含JSON.parse()方法。該方法和jQuery.parseJSON()方法一樣，能夠檢查傳入的JSON字符串是否合法，提供了更精細的錯誤處理。

const jsonStr = '{"name": "小明", "age": 18}';
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // '小明'
console.log(jsonObj.age); // 18

五、注意事項

在使用JSON.parse()方法時，需要注意以下幾點：

5.1. JSON字符串的格式必須合法

否則，將無法正確轉換成對應的JSON對象。

5.2. JSON字符串中不能包含回車符或換行符

因為這些字符無法被解析。

5.3. 注意JSON字符串中的引號

JSON字符串中的字符串必須使用雙引號，而不能使用單引號。

總結

本文介紹了多種將字符串轉換成JSON對象的方式，包括使用JSON.parse()方法、eval函數、Function構造函數以及第三方庫，還介紹了注意事項。在實際開發中，我們需要根據具體情況選擇合適的方式。同時，我們還需要注意傳入的JSON字符串是否合法，以及JSON字符串中的引號必須使用雙引號。