JSON對象和字符串之間的相互轉換 – JSON.parse() 和 JSON.stringify()

所有現代瀏覽器都支持 JSON 對象，有兩個非常有用的方法來處理 JSON 格式的內容：

• JSON.parse(string) ：接受一個 JSON 字符串並將其轉換成一個 JavaScript 對象。
• JSON.stringify(obj) ：接受一個 JavaScript 對象並將其轉換為一個 JSON 字符串。

比如我有兩個變量，我要將a轉換成字符串，將b轉換成JSON對象：

js 代碼:

    var a={"name":"tom","sex":"男","age":"24"};
    var b='{"name":"Mike","sex":"女","age":"29"}';

在Firefox，chrome，opera，safari，ie9，ie8等高級瀏覽器直接可以用JSON對象的stringify()和parse()方法。

JSON.stringify(obj)將JSON轉為字符串。

JSON.parse(string)將字符串轉為JSON格式；

上面的轉換可以這么寫：

js 代碼:

    var a={"name":"tom","sex":"男","age":"24"};
     
    var b='{"name":"Mike","sex":"女","age":"29"}';
     
    var aToStr=JSON.stringify(a);
     
    var bToObj=JSON.parse(b);
     
    console.log(typeof(aToStr)); ?//string
     
    console.log(typeof(bToObj));//object

盡管這些方法通常用在對象上，但它們也可以在數組上使用：

JavaScript 代碼:

    const myArr = ['bacon', 'letuce', 'tomatoes'];
     
    const myArrStr = JSON.stringify(myArr);
     
    console.log(myArrStr);
    // "["bacon","letuce","tomatoes"]"
     
    console.log(JSON.parse(myArrStr));
    // ["bacon","letuce","tomatoes"]

ie8(兼容模式),ie7和ie6沒有JSON對象，不過http://www.json.org/提供了一個json.js,這樣ie8(兼容模式),ie7和ie6就可以支持JSON對象以及其stringify()和parse()方法；你可以在https://github.com/douglascrockford/JSON-js上獲取到這個js，一般現在用json2.js。

ie8(兼容模式),ie7和ie6可以使用eval()將字符串轉為JSON對象，

js 代碼:

    var c='{"name":"Mike","sex":"女","age":"29"}';
    var cToObj=eval("("+c+")");
    console.log(typeof(cToObj));

    var c='[{"name":"Mike","sex":"女","age":"29"}]'; var cToObj=eval(c); console.log(typeof(cToObj));

jQuery中也有將字符串轉為JSON格式的方法jQuery.parseJSON( json )，接受一個標准格式的 JSON 字符串，並返回解析后的 JavaScript （JSON）對象。當然如果有興趣可以自己封裝一個jQuery擴展，jQuery.stringifyJSON(obj)將JSON轉為字符串。

JSON.parse() 和 JSON.stringify() 的高級用法,可以將返回值過濾，轉換等。請查看：https://www.html.cn/archives/8735

這里介紹一下，我主要介紹一下 JSON.parse() 和 JSON.stringify() 的高級用法，可以在實際應用中給我們帶來一些方便。

JSON.parse()

JSON.parse() 可以接受第二個參數，它可以在返回之前轉換對象值。比如這例子中，將返回對象的屬性值大寫：

JavaScript 代碼:

    const user = {
    name: 'John',
    email: '[e-mail]',
    plan: 'Pro'
    };
     
    const userStr = JSON.stringify(user);
     
    const newUserStr = JSON.parse(userStr, (key, value) => {
    if (typeof value === 'string') {
    return value.toUpperCase();
    }
    return value;
    });
     
    console.log(newUserStr); //{name: "JOHN", email: "[e-mail]", plan: "PRO"} 

注：尾隨逗號在JSON 中無效，所以如果傳遞給它的字符串有尾隨逗號，JSON.parse()將會拋出錯誤。

JSON.stringify()

JSON.stringify() 可以帶兩個額外的參數，第一個是替換函數，第二個間隔字符串，用作隔開返回字符串。

參數：

• value ： 將要轉為JSON字符串的javascript對象。
• replacer ：該參數可以是多種類型,如果是一個函數,則它可以改變一個javascript對象在字符串化過程中的行為, 如果是一個包含 String 和 Number 對象的數組,則它將作為一個白名單.只有那些鍵存在域該白名單中的鍵值對才會被包含進最終生成的JSON字符串中.如果該參數值為null或者被省略,則所有的鍵值對都會被包含進最終生成的JSON字符串中。
• space ：該參數可以是一個 String 或 Number 對象,作用是為了在輸出的JSON字符串中插入空白符來增強可讀性. 如果是Number對象, 則表示用多少個空格來作為空白符; 最大可為10,大於10的數值也取10.最小可為1,小於1的數值無效,則不會顯示空白符. 如果是個 String對象, 則該字符串本身會作為空白符,字符串最長可為10個字符.超過的話會截取前十個字符. 如果該參數被省略 (或者為null), 則不會顯示空白符

替換函數可以用來過濾值，因為任何返回 undefined 的值將不在返回的字符串中：

JavaScript 代碼:

    const user = {
    id: 229,
    name: 'John',
    email: '[e-mail]'
    };
     
    function replacer(key, value) {
    console.log(typeof value);
    if (key === 'email') {
    return undefined;
    }
    return value;
    }
     
    const userStr = JSON.stringify(user, replacer);
    // "{"id":229,"name":"John"}"

傳入一個間隔參數的示例：

JavaScript 代碼:

    const user = {
    name: 'John',
    email: '[e-mail]',
    plan: 'Pro'
    };
     
    const userStr = JSON.stringify(user, null, '...');
    // "{
    // ..."name": "John",
    // ..."email": "[e-mail]",
    // ..."plan": "Pro"
    // }"

toJSON方法

如果一個被序列化的對象擁有 toJSON 方法，那么該 toJSON 方法就會覆蓋該對象默認的序列化行為：不是那個對象被序列化，而是調用 toJSON 方法后的返回值會被序列化

JavaScript 代碼:

    var obj = {
    foo: 'foo',
    toJSON:function(){
    return 'bar';
    }
    }
    JSON.stringify(obj);//'"bar"'
    JSON.stringify({x:obj});//'{"x":"bar"}'

利用toJSON方法,我們可以修改對象轉換成JSON的默認行為。

用 JSON.stringify 來格式化對象

在實際使用中,我們可能會格式化一些復雜的對象，這些對象往往對象內嵌套對象。直接看起來並不那么直觀,結合上面的的 replacer 和 space 參數,我們可以這樣格式化復雜對象：

JavaScript 代碼:

    var censor = function(key,value){
    if(typeof(value) == 'function'){
    return Function.prototype.toString.call(value)
    }
    return value;
    }
    var foo = {bar:"1",baz:3,o:{name:'xiaoli',age:21,info:{sex:'男',getSex:function(){return 'sex';}}}};
    console.log(JSON.stringify(foo,censor,4))

實際返回的字符串，記住是字符串，如下:

JavaScript 代碼:

    {
    "bar": "1",
    "baz": 3,
    "o": {
    "name": "xiaoli",
    "age": 21,
    "info": {
    "sex": "男",
    "getSex": "function (){return 'sex';}"
    }
    }
    }