Tampal sebarang teks dan tukarnya kepada sembilan format huruf (case) dalam masa nyata — tiada butang untuk diklik, tiada data yang dihantar ke pelayan. Halaman ini juga berfungsi sebagai rujukan konvensi penamaan: format mana yang digunakan dalam bahasa apa, peraturan yang sebenarnya tidak dipersetujui oleh panduan gaya (style guide), dan kesilapan lazim yang ditangkap semasa code review.

Sembilan Format Huruf (The Nine Cases)

Format (Case)	Contoh	Kegunaan Lazim
UPPERCASE	HELLO WORLD	Pemalar, kata kunci SQL, akronim, label UI pendek
lowercase	hello world	E-mel, URL, nilai CSS, menormalkan input
Title Case	Hello World	Tajuk artikel, tajuk buku, tajuk rasmi
Sentence case	Hello world	Teks isi, label UI, notifikasi, subjek e-mel
camelCase	helloWorld	Pemboleh ubah JS/TS, kunci JSON, kaedah Java, prop React
PascalCase	HelloWorld	Nama class, jenis TypeScript, komponen React/Vue
snake_case	hello_world	Pemboleh ubah Python, lajur pangkalan data, kaedah Ruby
kebab-case	hello-world	Class CSS, atribut HTML, slug URL, pakej npm
CONSTANT_CASE	HELLO_WORLD	Pemalar dan pemboleh ubah persekitaran (ENV) di semua bahasa

Cara Menggunakan

1. Tampal atau taip teks ke dalam medan input — penukaran berlaku dalam masa nyata.
2. Pilih format daripada butang radio.
3. Gunakan Muat naik untuk memuatkan fail .txt, Kosongkan untuk menetapkan semula kedua-dua medan, Salin atau Muat turun untuk mengambil hasil.

Format Mana Yang Harus Saya Gunakan?

Jawapan terpantas mengikut konteks:

Untuk kod (code):

Jika anda menamakan…	Gunakan
Pemboleh ubah atau fungsi dalam JS, TS, Java, Swift, Kotlin	camelCase
Pemboleh ubah atau fungsi dalam Python, Ruby, Rust	snake_case
Class, type, interface, atau komponen (sebarang bahasa)	PascalCase
Pemalar atau pemboleh ubah persekitaran (ENV)	CONSTANT_CASE
Class CSS atau atribut data- HTML	kebab-case
Segmen laluan URL atau slug	kebab-case
Lajur pangkalan data atau nama jadual	snake_case
Nama pakej npm atau pip	kebab-case
Kunci objek JSON dalam REST API	camelCase
Pengecam Go yang dieksport (publik)	PascalCase
Pengecam Go yang tidak dieksport (package-private)	camelCase

Untuk kandungan bertulis:

Konteks	Gunakan	Nota
Berita utama, tajuk buku, penerbitan rasmi	Title Case	Peraturan panduan gaya berbeza-beza — lihat bahagian di bawah
Tajuk siaran blog, label UI produk, notifikasi aplikasi	Sentence case	Sepadan dengan cara orang menaip pertanyaan carian
Label butang dalam ruang UI yang terhad	UPPERCASE	Gunakan secara berhemat
Baris subjek e-mel	Sentence case	Subjek yang menggunakan Title Case sepenuhnya mempunyai korelasi kadar buka yang lebih rendah
Hashtag berbilang perkataan	PascalCase	#ContentMarketing diimbas lebih cepat daripada #contentmarketing

Konvensi Penamaan Mengikut Bahasa Pengaturcaraan

Bahasa	Pemboleh ubah / Fungsi	Class / Jenis	Pemalar	Nama fail
JavaScript	camelCase	PascalCase	CONSTANT_CASE	kebab-case
TypeScript	camelCase	PascalCase	CONSTANT_CASE	kebab-case
Python	snake_case	PascalCase	CONSTANT_CASE	snake_case
Java	camelCase	PascalCase	CONSTANT_CASE	PascalCase
Go	camelCase / PascalCase*	PascalCase	PascalCase	snake_case
Rust	snake_case	PascalCase	CONSTANT_CASE	snake_case
Ruby	snake_case	PascalCase	CONSTANT_CASE	snake_case
C#	camelCase / PascalCase†	PascalCase	PascalCase	PascalCase
PHP	camelCase	PascalCase	CONSTANT_CASE	snake_case
Swift	camelCase	PascalCase	camelCase‡	PascalCase
Lajur SQL	snake_case	—	—	—
Class CSS	kebab-case	—	—	—
Slug URL	kebab-case	—	—	—
Pakej npm / pip	kebab-case	—	—	—
Pemboleh ubah ENV	—	—	CONSTANT_CASE	—
Kunci JSON (REST)	camelCase	—	—	—

