Case Converter

แปลงสตริงใดก็ได้เป็นรูปแบบการตั้งชื่อ 11 แบบในครั้งเดียว — camelCase, PascalCase, snake_case, kebab-case และอีกมากมาย พร้อมโหมดแบทช์ JSON-keys ที่เขียนคีย์ทุกตัวใหม่แบบเรียกซ้ำ ทำงานทั้งหมดในเบราว์เซอร์ของคุณ

Case Converter — TL;DR

ทั้งหมดเป็นวิธีเขียน identifier (หรือชื่อไฟล์ URL คลาส CSS) ที่มีหลายคำโดยไม่มีช่องว่าง camelCase ขึ้นต้นทุกคำหลังคำแรกด้วยตัวพิมพ์ใหญ่ (`userFirstName`) ใช้ใน JavaScript, Java, Swift snake_case ใช้ตัวพิมพ์เล็กทั้งหมดและเชื่อมด้วย underscore (`user_first_name`) ใช้ใน Python, Ruby, SQL kebab-case ใช้ขีดกลาง (`user-first-name`) ใช้ใน CSS, HTML, URL slug, แฟลก command-line PascalCase คือ camelCase ที่ตัวอักษรแรกเป็นตัวพิมพ์ใหญ่ด้วย (`UserFirstName`) ใช้สำหรับชื่อคลาส / ชนิดข้อมูลในหลายภาษา

ตัวแยกโทเคนใช้กฎขอบเขตสองข้อ: เล็กไปใหญ่ (`a` ตามด้วย `B` = แยก) และ caps แล้วตามด้วย Title (ลำดับตัวพิมพ์ใหญ่ตามด้วยตัวพิมพ์เล็กจะแยกก่อนตัวพิมพ์ใหญ่ตัวสุดท้าย) ดังนั้น `XMLHttpRequest` จะกลายเป็น `[XML, Http, Request]` → `xml_http_request` / `xmlHttpRequest` / `XmlHttpRequest` ส่วน `userIDToken` กลายเป็น `[user, ID, Token]` → `user_id_token` ซึ่งตรงกับสิ่งที่คู่มือสไตล์ของภาษาส่วนใหญ่แนะนำ

Identifier และ JSON ไม่เคยออกจากอุปกรณ์ของคุณ เปิด DevTools → Network แล้วคุณจะเห็นว่าไม่มี request ออกไปข้างนอกระหว่างการแปลงหรือคัดลอกเลย

โหมด

อินพุต

11 รูปแบบการตั้งชื่อ ในการวางครั้งเดียว

ตั้งแต่ camelCase / snake_case คลาสสิกไปจนถึง dot.case / path/case — พร้อมโหมดแบทช์ JSON-keys สำหรับเปลี่ยนชื่อคีย์ทุกตัวในออบเจ็กต์ที่ซ้อนกัน

11 รูปแบบ case พร้อมกันทั้งหมด

camelCase, PascalCase, snake_case, CONSTANT_CASE, kebab-case, COBOL-CASE, dot.case, path/case, Title Case, Sentence case, UPPERCASE, lowercase วางครั้งเดียว เห็นเอาต์พุตทุกแบบทันที

การแยกโทเคนอัจฉริยะ

แยก identifier ได้ถูกต้องในทุกรูปแบบอินพุต — `XMLHttpRequest` → `xml_http_request`, `userIDToken` → `user_id_token` จัดการกับตัวย่อ ตัวเลข และตัวคั่นผสม (_, -, ., /) ได้โดยไม่สับสน

โหมดแบทช์ JSON-keys

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

คัดลอกในคลิกเดียว

เอาต์พุตแต่ละแถวมีปุ่มคัดลอกของตัวเอง — คลิกแล้วค่าจะอยู่ในคลิปบอร์ดของคุณ มีการยืนยันด้วยภาพ ไม่มี toast รบกวน

ออกแบบมาให้เป็นส่วนตัว

