TL
Tool Lab
💰Donate
💰Donate

JavaScript Beautifier

Format, beautify, and minify JavaScript

อินพุต
เอาต์พุต

เกี่ยวกับเครื่องมือนี้

JavaScript Beautifier จัดรูปแบบ JavaScript ที่บีบอัดหรืออ่านไม่ได้ให้เป็นโค้ดที่สะอาดและมีการย่อหน้าที่ถูกต้อง รองรับไวยากรณ์ ES2022+ มาตรฐานทั้งหมด รวมถึงฟังก์ชันลูกศร template literal การแตกโครงสร้าง async/await และไวยากรณ์คลาส ตัวจัดรูปแบบเก็บรักษาเนื้อหาสตริงอย่างแม่นยำ รวมถึงอักขระพิเศษ และข้ามโค้ดภายในคอมเมนต์ได้อย่างถูกต้อง

โหมดบีบอัดลบคอมเมนต์และช่องว่างที่ไม่จำเป็น โดยรักษาช่องว่างเดียวระหว่างตัวระบุเพื่อหลีกเลี่ยงข้อผิดพลาดทางไวยากรณ์ การประมวลผลทั้งหมดทำงานในเบราว์เซอร์ — ไม่มีโค้ดถูกส่งไปยังเซิร์ฟเวอร์

วิธีใช้งาน

  1. วาง JavaScript ที่บีบอัดหรือยุ่งเหยิงในแผงอินพุต
  2. เลือกการย่อหน้าที่ต้องการ (2 หรือ 4 ช่องว่าง)
  3. คลิก "จัดรูปแบบ" เพื่อจัดรูปแบบ หรือ "บีบอัด" เพื่อบีบอัด
  4. คลิกคัดลอกเพื่อคัดลอกผลลัพธ์ไปยังคลิปบอร์ด

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

นักพัฒนาใช้เครื่องมือนี้เพื่อตรวจสอบและดีบัก JavaScript ที่บีบอัดจาก bundle production, npm package หรือส่วนขยายเบราว์เซอร์ เหมาะสำหรับการอ่าน script บุคคลที่สามที่ถูกทำให้สับสน ทำความเข้าใจ jQuery plugin และจัดรูปแบบโค้ดที่คัดลอกจาก Stack Overflow โหมดบีบอัดลดขนาด script สำหรับการฝัง inline ใน HTML โดยไม่มี build tool

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

  • รองรับ TypeScript หรือไม่?ไวยากรณ์ TypeScript ส่วนใหญ่เป็น superset ของ JavaScript TypeScript ง่ายๆ (ประเภท, interface, generic) จะถูกจัดรูปแบบอย่างถูกต้อง สำหรับการรองรับ TypeScript เต็มรูปแบบ ให้ใช้ TypeScript Beautifier
  • รองรับ JSX หรือไม่?ไม่รองรับโดยดั้งเดิม ไวยากรณ์ JSX ที่มีวงเล็บมุมอาจไม่ถูกจัดรูปแบบอย่างถูกต้อง ใช้ตัวจัดรูปแบบ JSX เฉพาะสำหรับไฟล์ component React
  • โค้ดของฉันปลอดภัยหรือไม่?การประมวลผลทั้งหมดเป็นภายในในเบราว์เซอร์ของคุณ ไม่มีโค้ดใดถูกส่งไปยังเซิร์ฟเวอร์ใดๆ