camelCase, snake_case, kebab-case: Bila Patut Digunakan
camelCase untuk JavaScript, snake_case untuk Python dan pangkalan data, kebab-case untuk CSS dan URL. Cara menukar teks secara percuma.
Diterbitkan · 5 minit bacaan
camelCase lawan snake_case lawan kebab-case bergantung terutamanya kepada tempat nama itu hidup. JavaScript dan Java menggunakan camelCase (firstName), Python, Ruby dan SQL menggunakan snake_case (first_name), dan CSS, atribut HTML serta URL menggunakan kebab-case (first-name). Ikut konvensyen bahasa dan panduan gaya pasukan anda. Untuk menukar teks antara kes, penukar kes percuma dan penjana slug URL percuma meliputi kebanyakan kerja dalam pelayar anda.
camelCase lawan snake_case lawan kebab-case sepintas lalu
| Gaya | Contoh | Di mana anda akan melihatnya |
|---|---|---|
| camelCase | userFirstName |
Pembolehubah dan fungsi JavaScript dan TypeScript, kaedah Java, JSON daripada banyak API web |
| PascalCase | UserFirstName |
Nama kelas dalam kebanyakan bahasa, komponen React, kaedah C# |
| snake_case | user_first_name |
Pembolehubah dan fungsi Python, Ruby, nama lajur SQL, banyak JSON API |
| SCREAMING_SNAKE_CASE | USER_FIRST_NAME |
Pemalar dalam banyak bahasa, pembolehubah persekitaran |
| kebab-case | user-first-name |
Sifat dan nama kelas CSS, atribut HTML, URL, nama fail, bendera CLI |
Nama itu datang daripada bentuknya: camelCase mempunyai bonggol huruf besar, snake_case terbentang rata pada garis bawah, dan perkataan kebab-case dicucuk pada sempang.

