JSON Stringify

เกี่ยวกับ GeekFormat

อัปโหลด

ป้อน JSON หรือสตริงเพื่อแปลง

แปลง JSON ให้เป็นสตริงที่นำไปวางในโค้ด URL หรือช่องข้อความได้ง่าย และแปลงกลับเป็น JSON ได้เมื่อต้องการ

คำแนะนำที่เกี่ยวข้อง

JSON Escape / Unescape

จัดรูปแบบ JSON

ซ่อมแซม JSON

เรียง JSON

รวม JSON

บีบอัด JSON

JSON Stringify และการฝัง JSON เป็นสตริงคืออะไร?

JSON Stringify คือการแปลงอ็อบเจ็กต์หรืออาร์เรย์ JSON ให้เป็นข้อความแบบสตริง ใน JavaScript มักใช้ `JSON.stringify()` เป็นวิธีมาตรฐาน

ในการใช้งานจริง ผลลัพธ์นี้มักต้องถูกนำไปฝังใน source code, คอลัมน์ข้อความของฐานข้อมูล, พารามิเตอร์ URL หรือฟิลด์ JSON อื่นในรูปแบบสตริง จึงต้อง escape เครื่องหมายคำพูด เครื่องหมาย backslash และตัวขึ้นบรรทัดใหม่เพิ่มอีกชั้น

เครื่องมือนี้จะ stringify ตามมาตรฐาน จากนั้นเพิ่มเครื่องหมายคำพูดชั้นนอกและ escape อักขระพิเศษให้อัตโนมัติ ส่วน Parse mode จะทำงานย้อนกลับเพื่อคืนค่าเป็น JSON ที่อ่านง่าย ทั้งหมดเกิดขึ้นแบบ local ในเบราว์เซอร์

กรณีการใช้งาน

แปลง JSON เป็น string literal สำหรับ JavaScript / Java / Python / Go
เก็บ JSON response ไว้เป็น string ภายใน JSON อื่น
บันทึก JSON string ลงฐานข้อมูลหรือ Redis
ส่ง JSON ผ่าน query parameter หรือ header ของ URL
กู้ JSON ที่ถูก escape จาก log หรือไฟล์ config ให้กลับมาอ่านง่าย

วิธีการใช้งาน

วาง JSON หรือสตริงในช่องด้านซ้าย หรือใช้ sample / upload file
เลือกโหมด Stringify หรือ Parse และตั้งค่ารูปแบบผลลัพธ์หากต้องการ
ตรวจดูผลลัพธ์ทางขวาแล้วคัดลอกไปใช้ในโค้ด เอกสาร หรือ config
ดาวน์โหลดเป็น `stringified.txt` หรือ `parsed.json` ได้หากต้องการ

คุณสมบัติ

สองโหมดในตัว: รองรับทั้ง Stringify และ Parse สำหรับการแปลงไปกลับ
escape อัตโนมัติ: จัดการเครื่องหมายคำพูด backslash ขึ้นบรรทัดใหม่ และ tab ให้อย่างปลอดภัย
เลือกเอาต์พุตได้หลายแบบ: สตริงพร้อมคำพูด JSON แบบจัดรูป และแบบบรรทัดเดียว
เหมาะกับการฝังในโค้ด: นำผลลัพธ์ไปใช้ใน JavaScript, Java, Python และ Go ได้ง่าย
เหมาะกับ URL และฐานข้อมูล: ช่วยเก็บหรือส่ง JSON ในรูปข้อความได้สะดวก
ประมวลผลในเครื่องทั้งหมด: serialize และ parse เกิดขึ้นในเบราว์เซอร์เท่านั้น

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

JavaScript: แปลง JSON เป็นสตริงสำหรับฝัง

javascript

