Text Case คืออะไร? คู่มือ Naming Conventions สำหรับนักพัฒนา

Text Case คืออะไร?

Text case คือรูปแบบการใช้ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก การคั่นคำ และการเชื่อมคำ ตัวอย่างทั่วไปคือ uppercase, lowercase, title case และ sentence case

ในการเขียนโปรแกรม text case แก้ปัญหาสำคัญคือ identifier ส่วนใหญ่มีช่องว่างไม่ได้ นักพัฒนาจึงใช้ convention เช่น camelCase, snake_case และ kebab-case เพื่อรวมหลายคำให้ยังอ่านได้ง่าย

Convention เหล่านี้ไม่ใช่แค่เรื่องหน้าตา เพราะ framework, linter, database, API และภาษาโปรแกรมจำนวนมากคาดหวังรูปแบบชื่อที่เฉพาะเจาะจง

รูปแบบตัวพิมพ์พื้นฐาน

ก่อนดูรูปแบบเฉพาะสำหรับโปรแกรม มาดู case พื้นฐานที่ใช้ในงานเขียนและ UI:

Naming Conventions ในการเขียนโปรแกรม

Naming convention ในโปรแกรมตอบคำถามว่า ถ้าชื่อมีหลายคำแต่ห้ามมีช่องว่าง เราจะเขียนอย่างไรให้อ่านง่าย

The phrase "get user profile" becomes:

  camelCase:      getUserProfile
  PascalCase:     GetUserProfile
  snake_case:     get_user_profile
  kebab-case:     get-user-profile
  CONSTANT_CASE:  GET_USER_PROFILE
  dot.case:       get.user.profile

แต่ละ convention มีเหตุผลของมัน การเลือกใช้ขึ้นอยู่กับภาษา framework และชนิดของ identifier

camelCase

camelCase เริ่มด้วยตัวพิมพ์เล็ก และขึ้นต้นคำถัดไปด้วยตัวพิมพ์ใหญ่ เป็นรูปแบบหลักสำหรับตัวแปรและฟังก์ชันใน JavaScript และ ecosystem ใกล้เคียง

พบได้บ่อยใน JavaScript, TypeScript, methods/variables ใน Java, Swift, Kotlin และ JSON API จำนวนมาก

// JavaScript / TypeScript
const firstName = "Alice";
const lastName = "Smith";
const isLoggedIn = true;

function getUserProfile(userId) { ... }
function calculateTotalPrice(items) { ... }
function handleFormSubmit(event) { ... }

// React event handlers
onClick, onChange, onSubmit, onKeyDown

// JSON keys by convention
{ "firstName": "Alice", "lastName": "Smith" }

PascalCase

PascalCase ขึ้นต้นทุกคำด้วยตัวพิมพ์ใหญ่ ใช้บ่อยกับ classes, types, constructors, enums และ React components

ใน React ชื่อ component ต้องขึ้นต้นด้วยตัวพิมพ์ใหญ่ ถ้า JSX tag เป็นตัวพิมพ์เล็ก React จะตีความเป็น HTML element ไม่ใช่ custom component

// Classes
class UserProfile { ... }
class ShoppingCart { ... }
class HttpRequestHandler { ... }

// React components
function NavigationBar() { return <nav>...</nav>; }
function UserAvatar({ name }) { return <img alt={name} />; }
<SearchableToolGrid />
<ThemeToggle />

// TypeScript interfaces and types
interface UserSettings { ... }
type ApiResponse<T> = { data: T; error?: string };

snake_case

snake_case ใช้ underscore คั่นคำและมักใช้ตัวพิมพ์เล็กทั้งหมด เป็น style ทางการของ Python สำหรับ functions และ variables ตาม PEP 8

ยังพบได้ใน Ruby, Rust, SQL, database columns, backend APIs จำนวนมาก และ config files

# Python
first_name = "Alice"
last_name = "Smith"
is_logged_in = True

def get_user_profile(user_id):
    ...

def calculate_total_price(items):
    ...

# SQL columns
SELECT first_name, last_name, created_at
FROM user_accounts
WHERE is_active = true;

kebab-case

kebab-case ใช้ hyphen คั่นคำ นิยมใน URL, CSS class names, HTML attributes, file names และ route paths

