JSON Stringify Converter: แปลงข้อความเป็น JSON String และย้อนกลับ พร้อม Escape ครบ

ใครเคยก๊อปข้อความจากไฟล์หรือ log แล้วเอาไปวางใน JavaScript แล้วพบว่า quote พัง newline หาย หรือ backslash โดนตีความผิด บทความนี้มีทางออกให้ครับ JSON Stringify Converter คือเครื่องมือฟรีที่ช่วยแปลง plain text หรือ JSON เป็น JSON string literal ที่ถูกต้องตาม spec แล้วก็แปลงกลับ (parse) ได้ในคลิกเดียว โดยจัดการ escape sequence ให้ครบทุกกรณี ไม่ว่าจะเป็น double quote, backslash, newline, tab หรือ unicode

ปกติเวลาเราอยากได้ JSON string ที่ฝังอยู่ใน source code เรามักใช้ JSON.stringify() ใน console ของ browser ซึ่งก็สะดวกดี แต่ปัญหาคือต้องเปิด devtools ทุกครั้ง แถมบางทีเราต้องการทำสิ่งที่ตรงกันข้าม คือเอา string ที่ถูก escape ไว้แล้วกลับมาเป็นข้อความต้นฉบับ (unescape) ซึ่งต้องระวังเรื่อง double-escaped string ที่ทำให้ข้อมูลเพี้ยนโดยไม่รู้ตัว เครื่องมือนี้จึงรวมทั้งสองโหมดไว้ในที่เดียว สลับไปมาได้ด้วยปุ่มเดียว

ที่สำคัญคือทุกอย่างทำงาน 100% บน client-side ข้อมูลของคุณไม่ถูกส่งไปที่ server ไหนเลย เหมาะกับข้อมูล sensitive เช่น config ที่มี API key หรือ payload ของลูกค้าที่ไม่ควรรั่วไหล

ทำไมต้องใช้ JSON Stringify Converter?

• ประหยัดเวลา: ไม่ต้องเปิด browser console หรือเขียน script ชั่วคราวเพื่อ stringify ทุกครั้ง วางข้อความแล้วได้ผลลัพธ์ทันทีแบบ real-time
• แม่นยำเรื่อง escape: เครื่องมือจัดการ special characters ทั้ง quote, backslash, newline, tab และ unicode ให้ถูกต้องตาม JSON spec ไม่มีพลาดแบบ manual
• สองทางในที่เดียว: stringify และ parse สลับกันได้ด้วย one-click swap ไม่ต้องหาเครื่องมือแยกสองตัว
• ถูกต้องตั้งแต่ต้น: real-time error feedback ช่วยจับ JSON ที่ syntax พังก่อนที่จะเอาไปใช้ต่อ ประหยัดเวลา debug
• ปลอดภัยสำหรับข้อมูล sensitive: ทำงาน client-side ล้วน ข้อมูลไม่ถูกส่งออกจากเครื่องคุณ
• ไม่มีขั้นตอนยุ่งยาก: copy ผลลัพธ์หรือ clear ได้ในคลิกเดียว ไม่ต้องสมัครสมาชิกหรือติดตั้งอะไร

ฟีเจอร์เด่น

จุดที่น่าสนใจเป็นพิเศษคือ smart detection ของ input ถ้าคุณวาง JSON object หรือ JSON array ที่ valid เครื่องมือจะ stringify โดยคงโครงสร้างข้อมูลไว้ แต่ถ้าวางข้อความธรรมดา (raw text) ก็จะถูกแปลงเป็น JSON string ตรง ๆ ไม่ต้องกังวลว่าจะต้องเตรียม input ให้ถูก format ก่อน

อีกจุดคือ real-time error feedback ที่ช่วยจับปัญหาตั้งแต่ต้น เช่น ถ้า input เป็น JSON ที่มี comma เกินหรือ bracket ไม่ครบ คุณจะเห็น error ทันทีว่าบรรทัดไหนมีปัญหา แทนที่จะรอไปพังตอน runtime

วิธีใช้งาน

