runsly js教程 2022-04-20

详解JSON.stringify()与JSON.parse()转换JSON对象和字符串

本节将介绍两种对 JSON 进行字符串化和解析的方法。能够将 JSON 从对象转换为字符串，反之亦然，这对于传输和存储数据很有用。

这就是本文要介绍的JSON.stringify()与JSON.parse()方法。

在文章开始之前，如果你需要从 .JSON 文件读取数据，那么可以参考此文：

介绍两种方法JS读取 .JSON 文件【实例演示/源码下载】

JSON.stringify()

JSON.stringify()方法将一个 JavaScript 对象或值转换为 JSON 字符串。

字符串对于通过以轻量级方式存储或传递信息将数据从客户端传输到服务器很有用。例如，你可以在客户端收集用户的设置，然后将它们发送到服务器。稍后，你可以使用JSON.parse()方法读取信息并根据需要使用数据。

我们将一个JSON 对象分配给变量obj，然后通过把obj传给JSON.stringify()函数，并使用该函数转换它，我们可以将此字符串分配给变量s：

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}

var s = JSON.stringify(obj)

s的值为：

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

现在，如果我们使用s，我们将把 JSON 作为字符串而不是对象。

我们再看看下面几个例子。

console.log(JSON.stringify({ x: 5, y: 6 }))
console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));

Output
> ‘{“x”:5,”y”:6}’
> ‘[3,”false”,false]’
> ‘{“x”:[10,null,null,null]}’
> ‘”2006-01-02T07:04:05.000Z”‘

从这些示例看到，把对象转为字符串时，某些值会发生变化，如“undefined”变成了null，空字符也变成了null，此外，空函数也会变成null。这是我们需要注意的地方。

JSON.stringify()函数允许我们将对象转换为字符串。相反，我们将使用JSON.parse()函数。

JSON.parse()

字符串对于传输很有用，但如果你希望能够将它们转换回客户端和/或服务器端的 JSON 对象，我们可以使用JSON.parse()函数来做到这一点。

要转换上面JSON.stringify()部分中的示例，我们会将字符串s传递给函数，并将其分配给一个新变量：

var o = JSON.parse(s)

然后，我们将使用与obj对象相同的对象o。

为了更深入地了解，让我们看一看一个 HTML 文件上下文中JSON.parse()的示例：

<!DOCTYPE html>
<html>
<body>

<p id="user"></p>

<script>
var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

var obj = JSON.parse(s);

document.getElementById("user").innerHTML =
"Name: " + obj.first_name + " " + obj.last_name + "<br>" +
"Location: " + obj.location;
</script>

</body>
</html>

Output
Name: Sammy Shark
Location: Ocean

在 HTML 文件的上下文中，我们可以看到 JSON 字符串s被转换为对象obj，而JSON.parse()是解析 JSON 字符串并将其转换为对象的安全函数。

总结

JSON 是一种在 JavaScript 中使用的自然格式，本文详细解释了JSON.stringify()与JSON.parse()如何操作JSON对象和字符串。