การแปลงทุกครั้งทำงานด้วย JavaScript บนอุปกรณ์ของคุณ ไม่มี identifier, ไม่มี JSON, ไม่มีกิจกรรมคลิปบอร์ดถูกส่งออกไป เปิด DevTools → Network และตรวจสอบได้ว่าไม่มี request ออกไปข้างนอกเลย

เล็ก + เร็ว

JavaScript ล้วน ไม่มี framework runtime การโหลดครั้งแรกต่ำกว่า 25 KB หลัง gzip การแปลงทั้ง 11 แบบสำหรับสตริงใด ๆ เสร็จภายในเวลาน้อยกว่า 1 ms

วิธีใช้ตัวแปลง

สองโหมด — สตริงเดี่ยวและแบทช์ JSON-keys

1

เลือกโหมด

สตริงเดี่ยว สำหรับ identifier หรือวลีหนึ่งตัว — พิมพ์ / วางครั้งเดียว เห็นเอาต์พุตทั้ง 11 รูปแบบ JSON keys (แบทช์) เมื่อคุณต้องการแปลงคีย์ทุกตัวในการตอบกลับ API ที่ซ้อนกันหรือไฟล์ config
2

วางอินพุตของคุณ

โหมดสตริงเดี่ยวรับอินพุตใดก็ได้ — `userFirstName`, `user_first_name`, `user-first-name`, `USER FIRST NAME` แม้แต่ `XMLHttpRequest` ตัวแยกโทเคนจะแยกได้ถูกต้องและรวมใหม่สำหรับเอาต์พุตทุกแบบ โหมด JSON รับออบเจ็กต์ JSON ที่ถูกต้องใด ๆ — ความลึกไม่สำคัญ
3

เลือกรูปแบบเป้าหมาย

ในโหมดสตริงเดี่ยว เอาต์พุตทั้ง 11 แบบจะปรากฏพร้อมกัน — เลือกอันที่คุณต้องการ ในโหมด JSON เลือกหนึ่ง case เป้าหมายจาก dropdown คีย์ทุกตัวในออบเจ็กต์จะถูกเขียนใหม่ในรูปแบบนั้น
4

คัดลอกแล้ววาง

คลิกไอคอนคัดลอกข้างเอาต์พุตแถวใดก็ได้เพื่อส่งไปยังคลิปบอร์ด สำหรับเอาต์พุต JSON ให้คัดลอกบล็อกผลลัพธ์ทั้งหมด — วางลงในโค้ดเบสหรือ API client ของคุณได้เลย

สร้างมาเพื่อ code review, refactor และงาน plumbing API

สี่สถานการณ์ทั่วไปที่การวางครั้งเดียวและได้ทุกรูปแบบดีกว่าการเปลี่ยนชื่อด้วยมือ

ขอบเขต Backend ↔ Frontend

Backend ให้คุณ `user_first_name` แต่ frontend ต้องการ `userFirstName` วาง คัดลอก วาง — เสร็จ ใช้โหมดแบทช์ JSON เพื่อแปลงคีย์ทุกตัวในตัวอย่าง API response ในขั้นตอนเดียว (จากนั้นเขียน template codegen จากผลลัพธ์)

Refactor ข้ามภาษา

พอร์ตไลบรารี Python ไป JavaScript? นำ identifier snake_case จากซอร์ส Python ไปรันผ่านเอาต์พุต camelCase วางผลลัพธ์ลงในพอร์ต JS ของคุณ ตัวแยกโทเคนอัจฉริยะจัดการ `__double_underscore` และตัวเลขท้ายได้โดยไม่พัง

ENV vars ↔ runtime config

แปลง `MY_AWESOME_FEATURE_FLAG` (รูปแบบ env var) เป็น `myAwesomeFeatureFlag` (ตัวแปร JS) หรือ `my_awesome_feature_flag` (Python) การแปลงไปกลับ CONSTANT_CASE / camelCase / snake_case แม่นยำสมบูรณ์

