JSON.stringify()


目录

    显示目录


JSON 的常见用途是与 Web 服务器交换数据。

当向网络服务器发送数据时,数据必须是 一个字符串。

使用 JSON.stringify() 将 JavaScript 对象转换为字符串。


将 JavaScript 对象字符串化

假设我们在 JavaScript 中有这个对象:

const obj = {name: "John", age: 30, city: "New York"};

使用 JavaScript 函数 JSON.stringify() 将其转换为字符串。

const myJSON = JSON.stringify(obj);

结果将是一个遵循 JSON 符号的字符串。

myJSON 现在是一个字符串,可以发送到服务器:

例子

const obj = {name: "John", age: 30, city: "New York"};
const myJSON = 
  JSON.stringify(obj);
  

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Create a JSON string from a JavaScript object.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

您将在接下来的章节中学习如何将 JSON 发送到服务器。


将 JavaScript 数组字符串化

也可以对 JavaScript 数组进行字符串化:

假设我们在 JavaScript 中有这个数组:

const arr = ["John", "Peter", "Sally", "Jane"];

使用 JavaScript 函数 JSON.stringify() 将其转换为字符串。

const myJSON = JSON.stringify(arr);

结果将是一个遵循 JSON 符号的字符串。

myJSON 现在是一个字符串,可以发送到服务器:

例子

const arr = ["John", "Peter", "Sally", "Jane"];
const myJSON = 
  JSON.stringify(arr);
  

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Create a JSON string from a JavaScript array.</h2>
<p id="demo"></p>

<script>
const arr = ["John", "Peter", "Sally", "Jane"];
const myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

您将在接下来的章节中学习如何将 JSON 字符串发送到服务器。


存储数据

存储数据时,数据必须是某种格式,无论您选择将其存储在哪里, 文本始终是合法格式之一。

JSON 使得将 JavaScript 对象存储为文本成为可能。

例子

将数据存储在本地存储中

 // Storing data:
const myObj = {name: "John", 
  age: 31, city: "New York"};
const myJSON = 
  JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

  // Retrieving data:
let text = localStorage.getItem("testJSON");
let obj = 
  JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Store and retrieve data from local storage.</h2>
<p id="demo"></p>

<script>
// Storing data:
const myObj = { name: "John", age: 31, city: "New York" };
const myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Retrieving data:
let text = localStorage.getItem("testJSON");
let obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
</script>

</body>
</html>


例外情况

字符串化日期

在 JSON 中,不允许使用日期对象。 JSON.stringify() 函数将转换 将任何日期转换为字符串。

例子

const obj = {name: "John", today: new Date(), city : "New York"};
const myJSON = JSON.stringify(obj);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() converts date objects into strings.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", today: new Date(), city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

您可以在接收器处将字符串转换回日期对象。


字符串化函数

在 JSON 中,不允许将函数作为对象值。

JSON.stringify() 函数将从 JavaScript 中删除所有函数 对象,键和值:

例子

const obj = {name: "John", age: function () {return 30;}, city: "New York"};
const myJSON = JSON.stringify(obj);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() will remove any functions from an object.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", age: function () {return 30;}, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

如果您在运行之前将函数转换为字符串,则可以省略此操作 JSON.stringify() 函数。

例子

const obj = {name: "John", age: function () {return 30;}, city: "New York"};
  obj.age = obj.age.toString();
const myJSON = JSON.stringify(obj);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() will remove any functions from an object.</h2>
<p>Convert functions into strings to keep them in the JSON object.</p>

<p id="demo"></p>

<script>
const obj = {name: "John", age: function () {return 30;}, city: "New York"};
obj.age = obj.age.toString();
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

如果使用 JSON 发送函数,函数将失去其范围,并且接收者 必须使用 eval() 将它们转换回函数。