JSON.stringify和JSON.parse之间的区别


452

我对于何时使用这两种解析方法感到困惑。

在回显我的json_encoded数据并通过ajax将其检索回来之后,我常常会困惑何时应该使用JSON.stringifyJSON.parse

我得到[object,object]的console.log字符串化时解析和JavaScript对象时。

$.ajax({
url: "demo_test.txt",
success: function(data) {
         console.log(JSON.stringify(data))
                     /* OR */
         console.log(JSON.parse(data))
        //this is what I am unsure about?
    }
});

1
总结以下答案:1.它们彼此相反。2.合并它有助于验证数据或转动人类可读:json.stringify(json.parse(data))
Hafenkranich '16

Answers:


673

JSON.stringify 将JavaScript对象转换为JSON文本并将该JSON文本存储在字符串中,例如:

var my_object = { key_1: "some text", key_2: true, key_3: 5 };

var object_as_string = JSON.stringify(my_object);  
// "{"key_1":"some text","key_2":true,"key_3":5}"  

typeof(object_as_string);  
// "string"  

JSON.parse 将JSON文本字符串转换为JavaScript对象,例如:

var object_as_string_as_object = JSON.parse(object_as_string);  
// {key_1: "some text", key_2: true, key_3: 5} 

typeof(object_as_string_as_object);  
// "object" 

9
?json.stringify(json.parse(数据))我看到这个代码......所以这基本上是将JSON数据中的对象,然后再它再转成JSON数据..
HIRA塔库尔

29
@MESSIAH-是的。它在很大程度上没有意义,但可以用作JSON验证器。
昆汀,

11
还可用于对象键值配对的简单对象副本。
hunterc

4
我发现它对于在控制台中进行调试非常有用-它使其易于阅读。
kirgy 2014年

2
@Quentin可以借助示例进行解释吗?
Pardeep Jain 2015年

57

JSON.parse()用于“解析”以JSON形式接收的内容。
JSON.stringify()是根据对象/数组创建JSON字符串。


4
精度:它可能不是对象。
DenysSéguret13年

是的,也可以是数组或Javascript识别为某种类型的任何东西。底线;它接受它并将其转换为适当的JSON等效项。
Bjorn'Bjeaurn'S

2
@dystroy —它必须是一个对象(请注意数组是对象)。
昆汀

2
@quentinJSON.stringify(3)
DenysSéguret13年

@dystroy —没意识到,他们没有将其扩展为处理JSON 片段。那是不直观的。
昆汀

43

它们彼此相反。JSON.stringify()将JS对象序列化为JSON字符串,而JSON.parse()将JSON字符串反序列化为JS对象。


25

他们是彼此对立的。

JSON.stringify()

JSON.stringify()将JS对象或值序列化为JSON字符串。

JSON.stringify({});                  // '{}'
JSON.stringify(true);                // 'true'
JSON.stringify('foo');               // '"foo"'
JSON.stringify([1, 'false', false]); // '[1,"false",false]'
JSON.stringify({ x: 5 });            // '{"x":5}'

JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) 
// '"2006-01-02T15:04:05.000Z"'

JSON.stringify({ x: 5, y: 6 });
// '{"x":5,"y":6}' or '{"y":6,"x":5}'
JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
// '[1,"false",false]'

JSON.parse()

JSON.parse()方法将字符串解析为JSON,可以选择转换生成的值。

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null

7
一个更好的名字parse()objectify()or jsonify()
珠穆朗玛峰,2016年

为什么不使用JSON.toString()和JSON.toObject()?我希望使用这些名称(对于使用intellisense的新程序员尤其有用)。
理查德·查塞罗


@nueverest jsonify()是模棱两可,误导性,因为parse()不能转换StringJSON类型(这是什么jsonify()会指示),但parse()转换一个JSON格式的 String任何的:ObjectArrayNumberStringBooleannull。人们经常将JSON“字符串表示”和Object(或dict在Python等中)混淆。
jbmusso

21

首先,JSON.stringify()函数将JavaScript值转换为JavaScript对象符号(JSON)字符串。JSON.parse()函数将JavaScript对象表示法(JSON)字符串转换为对象。有关这两个功能的更多信息,请参考以下链接。

https://msdn.microsoft.com/library/cc836459(v=vs.94).aspx https://msdn.microsoft.com/library/cc836466(v=vs.94).aspx

其次,以下示例将有助于您理解这两个功能。

<form id="form1" runat="server">
    <div>
        <div id="result"></div>
    </div>
</form>

<script>
    $(function () {
        //define a json object
        var employee = { "name": "John Johnson", "street": "Oslo West 16", "phone": "555 1234567" };

        //use JSON.stringify to convert it to json string
        var jsonstring = JSON.stringify(employee);
        $("#result").append('<p>json string: ' + jsonstring + '</p>');

        //convert json string to json object using JSON.parse function
        var jsonobject = JSON.parse(jsonstring);
        var info = '<ul><li>Name:' + jsonobject.name + '</li><li>Street:' + jsonobject.street + '</li><li>Phone:' + jsonobject.phone + '</li></ul>';

        $("#result").append('<p>json object:</p>');
        $("#result").append(info);
    });
</script>

15
var log = { "page": window.location.href, 
        "item": "item", 
        "action": "action" };

log = JSON.stringify(log);
console.log(log);
console.log(JSON.parse(log));

//输出将是:

//对于第一个控制台,它是一个字符串,例如:

