JSON.stringify()

สารบัญ

การใช้งาน JSON ทั่วไปคือการแลกเปลี่ยนข้อมูลไปยัง/จากเว็บเซิร์ฟเวอร์

เมื่อส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ข้อมูลจะต้องมี สตริง.

แปลงวัตถุ JavaScript ให้เป็นสตริงด้วย JSON.stringify()

สตริงวัตถุ 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() เพื่อแปลงกลับเป็นฟังก์ชัน