camelCase กับ snake_case กับ kebab-case ควรใช้แบบไหน

camelCase กับ snake_case กับ kebab-case ขึ้นอยู่กับว่าชื่อนั้นอยู่ที่ไหนเป็นหลัก JavaScript และ Java ใช้ camelCase (firstName) Python, Ruby และ SQL ใช้ snake_case (first_name) ส่วน CSS, แอตทริบิวต์ของ HTML และ URL ใช้ kebab-case (first-name) ให้ทำตามข้อตกลงของภาษานั้นและคู่มือสไตล์ของทีมคุณ หากต้องการเปลี่ยนรูปแบบตัวอักษรของข้อความ ตัวแปลงตัวพิมพ์ฟรี และ ตัวสร้าง URL slug ฟรี ช่วยทำงานส่วนใหญ่ได้ในเบราว์เซอร์ของคุณ

camelCase กับ snake_case กับ kebab-case เมื่อเทียบกัน

รูปแบบ	ตัวอย่าง	ที่คุณจะเห็น
camelCase	userFirstName	ตัวแปรและฟังก์ชันใน JavaScript และ TypeScript, เมธอดของ Java, JSON จาก Web API หลายตัว
PascalCase	UserFirstName	ชื่อคลาสในภาษาส่วนใหญ่, คอมโพเนนต์ React, เมธอดของ C#
snake_case	user_first_name	ตัวแปรและฟังก์ชันของ Python, Ruby, ชื่อคอลัมน์ SQL, JSON API หลายตัว
SCREAMING_SNAKE_CASE	USER_FIRST_NAME	ค่าคงที่ในหลายภาษา, ตัวแปรสภาพแวดล้อม
kebab-case	user-first-name	พร็อพเพอร์ตี้และชื่อคลาสของ CSS, แอตทริบิวต์ HTML, URL, ชื่อไฟล์, แฟล็ก CLI

ชื่อเหล่านี้มาจากรูปร่างของมัน camelCase มีส่วนนูนเป็นตัวพิมพ์ใหญ่ snake_case วางเรียบไปตามขีดล่าง และคำใน kebab-case ถูกร้อยไว้ด้วยขีดกลาง

แต่ละภาษาใช้แบบไหน

JavaScript และ TypeScript ตัวแปรและฟังก์ชันใช้ camelCase (getUserName) คลาสและคอมโพเนนต์ React ใช้ PascalCase (UserCard) และค่าคงที่มักเป็น SCREAMING_SNAKE_CASE (MAX_RETRIES) ฟังก์ชันในตัวของภาษาเองก็ใช้รูปแบบนี้ เช่น getElementById และ toLowerCase

Python PEP 8 ซึ่งเป็นคู่มือสไตล์ของ Python ใช้ snake_case กับฟังก์ชัน ตัวแปร และชื่อโมดูล ใช้ CapWords (PascalCase) กับคลาส และใช้ตัวพิมพ์ใหญ่พร้อมขีดล่างกับค่าคงที่ การเขียน getUserName ใน Python ใช้งานได้ แต่นักพัฒนา Python ทุกคนที่อ่านจะรู้สึกว่าแปลกตา

CSS และ HTML พร็อพเพอร์ตี้ของ CSS เป็น kebab-case (background-color, font-size) และระบบตั้งชื่อคลาสส่วนใหญ่ก็ทำตาม (.nav-item, .card-title) แอตทริบิวต์ data- ของ HTML ก็เป็น kebab-case เช่นกัน และเบราว์เซอร์แปลงให้ JavaScript ใช้ได้: data-user-id กลายเป็น element.dataset.userId บรรทัดเดียวนี้สรุปได้ดีว่าทำไมจึงมีสองข้อตกลงนี้

SQL และฐานข้อมูล ชื่อคอลัมน์และตารางมักเป็น snake_case (created_at, order_items) ฐานข้อมูลหลายตัวจะแปลงชื่อที่ไม่มีเครื่องหมายคำพูดให้เป็นตัวพิมพ์เดียวกัน ดังนั้น createdAt อาจกลายเป็น createdat อย่างเงียบๆ ถ้าคุณไม่ใส่เครื่องหมายคำพูดทุกครั้ง snake_case จึงช่วยหลีกเลี่ยงปัญหานี้

URL และชื่อไฟล์ ใช้ kebab-case แนวทางโครงสร้าง URL ของ Google แนะนำให้ใช้ขีดกลางแทนขีดล่างในการคั่นคำ เพราะขีดกลางบอกขอบเขตของคำได้ชัดเจน การใช้ตัวพิมพ์เล็กยังช่วยป้องกันลิงก์เสียบนเซิร์ฟเวอร์ที่มองว่า About.html กับ about.html เป็นคนละไฟล์ ดู URL slug คืออะไร และ แนวทางปฏิบัติที่ดีสำหรับ URL slug

JSON และ API ไม่มีกฎตายตัว API ที่เน้น JavaScript หลายตัวใช้ camelCase และ back end ของ Python หรือ Ruby หลายตัวส่งค่ากลับเป็น snake_case เลือกหนึ่งรูปแบบต่อหนึ่ง API และอย่าผสมกันในการตอบกลับเดียวกัน

อ่านแบบไหนง่ายที่สุด?

ทั้งสามแบบอ่านได้ทั้งหมดเมื่อคุ้นเคยแล้ว ความแตกต่างเชิงปฏิบัติมีดังนี้:

