Konverter kebab-case Ubah teks menjadi kebab-case untuk kelas CSS, URL, dan nama file.

📝

Konverter kebab-case

Ubah teks menjadi kebab-case untuk kelas CSS, URL, dan nama file.

Masukkan Teks

Ketik atau tempelkan teks untuk dikonversi menjadi kebab-case.

Lihat Hasil

Lihat hasil dalam huruf kecil dengan tanda hubung secara instan.

Salin & Gunakan

Salin untuk kelas CSS, URL, atau nama file.

Loading tool...

What Is Konverter kebab-case?

Konverter kebab-case mengubah teks menjadi format kebab-case, di mana semua huruf berada dalam bentuk lowercase dan kata-kata dipisahkan oleh tanda hubung. Kebab-case adalah konvensi penamaan standar untuk nama kelas CSS, atribut HTML, slug URL, nama paket npm, dan nama file di banyak kerangka kerja. Contoh: "Hello World" menjadi "hello-world", "backgroundColor" menjadi "background-color". Nama ini berasal dari kesamaan visual kata-kata yang disusun pada tanda hubung, seperti item pada tusuk sate.

Why Use Konverter kebab-case?

Standar untuk nama kelas CSS dan properti kustom
Format yang diperlukan untuk slug URL di sebagian besar kerangka web
Digunakan untuk nama paket npm dan cabang Git
Format yang paling mudah dibaca untuk pengidentifikasi kata majemuk dalam konteks web
Menangani konversi dari format input apa pun

Common Use Cases

Kelas CSS

Format nama kelas mengikuti konvensi penamaan BEM atau standar CSS.

Slug URL

Buat jalur URL yang ramah SEO dari judul halaman atau heading konten.

Paket npm

Format nama paket mengikuti konvensi kebab-case npm.

Penamaan File

Berikan nama file dalam format kebab-case untuk Angular, Vue, dan kerangka komponen lainnya.

Technical Guide

Konversi kebab-case mengikuti algoritma pemisahan kata yang sama dengan snake_case tetapi menggabungkan kata-kata dengan tanda hubung bukan garis bawah. Input dipisahkan berdasarkan spasi, garis bawah, titik, tanda hubung yang ada, dan transisi kasus. Semua kata diubah menjadi lowercase dan digabungkan dengan tanda hubung tunggal. Tanda hubung yang berurutan dikompresi, dan tanda hubung awal/akhir dihapus. Algoritma ini menangani input camelCase ("backgroundColor" → "background-color"), PascalCase ("PageTitle" → "page-title"), dan format campuran dengan benar. Perlu diingat bahwa pengidentifikasi kebab-case tidak dapat digunakan langsung sebagai nama variabel dalam sebagian besar bahasa pemrograman karena tanda hubung adalah operator pengurangan.

Tips & Best Practices

1
Properti CSS secara asli menggunakan kebab-case: background-color, font-size, border-radius
2
Metodologi BEM menggunakan kebab-case dengan dua tanda hubung: block__element--modifier
3
URL dalam format kebab-case lebih disukai untuk SEO daripada garis bawah atau camelCase
4
Dalam JavaScript, akses properti kebab-case dengan notasi kurung siku: obj["my-prop"]
5
Angular menggunakan kebab-case untuk selector komponen (app-user-profile)

Related Tools

Konverter camelCase

Ubah teks ke format camelCase untuk variabel dan nama fungsi JavaScript.

📝 Text Tools

Konverter PascalCase

Ubah teks ke PascalCase untuk nama kelas dan penamaan komponen.

📝 Text Tools

Pengubah snake_case

Ubah teks ke format snake_case untuk variabel Python dan kolom database.

📝 Text Tools

Konverter dot.case

Ubah teks ke format dot.case untuk kunci konfigurasi dan properti.

📝 Text Tools

Pembuat Slug

Buat slug yang ramah URL dari teks dengan pemisah yang dapat disesuaikan.

📝 Text Tools

Frequently Asked Questions

Q Apa itu kebab-case?

Kebab-case menggunakan semua huruf kecil dengan tanda hubung di antara kata-kata: my-variable, page-title, nav-bar-item.

Q Mengapa saya tidak bisa menggunakan kebab-case untuk variabel JavaScript?

Tanda hubung diinterpretasikan sebagai operator minus dalam JavaScript. Gunakan notasi kurung siku (obj["my-key"]) atau camelCase sebagai gantinya.

Q Apakah kebab-case lebih baik daripada snake_case untuk URL?

Google memperlakukan tanda hubung sebagai pemisah kata tetapi tidak garis bawah, sehingga kebab-case lebih disukai untuk SEO dalam URL.

Q Bagaimana dengan properti kustom CSS?

Properti kustom CSS (variabel) menggunakan kebab-case dengan awalan --: --primary-color, --font-size-large.

Q Bagaimana BEM terkait dengan kebab-case?

BEM (Block Element Modifier) menggunakan kebab-case sebagai dasarnya, dengan __ untuk elemen dan -- untuk modifikasi.

About This Tool

Konverter kebab-case is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.