* Go: huruf besar mengawal keterlihatan eksport. PascalCase = dieksport (publik); camelCase = tidak dieksport (package-private). Ini dikuatkuasakan oleh pengkompil, bukan hanya sekadar konvensi.

† C#: pemboleh ubah tempatan dan parameter menggunakan camelCase; kaedah, sifat (properties), dan medan publik menggunakan PascalCase.

‡ Swift: pemalar menggunakan camelCase — let maxRetries = 3 adalah gaya lazim (idiomatic); let MAX_RETRIES = 3 tidak digunakan.

Bila Menggunakan Setiap Format

camelCase

camelCase muncul dari bahasa SIMULA dan bahasa berorientasikan objek awal pada tahun 1960-an, mendapat penerimaan meluas melalui Java (1995), dan tersebar ke JavaScript, TypeScript, Swift, serta Kotlin. Peraturannya mudah: perkataan pertama kekal huruf kecil sepenuhnya, setiap perkataan seterusnya bermula dengan huruf besar, tanpa karakter pemisah.

Format ini dominan di sebarang ekosistem di mana Java menetapkan konvensi awalnya. API teras Node.js (readFile, createServer, writeFileSync), prop event React (onClick, onChange, defaultValue), dan kunci JSON REST (userId, createdAt, isActive) semuanya mematuhinya. ESLint menguatkuasakannya dalam projek JavaScript melalui peraturan camelcase terbina dalam.

// React
const [isLoading, setIsLoading] = useState(false);
const handleSubmit = (event) => { ... };

// Node.js
fs.readFile(filePath, 'utf8', callback);
http.createServer(requestListener);

Bila tidak menggunakannya: Jangan sekali-kali digunakan dalam laluan URL — banyak pelayan tidak membezakan huruf besar/kecil (case-insensitive) sehingga UserOrders dan userorders menjadi laluan yang sama. Jangan digunakan dalam fail Python atau Ruby (PEP 8 dan Ruby Style Guide melarangnya). Jangan gunakan untuk nama class dalam sebarang bahasa — itu adalah tempat bagi PascalCase.

PascalCase

PascalCase mengambil namanya daripada bahasa Pascal (Niklaus Wirth, 1970), walaupun alatan daripada Borland dan Delphi yang menyebarkannya sebagai standard penamaan class pada 1990-an. Setiap perkataan — termasuk perkataan pertama — bermula dengan huruf besar. Satu perbezaan dengan camelCase ini membawa makna semantik yang besar: PascalCase bermaksud “ini adalah sesuatu yang anda instansiasi (instantiate) atau jenis (type) yang anda rujuk,” dan bukannya “ini adalah tindakan yang anda panggil.”

Corak ini adalah standard universal untuk nama class merentasi semua bahasa OOP utama. Dalam TypeScript, ia digunakan untuk interface dan type alias. Dalam React dan Vue ia diwajibkan untuk nama komponen — framework menggunakan huruf besar untuk membezakan komponen ciptaan pengguna (UserProfile) daripada elemen HTML (div, input). Dalam C#, PascalCase turut merangkumi kaedah dan sifat (properties) publik selain nama class.

// React component
export default function UserProfileCard({ userId }) { ... }

// TypeScript
interface ApiResponse<T> {
  data: T;
  totalCount: number;
  nextCursor: string | null;
}

// Python
class DatabaseConnection:
    def __init__(self, url: str) -> None: ...

Bila tidak menggunakannya: Jangan gunakannya untuk pemboleh ubah atau fungsi biasa dalam JavaScript, TypeScript, atau Python. Fungsi PascalCase dalam JS membayangkan ia adalah constructor yang bertujuan dipanggil dengan new — menggunakannya untuk fungsi utiliti biasa akan mengelirukan pembangun lain dan boleh mencetuskan amaran lint.

snake_case

snake_case berasal daripada nama fungsi pustaka C (printf, fopen, strcmp) dan skrip shell Unix. PEP 8 Python (ditulis oleh Guido van Rossum pada 2001) merasmikannya untuk bahasa tersebut atas alasan ini: perkataan_dipisah_oleh_garis_bawah dibaca lebih menyerupai prosa bahasa Inggeris berbanding camelCase yang dimampatkan, menjadikan kod lebih mudah diakses oleh pakar domain yang bukan pemprogram utama.

