ตัวแปลง JSON ↔ YAML — แปลงระหว่าง JSON และ YAML ออนไลน์ _

การแปลง JSON ↔ YAML คืออะไร?

JSON (JavaScript Object Notation, RFC 8259) เป็นรูปแบบข้อความที่เข้มงวดและคั่นด้วยวงเล็บปีกกาสำหรับข้อมูลแบบมีโครงสร้าง; YAML (YAML Ain't Markup Language เวอร์ชัน 1.2) เป็น superset ของ JSON ที่ใช้การเยื้อง การขึ้นบรรทัด และไวยากรณ์ที่คนอ่านได้ง่ายสำหรับโมเดลค่าชุดเดียวกัน การแปลงระหว่างทั้งสองช่วยให้คุณหมุนค่าคอนฟิกชุดเดียวกันระหว่างรูปแบบที่เหมาะกับเครื่อง (JSON สำหรับ API การตรวจสอบ schema การแปลงด้วยโปรแกรม) และรูปแบบที่เหมาะกับมนุษย์ (YAML สำหรับ code review, Kubernetes manifests, GitHub Actions workflows) โดยไม่ต้องพิมพ์คีย์ใหม่แม้แต่คีย์เดียว

การแปลง JSON ↔ YAML ทำงานอย่างไร?

ทุกการแปลงทำงานภายในเบราว์เซอร์ของคุณโดยใช้ไลบรารี js-yaml ที่มาพร้อมเครื่องมือ (MIT เวอร์ชัน 4.1.0) ขั้นตอนหลักคือ:

1. ตัวเลือกโหมด (ตรวจจับอัตโนมัติ / JSON → YAML / YAML → JSON) ตัดสินว่าไปป์ไลน์ใดจะทำงาน ในโหมดตรวจจับอัตโนมัติ อักขระที่ไม่ใช่ช่องว่างตัวแรกของอินพุตจะเลือกทิศทาง — { หรือ [ หมายถึง JSON; อย่างอื่นหมายถึง YAML
2. JSON → YAML: JSON.parse ตรวจสอบความถูกต้องของอินพุตและสร้างค่า JavaScript; jsyaml.dump(value, { indent, lineWidth: -1, sortKeys: false }) เขียนรูปแบบ YAML 1.2 เมื่อเปิดหลายเอกสาร อาร์เรย์อินพุตจะถูก dump หนึ่งองค์ประกอบต่อหนึ่งเอกสารและเชื่อมด้วยตัวคั่น ---
3. YAML → JSON: jsyaml.loadAll แยกวิเคราะห์ทุกเอกสารในอินพุต (จัดการตัวคั่น --- โดยอัตโนมัติ) เป็นอาร์เรย์ อินพุตเอกสารเดี่ยวจะถูก unwrap เพื่อให้ผลลัพธ์ JSON เป็นตัวเอกสารเอง ไม่ใช่อาร์เรย์ที่มีองค์ประกอบเดียว
4. การเยื้อง (2 หรือ 4 ช่องว่าง) และการพิมพ์สวยปรับได้ การปิดพิมพ์สวยจะปล่อย JSON แบบย่อผ่าน JSON.stringify(value) โดยไม่มีช่องว่างเลย
5. ผลลัพธ์ถูกเขียนไปยัง textarea แบบอ่านอย่างเดียว เมื่อ YAML แยกวิเคราะห์ล้มเหลว ข้อความข้อผิดพลาดจะรวมหมายเลขบรรทัดและคอลัมน์แบบเริ่มจาก 1 ที่ e.mark ของ js-yaml รายงาน เพื่อให้คุณกระโดดตรงไปยังจุดบกพร่อง

ทำไมต้องแปลง JSON และ YAML ด้วยเครื่องมือนี้?

• ความเป็นส่วนตัว: ทุกการแยกวิเคราะห์ แปลง และปล่อยผลลัพธ์เกิดขึ้นในเบราว์เซอร์ของคุณ ข้อมูล — รวมถึง Kubernetes secrets, JWT ที่ลงนาม และคอนฟิกเฉพาะ — ไม่เคยเข้าถึงเซิร์ฟเวอร์ของเรา
• YAML หลายเอกสาร: jsyaml.loadAll จดจำตัวคั่น --- และคืนอาร์เรย์ของเอกสาร ซึ่งตัวแปลง unwrap สำหรับกรณีเอกสารเดี่ยว หรือเก็บไว้เป็นอาร์เรย์ JSON สำหรับกรณีหลายเอกสาร
• anchor และ alias ถูกแก้ไข: กลไก &anchor / *alias ของ YAML ถูกจัดการโดย schema เริ่มต้นของ js-yaml ค่าที่ถูกกำหนดครั้งเดียวและอ้างอิงสองครั้งจะ round-trip เป็นออบเจ็กต์ JSON ที่ทุกการอ้างอิงมีค่าเท่ากัน
• ไม่ใช้ CDN ไม่มี telemetry: ไลบรารี js-yaml.min.js ถูกส่งจาก origin เดียวกับหน้าเว็บ ดังนั้นเครื่องมือทำงานออฟไลน์ หลัง proxy องค์กร และในสภาพแวดล้อม air-gapped

การใช้งานทั่วไปของการแปลง JSON ↔ YAML มีอะไรบ้าง?

การหมุนระหว่าง JSON กับ YAML ปรากฏใน DevOps วิศวกรรมแพลตฟอร์ม และเครื่องมือ API:

• Kubernetes manifests: แปลง YAML Deployment, ConfigMap หรือ HelmRelease เป็น JSON เพื่อให้ตัวตรวจสอบนโยบายภายใน (Joi, Ajv, OPA Rego) สามารถ lint แบบโปรแกรมได้ จากนั้นกลับเป็น YAML เพื่อ apply คลัสเตอร์
• เวิร์กโฟลว์ CI/CD: round-trip workflow.yml ของ GitHub Actions ผ่าน JSON เพื่อให้ code-generator เขียน matrix หรือ dependencies ของงานใหม่ จากนั้นปล่อย YAML ที่ทำความสะอาดแล้วสำหรับ PR
• สเปก OpenAPI: วาง openapi.json JSON จากเอกสารที่สร้างอัตโนมัติจาก backend และแปลงเป็น openapi.yaml สำหรับการอ้างอิงที่มนุษย์แก้ไขซึ่งเช็คอินเข้า repo

ตัวอย่างการ round-trip JSON ↔ YAML เป็นอย่างไร?

การวาง {"apiVersion":"apps/v1","kind":"Deployment","metadata":{"name":"web"},"spec":{"replicas":3,"selector":{"matchLabels":{"app":"web"}}}} แล้วกด CONVERT ในโหมด JSON → YAML จะได้ YAML แปดบรรทัดที่เยื้องแล้ว โดยบรรทัดแรกเป็น apiVersion: apps/v1 การป้อน YAML นั้นกลับเข้าโหมด YAML → JSON ด้วยพิมพ์สวยเปิดจะคืนออบเจ็กต์เดิมไบต์ต่อไบต์หลัง JSON.stringify(value, null, 2) ที่เสถียร โดยคงลำดับคีย์ไว้เพราะ schema เริ่มต้นของ js-yaml ให้ความสำคัญกับ insertion order ทั้งสองทิศทาง

ตัวแปลง JSON ↔ YAML นี้ทำงานในเบราว์เซอร์ของฉันทั้งหมดหรือเปล่า?

ใช่ ทุกการแยกวิเคราะห์ แปลง และปล่อยผลลัพธ์ทำงานในเครื่องเป็น JavaScript ภายในแท็บเบราว์เซอร์ของคุณ ไลบรารี js-yaml ที่มาพร้อมเครื่องมือถูกส่งจาก origin เดียวกับหน้า — ไม่มี CDN ไม่มี fetch ไม่มี XMLHttpRequest ไม่มี navigator.sendBeacon บนอินพุต เครื่องมือยังทำงานออฟไลน์เมื่อหน้าโหลดแล้ว เพราะเป็นบันเดิล HTML/CSS/JS แบบสแตติกที่มีสำเนาไลบรารี vendor วางอยู่ข้าง ๆ Kubernetes secrets, JWT payload, CloudFormation YAML ที่ลงนาม และคอนฟิกเฉพาะยังคงอยู่บนอุปกรณ์ของคุณ

ตัวแปลงจัดการ YAML หลายเอกสารอย่างไร?

YAML รองรับเอกสารหลายชุดในสตรีมเดียวที่คั่นด้วยบรรทัดที่มี --- เท่านั้น บน YAML → JSON ตัวแปลงเรียก jsyaml.loadAll ซึ่งคืนทุกเอกสารเป็นค่า JavaScript หากพบเอกสารเดียว ผลลัพธ์ JSON คือเอกสารนั้นโดยตรง หากพบสองหรือมากกว่า ผลลัพธ์ JSON เป็นอาร์เรย์ บน JSON → YAML เมื่ออินพุตเป็นอาร์เรย์ JSON และสวิตช์หลายเอกสารเปิดอยู่ แต่ละองค์ประกอบของอาร์เรย์จะถูกปล่อยเป็นเอกสารของตัวเองพร้อมตัวคั่น --- ระหว่างกัน — มีประโยชน์ในการสร้าง bundle ที่เป็นมิตรกับ kubectl apply จากอาร์เรย์ JSON ของ resource

anchor และ alias ของ YAML รองรับหรือไม่?

ใช่ — การกำหนด &anchor และการอ้างอิง *alias ถูกแก้ไขโดย schema เริ่มต้นของ js-yaml ในขั้นตอนโหลด อินพุต YAML เช่น defaults: &d\n retries: 3\n timeout: 30\njob_a:\n <<: *d\njob_b:\n <<: *d แยกวิเคราะห์เป็นออบเจ็กต์ JSON ที่ job_a และ job_b ทั้งคู่มี retries: 3, timeout: 30 คีย์ merge << (ส่วนขยาย YAML 1.1 ที่ js-yaml ยังคงเคารพ) รองรับบน schema เริ่มต้นด้วย

คอมเมนต์ YAML จะถูกเก็บไว้เมื่อแปลงเป็น JSON และกลับหรือไม่?

ไม่ — js-yaml ตัดคอมเมนต์ออกระหว่างขั้นตอนแยกวิเคราะห์ ดังนั้นการ round-trip YAML → JSON → YAML จะสูญเสียทุกบรรทัดที่ขึ้นต้นด้วย # นี่เป็นข้อจำกัดที่รู้กันของโมเดล load/dump หากการเก็บคอมเมนต์สำคัญ ให้ใช้ไลบรารีที่รับรู้คอมเมนต์เช่นแพ็กเกจ npm yaml (ที่ให้ API CST + AST ที่ออกแบบมาเก็บ trivia) แทน js-yaml สำหรับ workflow แปลงคอนฟิกส่วนใหญ่ การยอมแลกนี้รับได้: YAML ที่ round-trip รักษาทุกคีย์ ค่า anchor และ alias ไว้ เพียงไม่มีคอมเมนต์ที่มนุษย์เขียน

เกิดอะไรขึ้นกับแท็ก YAML แบบกำหนดเอง?

ตัวแปลงใช้ DEFAULT_SCHEMA ของ js-yaml ซึ่งเข้าใจ !!str, !!int, !!float, !!bool, !!null, !!seq, !!map, !!binary และ !!timestamp — ทุกแท็กใน schema core ของ YAML 1.2 และ JSON แท็กที่กำหนดเองหรือเฉพาะแอปพลิเคชัน (เช่น !Ref ใน CloudFormation, !vault ใน Ansible) จะไม่รู้จักและปรากฏเป็นข้อผิดพลาดที่ชัดเจนซึ่งอ้างถึงแท็กที่ไม่รองรับ สำหรับ CloudFormation โดยเฉพาะ ใช้ flow aws cloudformation package + --output-template-file เพื่อขยายแท็กที่กำหนดเองก่อนวางลงในตัวแปลงนี้

ตัวแปลง JSON ↔ YAML นี้มาพร้อม js-yaml@4.1.0 ที่บันเดิลที่ origin เดียวกัน รองรับสตรีมหลายเอกสารและ anchor/alias ทันที และรายงานข้อผิดพลาดการแยกวิเคราะห์ YAML พร้อมบรรทัดและคอลัมน์เพื่อให้คุณซ่อม source ได้ ไม่มีการอัปโหลด ไม่มี CDN ไม่มี telemetry — ทุกไบต์อยู่ในเบราว์เซอร์ของคุณ