1. เปิดหน้า JSON Stringify Converter
2. เลือกโหมดที่ต้องการ — stringify (ข้อความ → JSON string) หรือ parse (JSON string → ข้อความเดิม) และสลับสองโหมดได้ตลอดเวลาด้วยปุ่ม swap
3. วางหรือพิมพ์ข้อความในช่อง input — จะเป็น plain text, JSON object หรือ JSON array ก็ได้ เครื่องมือจะ auto-detect ให้เอง
4. ดูผลลัพธ์ในช่อง output ที่อัปเดตแบบ real-time ขณะพิมพ์ ถ้ามี error เช่น JSON ไม่ valid จะมีข้อความแจ้งเตือนขึ้นมาทันที
5. กดปุ่ม copy เพื่อคัดลอกผลลัพธ์ไปใช้ต่อ หรือกด clear เพื่อเริ่มใหม่

เข้าใจ JSON String Escaping

หัวใจของการ stringify คือการ escape ตัวอักษรพิเศษให้ถูกต้อง เพราะ JSON string ถูกครอบด้วย double quote เสมอ ตัวอักษรที่ JSON spec กำหนดให้ต้อง escape มีดังนี้

• \" สำหรับ double quote — เพราะ quote คือตัวปิด string เอง ถ้าไม่ escape ตัว parser จะคิดว่า string จบก่อนเวลา
• \\ สำหรับ backslash — ถ้าเจอ backslash เดี่ยว ๆ ตัว parser จะเข้าใจว่าเป็น escape sequence ที่ไม่รู้จัก ทำให้ JSON พัง
• \n สำหรับ newline — ใน JSON spec ห้ามมี line break จริง ๆ อยู่ใน string เด็ดขาด ต้องแปลงเป็น \n เสมอ
• \t สำหรับ tab — แปลงเป็น escape sequence เพื่อความชัดเจนและปลอดภัย
• \u003c สำหรับ < (และ > เป็น \u003e) — อันนี้เกี่ยวกับความปลอดภัยเมื่อ embed JSON ใน HTML หรือ &lt;script&gt; tag เพราะเครื่องหมาย < และ > อาจถูกตีความผิดเป็น HTML tag ได้ หลาย serializer จึง escape เป็น unicode ไปเลยเพื่อกัน XSS และ parsing issue

ตัวอย่างที่ 1 — แปลงข้อความธรรมดาที่มี special characters:

Input  : สวัสดี "ครับ" —
ทดสอบ "ยาว"
Output: "สวัสดี \"ครับ\" —\nทดสอบ \"ยาว\""

ตัวอย่างที่ 2 — stringify JSON object ให้กลายเป็น string ที่ฝังไว้ใน JSON อีกชั้นหนึ่ง:

Input  : {"name": "อาทิตย์", "level": 9}
Output : "{\"name\": \"อาทิตย์\", \"level\": 9}"

สังเกตว่า string ที่ได้จะครอบด้วย double quote และ quote ทั้งหมดข้างในโดน escape เป็น \" เนื่องจาก JSON.stringify จะเลือก double quote เป็นตัวครอบ string เสมอ (ไม่ใช่ single quote)

ตัวอย่างที่ 3 — ความต่างระหว่าง stringify string กับ stringify object:

JSON.stringify('สวัสดี'); // ผลลัพธ์: "สวัสดี" — string ถูกครอบด้วย double quote ด้วย
JSON.stringify({ a: 1 }); // ผลลัพธ์: {"a":1}
JSON.stringify('สวัสดี', null, 2); // ผลลัพธ์: "สวัสดี"

จุดนี้แหละที่คนสับสนบ่อย — JSON.stringify("สวัสดี") ไม่ใช่การทิ้งคำเดิม แต่ให้ string ที่ถูก escape แล้วออกมา รวมถึงครอบด้วย double quote ของมันเอง ดังนั้นค่าที่ได้จาก stringify ของ string จะมีความหมายเหมือน "string literal ที่ติดตั้งใน JSON" ที่หยิบไปวางใน source code ได้เลย ส่วน stringify ของ object คือการแปลง object เป็น JSON text ธรรมดา

use case จริงในงานพัฒนา

Embed JSON ใน JS/TS source หรือ config

สมมติคุณมี JSON config ที่ต้องฝังเป็น string ในโค้ด เช่น default config ของ library หรือ seed data ใน migration script คุณแปลง JSON object ทั้งก้อนให้เป็น string แล้ววางใน source ได้เลย หรือฝั่งกลับกันคือสกัด JSON ที่ถูกฝังเป็น escaped string ในไฟล์ config ออกมาเป็น object ที่อ่านง่ายเพื่อแก้ไข

เตรียม test fixture หรือ seed data