Ini adalah standard universal untuk pengecam pangkalan data hubungan (relational database) — SQL secara lalaian tidak membezakan huruf besar/kecil, jadi UserProfile dan userprofile adalah lajur yang sama, dan snake_case menjadikan lajur mudah dibaca tanpa bergantung kepada huruf besar. ORM Django, migrasi Rails, dan hampir setiap alat migrasi pangkalan data menghasilkan nama lajur snake_case.

# Django model
class UserProfile(models.Model):
    first_name = models.CharField(max_length=100)
    created_at = models.DateTimeField(auto_now_add=True)
    is_active = models.BooleanField(default=True)

def get_user_by_id(user_id: int) -> UserProfile:
    return UserProfile.objects.get(pk=user_id)

Bila tidak menggunakannya: Jangan gunakannya di laluan URL — garis bawah sukar dilihat apabila URL digarisbawahi dalam pelayar dan mungkin dibuang oleh sesetengah pemproses pautan. snake_case secara teknikalnya sah dalam pengecam JavaScript tetapi melanggar peraturan camelcase dari ESLint dan memberitahu setiap pembangun JS bahawa penulisnya sedang berfikir dengan cara Python.

kebab-case

kebab-case ditakrifkan oleh perkataan huruf kecil yang digabungkan dengan tanda sempang. CSS menerimanya sebagai standard untuk semua nama sifat (properties) — background-color, font-size, border-radius, flex-direction — dan konvensi itu merebak ke atribut HTML, slug URL, dan pakej npm. Tanda sempang sangat sesuai untuk konteks web kerana ia tidak pernah menjadi aksara pengecam yang sah dalam kebanyakan bahasa pengaturcaraan, yang juga sebab utama ia tidak boleh digunakan untuk pemboleh ubah kod.

Manfaat SEO untuk URL kebab-case telah terbukti kukuh: Google melayan tanda sempang sebagai pemisah perkataan dalam URL, tetapi tidak melayan garis bawah dengan cara yang sama. URL seperti /blog/panduan-profil-pengguna diindeks dengan “panduan”, “profil”, dan “pengguna” sebagai istilah carian berbeza. /blog/panduan_profil_pengguna diindeks sebagai token tunggal. Untuk URL yang boleh dilihat umum, kebab-case adalah satu-satunya pilihan dengan faedah SEO. John Mueller daripada Google telah mengesahkan perbezaan ini berulang kali dalam sesi Q&A awam.

/* CSS */
.nav-item { ... }
.card-header { ... }
.btn-primary { ... }

<!-- HTML -->
<div data-user-id="123" data-tracking-event="page-view">

/* npm */
react-router, tailwind-css, lodash, date-fns

Bila tidak menggunakannya: Jangan gunakannya untuk pemboleh ubah kod atau fungsi. Dalam mana-mana bahasa gaya C, tanda sempang adalah operator penolakan — my-variable dihuraikan sebagai my ditolak variable.

CONSTANT_CASE

