การแปลง String ให้เป็น JavaScript Object

การแปลง JSON String ให้เป็น JavaScript Object ใช้ JSON.parse() ซึ่งเป็นวิธีมาตรฐานและปลอดภัยที่สุด

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>String to Object</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .sample { font-size: 18px; font-weight: 500; color: red; }
  </style>
</head>
<body>
  <h1>แปลง String เป็น JavaScript Object</h1>
  <div class="sample">{"name":"Rohan", "sports":["Cricket","Football"], "country":"India"}</div>
  <div class="result"></div>
  <button class="Btn">คลิกที่นี่</button>
  <h3>คลิกปุ่มด้านบนเพื่อแปลง String ข้างต้นเป็น Object</h3>
  <script>
    const sampleEle = document.querySelector(".sample");
    const resultEle = document.querySelector(".result");
    
    // Parse ครั้งเดียว เก็บไว้ใช้
    const parsedJson = JSON.parse(sampleEle.innerHTML);
    
    document.querySelector(".Btn").addEventListener("click", () => {
      resultEle.innerHTML = `Name = ${parsedJson.name}<br>`;
      resultEle.innerHTML += `Country = ${parsedJson.country}<br>`;
      resultEle.innerHTML += `Sports = ${parsedJson.sports.join(", ")}`;
    });
  </script>
</body>
</html>

JSON.parse() Options

// 1. Basic
const obj = JSON.parse('{"a": 1}');

// 2. Reviver Function (Transform ขณะ Parse)
const dateStr = '{"date": "2024-01-15T10:30:00Z"}';
const obj2 = JSON.parse(dateStr, (key, value) => {
  if (key === "date") return new Date(value);
  return value;
});
console.log(obj2.date instanceof Date); // true

// 3. Error Handling
function safeParse(jsonStr, fallback = {}) {
  try {
    return JSON.parse(jsonStr);
  } catch (e) {
    console.warn("Invalid JSON:", jsonStr);
    return fallback;
  }
}

JSON.stringify() - ทางตรงข้าม

const obj = { name: "John", age: 30, skills: ["JS", "TS"] };

// Basic
JSON.stringify(obj); 
// '{"name":"John","age":30,"skills":["JS","TS"]}'

// Pretty Print (Indent 2 spaces)
JSON.stringify(obj, null, 2);

// Replacer Function (Filter/Transform)
JSON.stringify(obj, (key, value) => {
  if (key === "age") return undefined; // Exclude age
  return value;
});
// '{"name":"John","skills":["JS","TS"]}'

// Replacer Array (Whitelist Keys)
JSON.stringify(obj, ["name", "skills"]);
// '{"name":"John","skills":["JS","TS"]}'

ผลลัพธ์

Name = Rohan, Country = India, Sports = Cricket, Football