การตั้งชื่อ CSS / ไฟล์

BEM ต้องใช้ kebab-case: `.user-card__avatar--large` ได้ชื่อตัวแปร JS จากนักออกแบบ (`userCardAvatarLarge`) ไหม? แปลงในขั้นตอนเดียว มีประโยชน์สำหรับ utility ของ Tailwind, ชื่อ npm package, URL slug และชื่อแฟลก CLI — ทั้งหมดนี้นิยมใช้ kebab-case

100% ส่วนตัว — ทำงานในเบราว์เซอร์ของคุณ

การแยกโทเคน การแปลง case และการเดินผ่าน JSON ทั้งหมดทำงานเป็น JavaScript บนเครื่องของคุณ — มองเห็นได้ในซอร์สของหน้า
การเขียนคลิปบอร์ดใช้ API มาตรฐาน navigator.clipboard.writeText ไม่มีการบันทึกใด ๆ
ไม่มีล็อกอิน ไม่มี telemetry บนค่า identifier ไม่มี API บุคคลที่สาม เราใช้คุกกี้เพียงหนึ่งตัวสำหรับสถานะ cookie-consent และอีกหนึ่งตัวสำหรับการตั้งค่าภาษา

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

บทความที่คัดสรรเกี่ยวกับรูปแบบการตั้งชื่อ การออกแบบ API และ refactor

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

camelCase, snake_case และ kebab-case ต่างกันอย่างไร?

ตัวแยกโทเคนอัจฉริยะจัดการกับตัวย่ออย่างไร?

โหมดแบทช์ JSON-keys ทำอะไร?

วางออบเจ็กต์ JSON — แม้จะซ้อนกันลึก — แล้วเลือกรูปแบบ case เป้าหมาย เครื่องมือจะเดินผ่านต้นไม้ทั้งหมดแบบ depth-first แปลงคีย์ทุกตัว (รวมถึงคีย์ภายใน array) และส่งออก JSON ที่สร้างขึ้นใหม่ Array, ชนิดข้อมูล (number / boolean / null) และโครงสร้างจะถูกรักษาไว้อย่างแม่นยำ เปิด "แปลงค่าสตริงด้วย" เพื่อเขียนเนื้อหาของฟิลด์ที่มีค่าสตริงทุกตัวใหม่ผ่านตัวแยกโทเคนเดียวกัน

ฉันควรใช้รูปแบบใดสำหรับโปรเจกต์?

ทำตามรูปแบบหลักของภาษาของคุณก่อน แล้วตามด้วยทีมของคุณ ค่าเริ่มต้น: camelCase สำหรับ JS / Java / Swift / Kotlin / Go (ชื่อ exported ใช้ PascalCase), snake_case สำหรับ Python / Ruby / Rust / คอลัมน์ SQL, kebab-case สำหรับคลาส CSS / แอตทริบิวต์ HTML / path ของ URL / npm package / แฟลก CLI, SCREAMING_SNAKE_CASE สำหรับ environment variable และค่าคงที่ของภาษา เมื่อแปลงระหว่างเลเยอร์ (snake_case API → camelCase frontend) ให้เลือกขอบเขตเดียวและรักษาความสม่ำเสมอของระบบที่เหลือ

มีอะไรถูกส่งไปยังเซิร์ฟเวอร์ของคุณหรือไม่?

ไม่ การแยกโทเคน การแปลงทุกครั้ง และโหมดแบทช์ JSON-keys ทั้งหมดทำงานเป็น JavaScript ในเบราว์เซอร์ของคุณ เปิด DevTools → Network แล้วคุณจะเห็นว่าไม่มี request ออกไปข้างนอกระหว่างการใช้งานเลย เราใช้ cookie หนึ่งตัวสำหรับสถานะ cookie-consent และอีกหนึ่งตัวสำหรับการตั้งค่าภาษา เท่านั้น