• snake_case และ kebab-case เว้นช่องว่างระหว่างคำได้ชัดเจน ช่วยกับชื่อยาวและตัวย่อ (html_parser กับ htmlParser กับ HTMLParser)
• camelCase สั้นกว่า และไม่ต้องใช้อักขระเพิ่ม
• kebab-case ใช้เป็นชื่อตัวแปรในภาษาส่วนใหญ่ไม่ได้ เพราะ user-name จะถูกอ่านเป็น user ลบ name
• ดับเบิลคลิก จะเลือกชื่อ snake_case หรือ camelCase ทั้งชื่อได้ในโปรแกรมแก้ไขส่วนใหญ่ แต่มักหยุดที่ขีดกลางในชื่อ kebab-case

กฎที่แท้จริงคือความสม่ำเสมอ ไฟล์ที่ผสม userName, user_name และ UserName อ่านยากกว่าการใช้รูปแบบเดียวทั้งไฟล์

การแปลงระหว่างรูปแบบ

คุณจะต้องแปลงเมื่อย้ายข้อมูลระหว่างชั้นต่าง ๆ เช่น created_at ของ Python API กลายเป็น createdAt ใน JavaScript ชื่อหน้าเว็บกลายเป็น URL หรือชื่อการตั้งค่ากลายเป็นตัวแปรสภาพแวดล้อม

เป็น kebab-case หรือ snake_case: ใช้ตัวสร้าง slug วางคำ หนึ่งชื่อต่อหนึ่งบรรทัด แล้วเลือก ขีดกลาง (-) สำหรับ kebab-case หรือ ขีดล่าง (_) สำหรับ snake_case เครื่องมือนี้จะแปลงทุกอย่างเป็นตัวพิมพ์เล็ก เปลี่ยนตัวอักษรที่มีเครื่องหมายกำกับเป็นตัวอักษรธรรมดา และตัดสัญลักษณ์ทิ้ง มันถือว่าสัญลักษณ์ทุกตัวเป็นจุดแบ่งคำ ดังนั้น user_first_name จะกลายเป็น user-first-name และกลับไปเป็นเดิมได้ อย่างไรก็ตาม มันไม่แยก camelCase: userFirstName จะออกมาเป็น userfirstname ให้เว้นช่องว่างระหว่างคำก่อน

เป็น SCREAMING_SNAKE_CASE ทำ snake_case ก่อนในตัวสร้าง slug แล้ววางในตัวแปลงตัวพิมพ์ฟรี จากนั้นคลิก ตัวพิมพ์ใหญ่ ในทางกลับกัน ตัวพิมพ์เล็ก จะแปลง MAX_RETRIES เป็น max_retries

เป็น camelCase หรือ PascalCase ไม่มีปุ่มเดียวที่ทำได้ทันที วิธีที่เร็วที่สุดคือ: พิมพ์คำโดยเว้นช่องว่าง คลิก ขึ้นต้นทุกคำด้วยตัวพิมพ์ใหญ่ ในตัวแปลงตัวพิมพ์ (user first name กลายเป็น User First Name) จากนั้นลบช่องว่างออกสำหรับ PascalCase และเปลี่ยนตัวอักษรแรกเป็นตัวพิมพ์เล็กสำหรับ camelCase

ชื่อจำนวนมากพร้อมกันในโค้ด สำหรับการเปลี่ยนชื่อครั้งใหญ่ ให้ใช้การค้นหาและแทนที่ของโปรแกรมแก้ไขโค้ดพร้อม regular expression ทดสอบรูปแบบก่อนในตัวทดสอบ regex ฟรี ตัวอย่างเช่น _([a-z]) จะหาขีดล่างทุกตัวที่ตามด้วยตัวอักษร ซึ่งเป็นตำแหน่งที่ snake_case ต้องใช้ตัวพิมพ์ใหญ่เมื่อเปลี่ยนเป็น camelCase โปรแกรมแก้ไขหลายตัวทำให้ตัวอักษรที่จับได้เป็นตัวพิมพ์ใหญ่ในส่วนแทนที่ได้ ตรวจสอบเอกสารของโปรแกรมแก้ไขคุณสำหรับไวยากรณ์

สิ่งที่ควรระวังขณะแปลง

• ตัวย่อ ตัดสินใจว่าจะใช้ userId หรือ userID, HtmlParser หรือ HTMLParser และยึดตามนั้น
• ตัวเลข address_line_2 แปลงได้ถูกต้อง addressLine2 ก็ใช้ได้ เพียงอย่าทิ้งตัวเลข
• ชื่อที่คนอื่นใช้ การเปลี่ยนชื่อฟิลด์ JSON หรือ URL จะทำให้ผู้ที่ใช้งานอยู่เดิมเสีย สำหรับ URL ให้เพิ่มการเปลี่ยนเส้นทาง และสำหรับ API ให้ชื่อฟิลด์เดิมยังใช้ได้ต่อไปสักระยะ

แปลงข้อความของคุณ

ใช้ตัวแปลงตัวพิมพ์ฟรี สำหรับ ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก และขึ้นต้นทุกคำด้วยตัวพิมพ์ใหญ่ และใช้ตัวสร้าง slug สำหรับ kebab-case และ snake_case ทั้งสองทำงานในเบราว์เซอร์ และไม่มีข้อความที่คุณวางออกจากอุปกรณ์ของคุณ