เวลาเขียน unit test ที่ต้องการ test fixture เป็น JSON string ที่มี special characters ครบ (มี quote, newline, unicode) การ escape ด้วยมือเสี่ยงพลาดสูงมาก เครื่องมือนี้ช่วยสร้าง fixture ที่ valid แน่นอนจากข้อความต้นฉบับใน test ได้เร็วกว่าเยอะ

Debug escaped payload จาก log หรือ API

คุ้นเคยกับ log ที่แสดง JSON แบบ escaped string ที่อ่านยากจนแทบไม่ได้ เช่น "{\"status\": \"ok\"}" เหรือ payload จาก API ที่ถูก stringify สองชั้น คุณสามารถวางลงในโหมด parse เพื่อ unescape กลับมาเป็น JSON ที่อ่านได้ แล้ว inspect ค่าจริงที่ฝังอยู่ข้างในได้ทันที

แก้ปัญหา double-escaped string

อาการที่เจอบ่อยคือ string ที่ถูก stringify สองครั้ง เช่นใน log เห็นแบบนี้:

"{\"a\": \"b\\\"c\\\"\"}"

แบบนี้คือถูก escape ไปสองชั้น (double-escaped) เกิดจากการ stringify object ที่มี string ที่ stringify ไว้แล้วฝังอยู่ข้างใน การ parse ทีละชั้นด้วยเครื่องมือช่วยให้คุณไล่ดูทีละชั้นว่าค่าจริงคืออะไร แล้วรู้ว่าต้องแก้ตรงไหนใน pipeline ที่เรียก stringify ซ้ำซ้อน

Best Practices

• ตรวจว่า JSON ถูกต้องก่อน stringify: ถ้า input เป็น JSON ที่ syntax พัง ผลลัพธ์ stringify จะพังตามไปด้วย ใช้ error feedback ของเครื่องมือตรวจก่อนเสมอ
• ใช้ปุ่ม swap เพื่อตรวจสอบ round-trip: stringify แล้ว parse กลับ ถ้าได้ข้อความเดิมแปลว่า escape ถูกต้อง เป็นวิธีตรวจ integrity ที่เร็วที่สุด
• อย่า escape ด้วยมือใน production code: ใช้ JSON.stringify() ในโค้ดและใช้เครื่องมือนี้ตอนทำ ad-hoc งานเท่านั้น การ escape ด้วยมือเสี่ยงเรื่อง double-escaping และ unicode ผิด
• ระวัง double-escaped string ใน log: ถ้าเห็น \\\\ หรือ \\\" ใน log มีโอกาสสูงว่า payload ถูก stringify ซ้ำสองชั้น ให้ parse ทีละชั้นเพื่อหาสาเหตุ
• ใช้ unicode escape สำหรับ embed ใน HTML: ถ้าต้องฝัง JSON ใน &lt;script&gt; tag ควร escape ที่เป็น < และ > เป็น unicode ด้วย (\u003c, \u003e) เพื่อกัน XSS และ parser ของ HTML ทำงานผิดพลาด
• เก็บข้อมูล sensitive ไว้ในเครื่อง: เลือกเครื่องมือที่ทำงาน client-side อย่างเครื่องมือนี้ เพราะข้อมูลจะไม่ถูกส่งออกจากเครื่อง

เริ่มแปลงได้เลยวันนี้

ไม่ว่าคุณจะเตรียม test fixture, debug payload จาก log หรือฝัง JSON ใน source code JSON Stringify Converter ช่วยให้งานเหล่านี้เสร็จในไม่กี่วินาที พร้อม escape ที่ถูกต้องตาม spec ทุกครั้ง ลองใช้เลย — ไม่ต้องสมัครสมาชิก ไม่มีค่าใช้จ่าย และข้อมูลของคุณก็ไม่ออกจากเครื่องด้วย

เครื่องมือที่เกี่ยวข้อง

• JSON to CSV Converter — แปลง JSON array ของ object เป็นไฟล์ CSV สำหรับทำรายงานหรือ import เข้า spreadsheet
• JSON to YAML Converter — แปลง JSON เป็น YAML สำหรับใช้ใน config file เช่น Kubernetes, Docker Compose หรือ GitHub Actions
• JSON to TypeScript — สร้าง TypeScript interface จาก JSON ที่มีอยู่ ช่วยให้ type-safe ตั้งแต่เริ่มโปรเจกต์

ขอให้เขียนโค้ดอย่างมีความสุข!