Bahasa demi bahasa
JavaScript dan TypeScript. Pembolehubah dan fungsi menggunakan camelCase (getUserName), kelas dan komponen React menggunakan PascalCase (UserCard), dan pemalar selalunya SCREAMING_SNAKE_CASE (MAX_RETRIES). Fungsi terbina dalam bahasa itu sendiri mengikut corak ini, seperti getElementById dan toLowerCase.
Python. PEP 8, panduan gaya Python, menggunakan snake_case untuk fungsi, pembolehubah dan nama modul, CapWords (PascalCase) untuk kelas, dan huruf besar dengan garis bawah untuk pemalar. Menulis getUserName dalam Python berfungsi, tetapi ia akan kelihatan janggal bagi setiap pembangun Python yang membacanya.
CSS dan HTML. Sifat CSS menggunakan kebab-case (background-color, font-size), dan kebanyakan sistem penamaan kelas mengikutnya (.nav-item, .card-title). Atribut data- HTML juga kebab-case, dan pelayar menukarkannya untuk JavaScript: data-user-id menjadi element.dataset.userId. Itu satu baris yang ringkas tentang sebab kedua-dua konvensyen wujud.
SQL dan pangkalan data. Nama lajur dan jadual biasanya snake_case (created_at, order_items). Banyak pangkalan data menukar nama tanpa petikan kepada satu kes, jadi createdAt boleh diam-diam menjadi createdat melainkan anda memetiknya setiap kali. snake_case mengelakkannya.
URL dan nama fail. Gunakan kebab-case. Panduan struktur URL Google mengesyorkan sempang dan bukan garis bawah untuk memisahkan perkataan, kerana sempang menandakan sempadan perkataan dengan jelas. Huruf kecil juga mengelakkan pautan rosak pada pelayan yang menganggap About.html dan about.html sebagai fail berbeza. Lihat apa itu slug URL dan amalan terbaik slug URL kami.
JSON dan API. Tiada satu peraturan. Banyak API berpusatkan JavaScript menggunakan camelCase dan banyak bahagian belakang Python atau Ruby memulangkan snake_case. Pilih satu bagi setiap API dan jangan campurkannya dalam respons yang sama.
Yang mana paling mudah dibaca?
Ketiga-tiganya boleh dibaca selepas anda biasa dengannya. Beberapa perbezaan praktikal:
- snake_case dan kebab-case mengekalkan jurang yang jelas antara perkataan, yang membantu untuk nama panjang dan akronim (
html_parserlawanhtmlParserlawanHTMLParser). - camelCase lebih pendek dan tidak memerlukan aksara tambahan.
- kebab-case tidak boleh digunakan untuk nama pembolehubah dalam kebanyakan bahasa, kerana
user-namedibaca sebagaiuser tolak name. - Klik dua kali memilih keseluruhan nama snake_case atau camelCase dalam kebanyakan editor, tetapi biasanya berhenti pada sempang dalam kebab-case.
Peraturan sebenar ialah konsistensi. Fail yang mencampurkan userName, user_name dan UserName lebih sukar dibaca daripada mana-mana satu gaya yang digunakan di mana-mana.
Menukar antara kes
Anda perlu menukar apabila memindahkan data antara lapisan: created_at API Python menjadi createdAt JavaScript, tajuk halaman menjadi URL, atau nama tetapan menjadi pembolehubah persekitaran.
Untuk kebab-case atau snake_case: gunakan penjana slug. Tampal perkataan, satu nama setiap baris, dan pilih Sempang (-) untuk kebab-case atau Garis bawah (_) untuk snake_case. Ia menukar semua kepada huruf kecil, menukar aksen kepada huruf biasa dan membuang simbol. Ia menganggap mana-mana simbol sebagai sempadan perkataan, jadi user_first_name menjadi user-first-name dan kembali semula. Ia tidak memisahkan camelCase, walau bagaimanapun: userFirstName menjadi userfirstname. Letakkan ruang antara perkataan dahulu.
Untuk SCREAMING_SNAKE_CASE. Buat versi snake_case dalam penjana slug, kemudian tampalkannya ke dalam penukar kes percuma dan klik HURUF BESAR. Sebaliknya, Huruf kecil menukar MAX_RETRIES menjadi max_retries.
Untuk camelCase atau PascalCase. Tiada butang satu klik. Laluan terpantas: taip perkataan dengan ruang, klik Huruf Besar Pada Awal Perkataan dalam penukar kes (user first name menjadi User First Name), kemudian buang ruang untuk PascalCase dan tukar huruf pertama kepada huruf kecil untuk camelCase.
Banyak nama sekaligus, dalam kod. Untuk penamaan semula yang besar, gunakan cari dan ganti editor anda dengan ungkapan biasa. Uji corak itu dahulu dalam penguji regex percuma: sebagai contoh, _([a-z]) mencari setiap garis bawah yang diikuti huruf, tempat snake_case perlu huruf besar dalam camelCase. Kebanyakan editor boleh menukar huruf yang ditangkap kepada huruf besar dalam penggantian; semak dokumentasi editor anda untuk sintaksnya.
Perkara yang perlu diperhatikan semasa menukar
- Akronim. Tentukan sama ada ia
userIdatauuserID,HtmlParseratauHTMLParser, dan kekal dengan pilihan itu. - Nombor.
address_line_2bertukar dengan kemas;addressLine2juga baik; cuma jangan gugurkan digit. - Nama awam. Menamakan semula medan JSON atau URL akan memecahkan sesiapa yang menggunakannya. Tambah ubah hala untuk URL dan kekalkan nama medan lama berfungsi untuk seketika dalam API.
Tukar teks anda
Gunakan penukar kes percuma untuk HURUF BESAR, huruf kecil dan Huruf Besar Pada Awal Perkataan, dan penjana slug untuk kebab-case dan snake_case. Kedua-duanya berjalan dalam pelayar anda, dan tiada apa yang anda tampal meninggalkan peranti anda.
Soalan lazim
- Apakah perbezaan antara camelCase dan snake_case?
- camelCase menggabungkan perkataan dan memulakan setiap satu selepas yang pertama dengan huruf besar (
firstName). snake_case mengekalkan perkataan dalam huruf kecil dan menggabungkannya dengan garis bawah (first_name). - Patutkah saya guna camelCase atau snake_case dalam JSON?
- Mana-mana boleh. Padankan dengan bahasa yang kebanyakan pelanggan anda gunakan dan kekal konsisten dalam API.
- Mengapa CSS menggunakan kebab-case?
- CSS direka dengan nama sifat bersambung sempang seperti
font-size, dan nama kelas biasanya mengikut gaya yang sama. Sempang tidak boleh digunakan dalam kebanyakan nama pembolehubah bahasa pengaturcaraan, itulah sebabnya JavaScript menggunakan camelCase untuk sifat yang sama. - Adakah kebab-case baik untuk URL?
- Ya. Google mengesyorkan sempang untuk memisahkan perkataan dalam URL, dan huruf kecil mengelakkan masalah sensitiviti huruf besar kecil.
- Bolehkah penukar kes menghasilkan camelCase?
- Tidak dalam satu klik. Gunakan Huruf Besar Pada Awal Perkataan, kemudian buang ruang dan tukar huruf pertama kepada huruf kecil. Untuk kebab-case dan snake_case, gunakan penjana slug URL.
Alat Teks
Cuba Penukar Huruf Besar Kecil
Percuma, tanpa daftar, berfungsi dalam penyemak imbas anda. Tampal teks dan tukarkannya kepada HURUF BESAR, huruf kecil, Huruf ayat, Huruf Tajuk atau Huruf Dimulakan Besar dengan satu klik, kemudian salinnya.
Juga berguna
- Penjana Slug URLTukar tajuk kepada slug URL huruf kecil yang kemas, seperti catatan-blog-pertama. Aksen ditukar, simbol dibuang, dan perkataan kecil boleh dibuang.
- Penguji RegexUji ungkapan biasa dan lihat setiap padanan diserlahkan semasa menaip, dengan jadual kumpulan tangkapan. Mengikut peraturan JavaScript.