Kebab-átváltó — Ingyenes online eszköz
Mi az Kebab-átváltó?
A Kebab Case (kebab-case) egy névkonvenció, amely a szavakat kötőjellel köti össze, és az összes betűt kisbetűvé alakítja. Az eredmény így néz ki: this-is-kebab-case – a szavakat kötőjellel fűzik össze, mintha egy kebabnyársra tűzött hozzávalók lennének.
Ez a CSS osztálynevek, az URL-slugok, a HTML id- és data-attribútumok, valamint a fájlnevek szabványos névformátuma számos webes keretrendszerben. Ez az eszköz bármilyen bemenetet – sima szöveget, camelCase-t, snake_case-t vagy PascalCase-t – tiszta, URL-kompatibilis kebab-case kimenetté alakít, amelyet azonnal felhasználhat.
Mikor használja Kebab-átváltó?
Használja a kebab-case írásmódot CSS-osztálynevekhez és BEM-stílusú szelektorokhoz, URL-slugokhoz blogbejegyzésekben és termékoldalakon, HTML-adatattribútumokhoz, valamint YAML-fájlok konfigurációs kulcsaihoz. Azok a frontend-fejlesztők, akik a JavaScript camelCase tulajdonságnevei és a CSS kebab-case megfelelői között váltanak (pl. backgroundColor → background-color), rendszeresen használják ezt az eszközt.
A tiszta URL-slugokat generáló SEO-szakemberek is hasznosnak fogják találni — a keresőmotorok a kötőjeleket szóelválasztóként kezelik, így a kebab-case természetesen SEO-barát. További tisztítással járó URL-slug generáláshoz próbálja ki az URL Slug Generator eszközt. Python vagy adatbázis-nevezéshez használja a Snake Case Converter eszközt.
Hogyan használja ezt az eszközt
- 1Enter your text or phrase
- 2Click 'Convert' to get kebab-case
- 3Copy your URL-friendly slug
Az eszköz eltávolítja a speciális karaktereket, mindent kisbetűvé alakít, és a szóközöket, aláhúzásjeleket, pontokat, valamint a camelCase-formátum határait kötőjelekkel helyettesíti. Az eredmény mindig egy tiszta, kisbetűs, kötőjellel elválasztott karakterlánc.
Példák
| Input | Output |
|---|---|
| Hello World | hello-world |
| backgroundColor | background-color |
| my_variable_name | my-variable-name |
| The Quick Brown Fox | the-quick-brown-fox |
| user_id_column | user-id-column |
Szabályok és viselkedés
- Minden szó kisbetűvé alakul. A bemeneti formátumtól – nagybetűs, címformátumú, camelCase – függetlenül a kimenetben minden betű kisbetű lesz.
- A szavakat kötőjellel (-) választjuk el egymástól. A szóközöket, aláhúzásjeleket, pontokat és a „camelCase” betűátmeneteket egyaránt egyszerű kötőjellel helyettesítjük, hogy tiszta „kebab-case” formátumot kapjunk.
- A speciális karakterek és az írásjelek eltávolításra kerülnek. Csak a betűk (a–z), a számok (0–9) és a kötőjelek maradnak meg, így a kimenet biztonságosan használható URL-ekben, CSS-szelektorokban és HTML-attribútumokban.
Kapcsolódó eszközök
Gyakran ismételt kérdések
Mi az a kebab-case?
A „kebab-case” egy névadási konvenció, amelyben a szavak kisbetűkkel íródnak és kötőjellel vannak elválasztva, például „my-component-name”. Ez hasonlít a kebabnyársra felfűzött hozzávalókra. Ez a szabvány a CSS-osztálynevek, a HTML-attribútumok, az URL-útvonalak és a fájlnevek esetében számos webes keretrendszerben, többek között az Angularban és az Emberben.
Mikor használják a kebab-tokot?
A CSS-osztálynevek (.nav-bar, .btn-primary), a HTML-azonosító attribútumok, az URL-slugok (/blog/my-post-title), a Lisp és Clojure azonosítók, az Angular-komponens-szelektorok, valamint a YAML-konfigurációs kulcsok mind a kebab-case írásmódot használják. Ez az alapértelmezett írásmód az npm-csomagnevek és számos CLI-parancsnév esetében is.
A „kebab-case” megegyezik-e a „spinal-case” vagy a „lisp-case” kifejezéssel?
Igen, ezek megegyeznek – minden szó kisbetűs, és kötőjellel vannak elválasztva. A név közösségenként változik: a webfejlesztők „kebab-case”-nek, a Lisp-programozók „lisp-case”-nek hívják, míg egyesek „spinal-case”-nek nevezik. Eszközünk ugyanazt az eredményt adja, függetlenül attól, hogy hogyan nevezed.
Miért jó a „kebab-case” az URL-ekhez?
A Google-hoz hasonló keresőmotorok a kötőjeleket szóelválasztóként kezelik, így a „kebab-case” formátumú URL-ek (pl. /best-free-tools) különálló kulcsszavakként kerülnek indexelésre. A snake_case formátumú URL-ekben szereplő aláhúzásjeleket szóösszekötőként kezelik, ezért a kötőjelek jelentik a jobb választást a SEO-barát URL-címek esetében.
Át tudom alakítani a PascalCase-t kebab-case-re?
Igen. Az eszköz felismeri a nagybetűk közötti átmeneteket a PascalCase és a camelCase formátumú beviteli szövegekben, és minden határvonalra kötőjelet illeszt be. Például a „MyComponentName” szöveg „my-component-name”-re, a „backgroundColor” pedig „background-color”-ra változik.