ภาษาโปรแกรมส่วนใหญ่ใช้ kebab-case กับตัวแปรไม่ได้ เพราะ hyphen จะถูกตีความเป็นเครื่องหมายลบ

/* CSS */
.user-profile-card { ... }
.main-navigation { ... }
.is-loading { ... }

<!-- HTML data attributes -->
<button data-user-id="42" aria-label="Open menu">

// URL slugs
/blog/what-is-text-case
/tools/text-case-converter

CONSTANT_CASE

CONSTANT_CASE หรือ UPPER_SNAKE_CASE ใช้ตัวพิมพ์ใหญ่กับ underscore เพื่อบอกด้วยสายตาว่าค่านี้ไม่ควรถูกเปลี่ยน

เป็น convention ที่แทบจะใช้ร่วมกันทุกภาษา สำหรับ constants และ environment variables

// JavaScript
const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";
const HTTP_STATUS_OK = 200;

# Python
MAX_CONNECTIONS = 100
DEFAULT_TIMEOUT = 30
DATABASE_URL = "postgresql://localhost/mydb"

// Environment variables
NODE_ENV=production
DATABASE_URL=postgres://...
NEXT_PUBLIC_API_KEY=abc123

Case รูปแบบพิเศษอื่น ๆ

นอกจากรูปแบบหลัก ยังมี case พิเศษที่อาจพบได้:

Naming Conventions แยกตามภาษา

ภาษาโปรแกรมหลักแต่ละภาษามี convention ของ ecosystem ตัวเอง การใช้ให้ถูกช่วยให้โค้ดอ่านเป็นธรรมชาติสำหรับนักพัฒนาคนอื่น

การแปลงระหว่าง Case

การแปลง case มักมี 2 ขั้นตอนหลัก คือแยกข้อความเป็นคำ แล้วรวมคำกลับตามกฎของรูปแบบเป้าหมาย

1. แยกด้วยช่องว่าง underscore hyphen punctuation หรือขอบเขตตัวพิมพ์ใหญ่
2. ปรับคำให้เป็นมาตรฐาน เช่น แปลงเป็นตัวพิมพ์เล็ก
3. รวมคำเป็น camelCase, PascalCase, snake_case, kebab-case หรือรูปแบบอื่น

Input: "getUserProfile"

Step 1: split into words
  ["get", "user", "profile"]

Step 2: join with the target format
  snake_case:     get_user_profile
  kebab-case:     get-user-profile
  PascalCase:     GetUserProfile
  CONSTANT_CASE:  GET_USER_PROFILE

JavaScript

// camelCase to snake_case
"getUserProfile"
  .replace(/([A-Z])/g, "_$1")
  .toLowerCase()
  .replace(/^_/, "");
// "get_user_profile"

// snake_case to camelCase
"get_user_profile"
  .replace(/_([a-z])/g, (_, c) => c.toUpperCase());
// "getUserProfile"

// Any simple case to kebab-case
"getUserProfile"
  .replace(/([A-Z])/g, "-$1")
  .toLowerCase()
  .replace(/^-/, "");
// "get-user-profile"

API

// API response from a Python/Ruby backend
{
  "user_id": 42,
  "first_name": "Alice",
  "last_name": "Smith",
  "is_active": true,
  "created_at": "2026-01-15"
}

// Frontend JavaScript object
{
  userId: 42,
  firstName: "Alice",
  lastName: "Smith",
  isActive: true,
  createdAt: "2026-01-15"
}

แนวทางปฏิบัติที่ดี

• ทำตาม convention ของภาษา เพื่อให้โค้ดดูเป็นธรรมชาติใน ecosystem นั้น
• ใช้ให้สม่ำเสมอในโปรเจกต์ การปนหลาย convention ทำให้อ่านยากกว่าการใช้ convention เดียวแม้จะไม่สมบูรณ์แบบ
• ใช้ linter หรือ formatter เพื่อบังคับ naming rules อัตโนมัติ
• ทำตาม framework: React components ใช้ PascalCase, CSS classes มักใช้ kebab-case, database columns มักใช้ snake_case
• จัดการตัวย่อให้ชัดเจน ตกลงว่าจะใช้ getURLParser หรือ getUrlParser แล้วบันทึกกฎไว้
• เขียน convention ของทีมไว้ ใน style guide หรือ contributing file