CONSTANT_CASE berasal dari makro prapemproses C pada tahun 1970-an (#define MAX_BUFFER_SIZE 1024). Corak huruf-besar-semua-dengan-garis-bawah menjadi isyarat universal untuk “nilai ini ditetapkan pada masa penyusunan (compile time) atau masa konfigurasi dan tidak boleh berubah ketika masa jalanan (runtime).” Setiap bahasa utama mengguna pakai corak ini; fail .env dan skrip shell meluaskannya ke konfigurasi penempatan (deployment).

Kekuatan visual ALL_CAPS mempunyai fungsi yang nyata: ia memberitahu pembaca secara sepintas lalu bahawa ini adalah konfigurasi, bukan logik — nilai had yang tetap, bukan nilai yang dikira. Isyarat tersebut patut dikekalkan, dan sebab itulah menggunakan CONSTANT_CASE untuk nilai yang boleh diubah atau untuk nama fungsi adalah satu kesilapan ketara (lihat bahagian di bawah).

# Environment variables (.env)
DATABASE_URL=postgresql://localhost/mydb
STRIPE_API_KEY=sk_live_...
MAX_UPLOAD_SIZE_MB=10
JWT_SECRET_KEY=...

// JavaScript module constants
const MAX_RETRIES = 3;
const API_BASE_URL = 'https://api.example.com/v1';
const DEFAULT_TIMEOUT_MS = 5000;

Bila tidak menggunakannya: Jangan gunakannya untuk fungsi, kaedah, atau pemboleh ubah yang berubah pada runtime. Jangan gunakannya untuk nama class. Secara spesifik di Swift, pemalar menggunakan camelCase — let maxRetries = 3 adalah gaya yang betul; corak CONSTANT_CASE tidak digunakan dalam kod Swift.

Kesilapan Penamaan Yang Lazim

Kesilapan-kesilapan ini muncul semasa code review, ditandakan oleh linter, dan menjadikan pangkalan kod (codebase) lebih sukar dibaca oleh sesiapa yang menyelenggarakannya kelak.

Mencampurkan konvensi dalam projek yang sama

Ini adalah kesilapan penamaan yang paling merosakkan. Sebuah codebase di mana getUserById dan get_order_history wujud bersama memaksa pembaca untuk menukar konteks pada setiap panggilan fungsi — mereka tidak dapat meramalkan sama ada fungsi seterusnya akan menjadi camelCase atau snake_case. Projek yang secara konsisten menggunakan konvensi yang “salah” bagi ekosistemnya masih lebih mudah dibaca daripada projek yang mencampuradukkan konvensi yang “betul”. Pilih satu konvensi per konteks dan kuat kuasakannya dengan linter dari hari pertama.

snake_case dalam nama pemboleh ubah JavaScript

const user_profile = {} adalah JavaScript yang sah — masa jalanan (runtime) tidak mempedulikannya. Tetapi ia memberitahu setiap pembangun JavaScript yang membaca kod bahawa penulisnya mempunyai latar belakang Python atau Ruby. Peraturan terbina dalam camelcase ESLint akan menyekatnya. Jika pasukan anda bekerja secara bersilang antara fail JS dan Python, pencemaran silang ini amat kerap berlaku; tahanlah kebiasaan itu. snake_case kekal dalam fail .py, manakala camelCase untuk fail .js dan .ts.

camelCase atau snake_case dalam laluan URL

/api/userOrders dan /api/user_orders kedua-duanya salah. camelCase dalam URL berisiko mencetuskan pepijat sensitiviti huruf besar-kecil — Apache pada Windows tidak sensitif kepada huruf besar-kecil, jadi /api/UserOrders dan /api/userorders adalah laluan yang sama, tetapi /api/userOrders pada pelayan Linux adalah berbeza. Garis bawah dalam URL pula akan kehilangan fungsi sebagai pemisah kata untuk enjin carian (lihat bahagian kebab-case di atas). Format yang tepat ialah /api/user-orders untuk setiap URL publik.

CONSTANT_CASE untuk perkara yang bukan pemalar

function GET_USER_BY_ID(id) {} menggunakan isyarat visual yang bermaksud “nilai ini tidak akan pernah berubah.” Menggunakannya untuk fungsi, sifat pengiraan (computed property), atau pemboleh ubah boleh ubah (mutable variable) akan mengelirukan setiap pembangun yang membacanya kelak. Khaskan CONSTANT_CASE secara ketat untuk nilai-nilai yang ditetapkan semasa permulaan dan tidak pernah diumpuk (reassign) semula — pemalar peringkat modul, pemboleh ubah persekitaran, dan konfigurasi compile-time.

PascalCase untuk fungsi utiliti dalam JavaScript

function GetUserById(id) {} kelihatan seperti constructor dalam JavaScript. Konvensi bahawa PascalCase = “panggil dengan new” sangat tertanam dalam ekosistem ini. Fungsi PascalCase yang bukan constructor akan mengelirukan pembaca dan boleh mencetuskan peraturan new-cap ESLint. Gunakan camelCase untuk semua fungsi dan kaedah; rizabkan PascalCase hanya untuk class, type, dan komponen React.

Nama yang memerlukan komen untuk diterangkan

usrPrf, ord, cfg, tmp2. Ringkas adalah satu kelebihan sehinggalah ia menimbulkan kekaburan — ord boleh bermaksud order, ordinal, atau ordinary. Penyunting (editor) moden menyediakan fungsi autolengkap (autocomplete); tiada kos masa yang ketara untuk menaip userProfile. Ujiannya: jika nama itu memerlukan komen sebaris (inline) untuk menjelaskan maksudnya, nama tersebut wajar ditukar.

Mengendalikan Akronim dalam Nama Pemboleh Ubah

Akronim seperti API, HTTP, URL, dan ID sering menimbulkan kekeliruan dalam format camelCase dan PascalCase. Patutkah anda menulis myAPIKey atau myApiKey?

Anggap akronim sebagai perkataan (moden, disyorkan untuk projek baharu): myApiKey, HttpRequest, parseUrl, getUserById. Inilah pendekatan yang digunakan dalam perpustakaan standard TypeScript dan Java Style Guide Google. Ia lebih pantas diimbas dan mengelakkan masalah akronim bersebelahan — parseHtmlToXml mudah dibaca serta-merta berbanding parseHTMLtoXML yang memaksa pembaca melihat buat kali kedua.

Kekalkan huruf besar akronim (tradisional): myAPIKey, HTTPRequest, parseURL. Lebih lazim dijumpai dalam codebase Java dan C# yang lama. Ia mewujudkan isu kebolehbacaan apabila dua akronim muncul bersama.

Bagi snake_case dan CONSTANT_CASE, persoalan ini tiada — api_key, http_request, API_KEY, HTTP_HOST kesemuanya jelas walau apa jua pendekatan yang anda ikuti.

Peraturan khas Go: akronim dua huruf dikekalkan huruf besarnya sepenuhnya (ID, DB, IP); akronim yang lebih panjang dianggap sebagai perkataan biasa (Http, Url, Api). Ini didokumenkan dalam panduan Go Code Review Comments.

Satu-satunya peraturan yang paling penting: pilih satu pendekatan dan gunakannya secara konsisten di seluruh codebase. Mencampuradukkan myApiKey dengan myAPIKey dalam projek yang sama adalah lebih buruk daripada memilih salah satu sahaja.

Title Case: Peraturan Mengikut Panduan Gaya (Style Guide)

Title Case membesarkan huruf pada perkataan tertentu dalam sesebuah tajuk. Empat panduan gaya utama masing-masing mempunyai definisi tentang perkataan apa yang harus dihurufbesarkan — dan mereka saling tidak bersetuju tentang beberapa kes berasingan (edge cases).

Peraturan	AP Style	APA Style	Chicago Style	MLA Style
Kapitalkan perkataan pertama dan terakhir	✓	✓	✓	✓
Kapitalkan kata nama, kata kerja, kata sifat, kata keterangan	✓	✓	✓	✓
Kata depan pendek (in, on, at, by, of, up)	Huruf kecil ≤3 huruf	Huruf kecil ≤3 huruf	Huruf kecil	Huruf kecil SEMUA
Kata hubung berkoordinasi (and, but, or, nor)	Huruf kecil	Huruf kecil	Huruf kecil	Huruf kecil
Artikel (a, an, the)	Huruf kecil	Huruf kecil	Huruf kecil	Huruf kecil
”to” sebagai penanda infinitif (infinitive)	Kapitalkan	Kapitalkan	Kapitalkan	Kapitalkan
”to” sebagai kata depan (preposition)	Huruf kecil	Huruf kecil	Huruf kecil	Huruf kecil
Kata kerja pendek (is, are, was)	Kapitalkan	Kapitalkan	Kapitalkan	Kapitalkan

Tajuk yang sama mengikut keempat-empat gaya:

“A Guide to Writing for the Web and Social Media”

Keempat-empat bersetuju dengan tajuk ini. Perselisihan muncul dengan kata depan yang lebih panjang (“about”, “between”, “without”) serta tajuk majmuk yang dihubungkan dengan titik bertindih.

Perkataan yang kekal huruf kecil merentas keempat-empat gaya (kecuali membuka atau menutup tajuk): a, an, the, and, but, or, nor, for, so, yet, as, at, by, in, of, on, to (kata depan), up, via.

Penukar ini membesarkan awalan setiap perkataan — kelakuan umum paling lazim digunakan. Untuk pematuhan ketat AP, APA, Chicago, atau MLA, gunakan alat ini sebagai penukaran asas dan laksanakan pembetulan manual untuk perkataan yang pendek.

Pengisian Auto Melalui Parameter URL

Pramuat teks input dan jenis format melalui URL:

https://www.uprek.com/ms/tools/case-converter?input=Hello+World&case=snake

Nilai parameter ?case= yang tersedia: upper, lower, title, sentence, camel, pascal, snake, kebab, constant.

Privasi

Kesemua penukaran berjalan dalam pelayar anda menggunakan JavaScript natif (native) — String.toUpperCase(), String.toLowerCase(), String.replace(), dan TextEncoder. Teks anda tidak pernah dihantar ke pelayan kami, tidak pernah direkodkan, dan tidak pernah disimpan. Untuk mengesahkannya: buka “developer tools” dalam pelayar anda, pergi ke tab Network, tampal teks ke dalam alat ini, dan tukar pelbagai format — anda akan mendapati tiada sebarang permintaan rangkaian luar yang berlaku.

Soalan Lazim

Log Perubahan