const data = { name: 'Alice', age: 30, tags: ['dev', 'writer'] };
const json = JSON.stringify(data, null, 2);
const embedded = '"' + json
  .replace(/\\/g, '\\\\')
  .replace(/"/g, '\\"')
  .replace(/\n/g, '\\n')
  .replace(/\r/g, '\\r')
  .replace(/\t/g, '\\t') + '"';

Python: escape ซ้ำด้วย json.dumps

python

import json

data = {"name": "Alice", "age": 30}
pretty = json.dumps(data, indent=2, ensure_ascii=False)
embedded = json.dumps(pretty)
restored = json.loads(json.loads(embedded))

jq: แปลงไฟล์ JSON เป็นสตริง

bash

jq -Rs . data.json

echo '"{\"name\":\"Alice\"}"' | jq -r .

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

JSON Stringify เหมือนกับ JSON.stringify() ไหม?

หลักการ serialize เหมือนกัน แต่เครื่องมือนี้จะเติมเครื่องหมายคำพูดชั้นนอกและ escape ภายในให้พร้อมสำหรับการฝังใช้งาน

ต่างจาก JSON Escape อย่างไร?

JSON Stringify ทำงานกับทั้ง object JSON ส่วน JSON Escape ทำงานกับข้อความธรรมดาและอักขระพิเศษเท่านั้น

Stringify แล้ว JSON จะอ่านยากไหม?

ไม่ หากเลือก Pretty output ระบบยังคงการจัดย่อหน้าและเยื้องบรรทัดให้อ่านง่าย

Parse mode กู้ `\n` และ `\"` ได้ไหม?

ได้ ถ้าอินพุตถูก escape อย่างถูกต้อง ระบบจะถอดคำพูดชั้นนอกและคืนค่าอักขระพิเศษกลับมา

เอาผลลัพธ์ไปใส่ URL ได้เลยไหม?

ปลอดภัยในระดับ JSON แต่ถ้าใช้กับ URL ควรเข้ารหัสเพิ่มด้วย `encodeURIComponent`

ใช้กับ nested JSON ได้ไหม?

ได้ คุณสามารถแปลง JSON ชั้นในให้เป็น string แล้วเก็บไว้ในฟิลด์ของ JSON ชั้นนอก

ดาวน์โหลดผลลัพธ์เป็นไฟล์ได้ไหม?

ได้ Stringify mode จะดาวน์โหลดเป็น `stringified.txt` และ Parse mode จะเป็น `parsed.json`

ข้อมูลถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ ทุกอย่างทำงานในเบราว์เซอร์ จึงเหมาะกับ JSON ที่มีข้อมูลภายในหรือข้อมูลสำคัญ

การแก้ไขปัญหา

Stringify ขึ้น Invalid JSON

มักเกิดจาก comma ท้ายรายการ การใช้ single quote key ไม่มีเครื่องหมายคำพูด หรือมี comment แทรก

Parse แล้วผลลัพธ์ไม่เป็น JSON

อาจขาดเครื่องหมายคำพูดชั้นนอก หรือชุด backslash ภายในเสียหาย ลองตรวจอินพุตอีกครั้ง

วางในโค้ดแล้วเกิด SyntaxError

การแก้ backslash หรือคำพูดด้วยมือทำให้ผลลัพธ์เสียได้ง่าย ควรใช้ output จากเครื่องมือตรง ๆ

JSON ใหญ่ทำให้เบราว์เซอร์ช้า

เมื่อไฟล์มีขนาดหลาย MB หน่วยความจำจะเพิ่มขึ้นมาก ถ้าไฟล์ใหญ่ควรใช้ Node.js หรือ Python

ภาษาไทยหรือ emoji ไม่กลายเป็น `\uXXXX`

เป็นพฤติกรรมปกติของ JSON ที่เก็บ Unicode ได้โดยตรง ถ้าต้องการ `\uXXXX` ให้แปลงเพิ่มภายหลัง

อภิธานศัพท์

JSON.stringify: เมธอดในตัวของ JavaScript สำหรับ serialize ค่า JS ให้เป็นสตริง JSON
JSON.parse: เมธอดในตัวของ JavaScript สำหรับแปลงสตริง JSON กลับเป็น object หรือ array
Serialize: กระบวนการแปลงโครงสร้างข้อมูลในหน่วยความจำให้เป็นข้อความที่เก็บหรือส่งต่อได้
Deserialize: กระบวนการย้อนกลับจากสตริงกลับมาเป็นโครงสร้างข้อมูลเดิม
Escape: การเติม backslash หน้าอักขระพิเศษเพื่อไม่ให้ไวยากรณ์ภายนอกพัง
String Literal: ค่าข้อความคงที่ใน source code ที่ถูกครอบด้วยเครื่องหมายคำพูด
Double-Escape: การ escape ซ้ำอีกครั้งเมื่อสตริงที่เคย escape แล้วถูกฝังในอีกชั้นหนึ่ง
URL Encode: การแปลงอักขระพิเศษของ URL ให้อยู่ในรูป `%XX` ซึ่งเป็นคนละขั้นตอนกับ JSON escape

ตาราง escape อักขระของ JSON Stringify

อักขระเดิม	หลัง Stringify	ชื่อ	คำอธิบาย
`"`	`\"`	เครื่องหมายคำพูดคู่	ต้อง escape เพื่อไม่ให้ปิดสตริงชั้นนอก
`\`	`\\`	Backslash	อักขระ escape เองก็ต้องถูกแทนซ้ำ
`ขึ้นบรรทัดใหม่`	`\n`	Newline	จำเป็นเมื่อยัดข้อความหลายบรรทัดลงในสตริงบรรทัดเดียว
`Tab`	`\t`	Tab	escape อักขระควบคุม
`CR`	`\r`	Carriage Return	เป็นส่วนหนึ่งของการขึ้นบรรทัดใหม่แบบ Windows
`/`	`/`	Slash	โดยทั่วไปปล่อยไว้ได้

ความต่างระหว่าง JSON.stringify และเครื่องมือนี้

เครื่องมือ	อินพุต	เอาต์พุต	การใช้งานหลัก
JSON.stringify()	JS object	สตริง JSON มาตรฐาน	API, บันทึกไฟล์, serialize ทั่วไป
Stringify mode ของเครื่องมือนี้	JSON object	สตริงพร้อมฝังที่มีคำพูดชั้นนอกและ escape	โค้ด, DB, URL, nested JSON
Parse mode ของเครื่องมือนี้	สตริงที่ escape แล้ว	JSON มาตรฐาน	กู้ JSON จาก log หรือฐานข้อมูล
JSON Escape	ข้อความธรรมดา	สตริงที่ escape เฉพาะอักขระพิเศษ	ทำให้ข้อความปลอดภัยก่อนฝัง