0Pricing
JavaScript Academy · บทเรียน

พื้นฐาน JSON.parse / JSON.stringify

แปลงออบเจ็กต์เป็นสตริง JSON และแปลงกลับ ใช้ replacer/reviver แบบสั้น ๆ และจัดการอินพุตที่ไม่ถูกต้องอย่างปลอดภัย

พื้นฐาน JSON.parse / JSON.stringify เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

เหตุใดจึงใช้ JSON

เป้าหมาย: แปลงข้อมูลเป็นรูปแบบจัดเก็บและแยกวิเคราะห์อย่างปลอดภัย

  • JSON.stringify → สตริง
  • JSON.parse ← สตริง
  • ตัวแทนแทนที่/ตัวกู้คืน (ลองใช้เบื้องต้น)
  • เคล็ดลับความปลอดภัยพื้นฐาน
พื้นฐาน JSON.parse / JSON.stringify — ภาพประกอบ 1

stringify()

ใช้ JSON.stringify(value) เพื่อรับสตริง JSON หากต้องการให้อ่านง่าย ให้ส่งตัวเลข จำนวนช่องว่าง เช่น 2

// Turn a value into a JSON string
const user = { name: "Ayla", score: 12, active: true };
const json = JSON.stringify(user);
console.log("json:", json);

// Optional: pretty-print with spaces (2)
const pretty = JSON.stringify(user, null, 2);
console.log("pretty:", pretty);
พื้นฐาน JSON.parse / JSON.stringify — ภาพประกอบ 2

parse()

JSON.parse(text) คืนค่าข้อมูลนั้น ข้อมูลนำเข้าต้องเป็นสตริง JSON ที่ถูกต้อง

// Parse a JSON string back to a value
const raw = "{\"name\":\"Ayla\",\"score\":12,\"active\":true}";
const value = JSON.parse(raw);
console.log("name:", value.name, "score:", value.score);
พื้นฐาน JSON.parse / JSON.stringify — ภาพประกอบ 3

ตัวแทนแทนที่ (stringify)

ตัวแทนแทนที่(key, value) สามารถตัดหรือตัดแปลงฟิลด์ขณะแปลงเป็นสตริง เช่น ซ่อนรหัสผ่าน

// Replacer: filter or transform keys during stringify
const account = { id: 7, password: "secret", role: "user" };

// Hide sensitive fields
function replacer(key, value) {
  if (key === "password") return undefined; // drop it
  return value;
}

const safeJson = JSON.stringify(account, replacer, 2);
console.log("safeJson:", safeJson);
พื้นฐาน JSON.parse / JSON.stringify — ภาพประกอบ 4

ตัวกู้คืน (parse)

ตัวกู้คืน(key, value) สามารถแปลงค่าระหว่างการแยกวิเคราะห์ เช่น แปลงสตริง → ออบเจ็กต์วันที่

// Reviver: convert specific strings back into richer types
const orderJson = "{\"when\":\"2024-06-01T10:00:00Z\",\"total\":25}";

function reviver(key, value) {
  if (key === "when" && typeof value === "string") {
    return new Date(value); // restore Date
  }
  return value;
}

const order = JSON.parse(orderJson, reviver);
console.log("is Date?", order.when instanceof Date);
console.log("total:", order.total);
พื้นฐาน JSON.parse / JSON.stringify — ภาพประกอบ 5

ความปลอดภัยและข้อจำกัด

เคล็ดลับ:

  • ครอบ JSON.parse ด้วย try/catch เมื่อข้อมูลนำเข้าไม่น่าเชื่อถือ
  • ใช้ตัวแทนแทนที่เพื่อลบฟิลด์ที่ละเอียดอ่อนก่อนบันทึกหรือแชร์
  • JSON จะสูญเสียฟังก์ชันและข้อมูลต้นแบบ โดยจะแปลงเฉพาะข้อมูลเท่านั้น
พื้นฐาน JSON.parse / JSON.stringify — ภาพประกอบ 6

แบบทดสอบ stringify เทียบกับ parse

ตรวจสอบอย่างรวดเร็ว: แปลงค่าเป็นรูปแบบจัดเก็บ

พื้นฐาน JSON.parse / JSON.stringify — ภาพประกอบ 7

ทบทวน

ทบทวน: แปลงค่าด้วย JSON.stringify/JSON.parse ใช้ ตัวแทนแทนที่ เพื่อกรองฟิลด์ และใช้ ตัวกู้คืน เพื่อคืนชนิดข้อมูลอย่าง ออบเจ็กต์วันที่ เพิ่ม try/catch เพื่อความปลอดภัย

พื้นฐาน JSON.parse / JSON.stringify — ภาพประกอบ 8

คำถามที่พบบ่อย

บทเรียน “พื้นฐาน JSON.parse / JSON.stringify” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “พื้นฐาน JSON.parse / JSON.stringify” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน JSON.parse / JSON.stringify”

แปลงออบเจ็กต์เป็นสตริง JSON และแปลงกลับ ใช้ replacer/reviver แบบสั้น ๆ และจัดการอินพุตที่ไม่ถูกต้องอย่างปลอดภัย คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “พื้นฐาน JSON.parse / JSON.stringify” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. พื้นฐาน JSON.parse / JSON.stringify
  2. การโคลนแบบมีโครงสร้างและ URLSearchParams
  3. กลยุทธ์การแยกวิเคราะห์ JSON อย่างปลอดภัย
← กลับไปที่ JavaScript Academy