'{ "page": window.location.href,"item": "item","action": "action" }'

//对于第二个控制台,对象是这样的:

Object {
page   : window.location.href,  
item   : "item",
action : "action" }


6

真正的困惑不是解析vs字符串化,而是data成功回调参数的数据类型。

data 根据文档,它可以是原始响应(即字符串),也可以是JavaScript对象:

成功

类型:Function(任何数据,String textStatus,jqXHR jqXHR)如果请求成功,则要调用的函数。该函数将传递三个参数:从服务器返回的数据,根据dataType参数或dataFilter回调函数(如果已指定)进行格式化; <..>

并且dataType默认为'智能猜测'的设置

dataType(默认值:Intelligent Guess(xml,json,脚本或html))

类型:字符串期望从服务器返回的数据类型。如果未指定,则jQuery将尝试根据响应的MIME类型来推断它(XML MIME类型将产生XML,在1.4中,JSON将产生一个JavaScript对象,在1.4脚本中将执行该脚本,而其他所有内容将以字符串形式返回)。


2
这是非常有用的补充,因为它可以帮助您理解到底是什么!
rmcsharry

4

JavaScript对象<-> JSON字符串


JSON.stringify() <-> JSON.parse()

JSON.stringify(obj)-接受任何可序列化的对象,并以字符串形式返回JSON表示形式。

JSON.stringify() -> Object To String.

JSON.parse(string)-采取格式正确的JSON字符串并返回相应的JavaScript对象。

JSON.parse() -> String To Object.

说明: JSON.stringify(obj [,replacer [,space]]);

替换项/空格-可选或采用整数值,也可以调用整数类型返回函数。

function replacer(key, value) {
    if (typeof value === 'number' && !isFinite(value)) {
        return String(value);
    }
    return value;
}
  • Replacer Just用于将非有限no替换为null。
  • 按空格缩进Json String的空间使用

4

它们是彼此完全相反的。

JSON.parse()用于解析JSON形式接收的数据; 它将一个JSON字符串反序列化为一个JavaScript对象

JSON.stringify()另一方面用于从对象数组中创建JSON字符串 ; 序列化一个JavaScript对象JSON字符串


4

我不知道是否有人提到它,但是JSON.parse(JSON.stringify(myObject))的用途之一是创建原始对象的克隆。

当您希望在不影响原始对象的情况下处理一些数据时,这非常方便。对于不是很复杂的对象,可能不是最干净/最快的方法,但肯定是最简单的方法。


3

JSON.stringify(obj [, replacer [, space]]) -接受任何可序列化的对象,并以字符串形式返回JSON表示形式。

JSON.parse(string) -采取格式正确的JSON字符串并返回相应的JavaScript对象。


3

他们彼此对立。 JSON.Stringify()将JSON转换为字符串,然后JSON.Parse()将字符串解析为JSON。


1

JSON:主要用于与服务器之间的数据交换。在将JSON对象发送到服务器之前,它必须是一个字符串。

JSON.stringify() //Converts the JSON object into the string representation.
var jsonData={"Name":"ABC","Dept":"Software"};// It is a JSON object
var jsonString=JSON.stringify(jsonData);// It is a string representation of the object
// jsonString === '{"Name":"ABC","Dept":"Software"}'; is true

还将Javascript数组转换为字符串

var arrayObject=["ABC","Software"];// It is array object
var arrString=JSON.stringify(array);// It is string representation of the array (object)
// arrString === '["ABC","Software"]'; is true 

当我们从服务器接收到JSON数据时,数据将是字符串格式,因此我们将字符串转换为JSON对象。

JSON.parse() //To convert the string into JSON object.
var data='{ "name":"ABC", "Dept":"Software"}'// it is a string (even though it looks like an object)
var JsonData= JSON.parse(data);// It is a JSON Object representation of the string.
// JsonData === { "name":"ABC", "Dept":"Software"}; is true

1

JSON.parse()用于将String转换为Object。
JSON.stringify()用于将对象转换为字符串。

你也可以参考这个...

<script type="text/javascript">

function ajax_get_json(){

    var hr = new XMLHttpRequest();
    hr.open("GET", "JSON/mylist.json", true);
    hr.setRequestHeader("Content-type", "application/json",true);
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
           /*  var return_data = hr.responseText; */

           var data=JSON.parse(hr.responseText);
           var status=document.getElementById("status");
           status.innerHTML = "";
           /* status.innerHTML=data.u1.country;  */
           for(var obj in data)
               {
               status.innerHTML+=data[obj].uname+" is in "+data[obj].country+"<br/>";
               }

        }
    }
    hr.send(null);
    status.innerHTML = "requesting...";
}
</script>

1

JSON.parse()接收JSON字符串并将其转换为JavaScript对象。

JSON.stringify()接受一个JavaScript对象,并将其转换为JSON字符串。

const myObj = {
      name: 'bipon',
      age: 25,
      favoriteFood: 'fish curry'
};

 const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"bipon","age":26,"favoriteFood":"fish curry"}"

console.log(JSON.parse(myObjStr));
 // Object {name:"bipon",age:26,favoriteFood:"fish curry"}
尽管这些方法通常用于对象,但它们也可以用于数组:
const myArr = ['simon', 'gomez', 'john'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);
// "["simon","gomez","john"]"

console.log(JSON.parse(myArrStr));
// ["simon","gomez","john"]
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.