พื้นฐาน 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 ← สตริง
- ตัวแทนแทนที่/ตัวกู้คืน (ลองใช้เบื้องต้น)
- เคล็ดลับความปลอดภัยพื้นฐาน

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);

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);

ตัวแทนแทนที่ (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);

ตัวกู้คืน (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 ด้วย try/catch เมื่อข้อมูลนำเข้าไม่น่าเชื่อถือ
- ใช้ตัวแทนแทนที่เพื่อลบฟิลด์ที่ละเอียดอ่อนก่อนบันทึกหรือแชร์
- JSON จะสูญเสียฟังก์ชันและข้อมูลต้นแบบ โดยจะแปลงเฉพาะข้อมูลเท่านั้น

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

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

คำถามที่พบบ่อย
บทเรียน “พื้นฐาน 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐาน JSON.parse / JSON.stringify
- การโคลนแบบมีโครงสร้างและ URLSearchParams
- กลยุทธ์การแยกวิเคราะห์ JSON อย่างปลอดภัย