camelCase vs snake_case vs kebab-case: vilken väljer du?

camelCase vs snake_case vs kebab-case handlar främst om var namnet lever. JavaScript och Java använder camelCase (firstName), Python, Ruby och SQL använder snake_case (first_name), och CSS, HTML-attribut och URL:er använder kebab-case (first-name). Följ språkets konvention och ditt teams stilguide. För att byta text mellan skiftlägen klarar gratis skiftlägesomvandlaren och gratis URL-slug-generatorn det mesta av arbetet i webbläsaren.

camelCase vs snake_case vs kebab-case i korthet

Stil	Exempel	Där du ser den
camelCase	userFirstName	JavaScript- och TypeScript-variabler och -funktioner, Java-metoder, JSON från många webb-API:er
PascalCase	UserFirstName	Klassnamn i de flesta språk, React-komponenter, C#-metoder
snake_case	user_first_name	Python-variabler och -funktioner, Ruby, SQL-kolumnnamn, många JSON-API:er
SCREAMING_SNAKE_CASE	USER_FIRST_NAME	Konstanter i många språk, miljövariabler
kebab-case	user-first-name	CSS-egenskaper och klassnamn, HTML-attribut, URL:er, filnamn, CLI-flaggor

Namnen kommer från formerna: camelCase har puckel av versaler, snake_case ligger platt på understreck, och kebab-case-ord är spetsade på bindestreck.

Språk för språk

JavaScript och TypeScript. Variabler och funktioner är camelCase (getUserName), klasser och React-komponenter är PascalCase (UserCard), och konstanter är ofta SCREAMING_SNAKE_CASE (MAX_RETRIES). Språkets egna inbyggda funktioner följer samma mönster, till exempel getElementById och toLowerCase.

Python. PEP 8, Pythons stilguide, använder snake_case för funktioner, variabler och modulnamn, CapWords (PascalCase) för klasser och versaler med understreck för konstanter. Att skriva getUserName i Python fungerar, men det ser främmande ut för varje Python-utvecklare som läser det.

CSS och HTML. CSS-egenskaper är kebab-case (background-color, font-size), och de flesta klassnamnssystem följer efter (.nav-item, .card-title). HTML-attribut med data- är också kebab-case, och webbläsare omvandlar dem för JavaScript: data-user-id blir element.dataset.userId. Den raden sammanfattar väl varför båda konventionerna finns.

SQL och databaser. Kolumn- och tabellnamn är oftast snake_case (created_at, order_items). Många databaser gör om omarkerade namn till ett enda skiftläge, så createdAt kan tyst bli createdat om du inte citerar det varje gång. snake_case undviker det.

URL:er och filnamn. Använd kebab-case. Googles riktlinjer för URL-struktur rekommenderar bindestreck i stället för understreck för att separera ord, eftersom bindestreck tydligt markerar ordgränser. Gemener undviker också trasiga länkar på servrar som ser About.html och about.html som olika filer. Se vad en URL-slug är och vår guide om bästa praxis för URL-slugs.

JSON och API:er. Det finns ingen enskild regel. Många JavaScript-centrerade API:er använder camelCase, och många Python- eller Ruby-backends returnerar snake_case. Välj en stil per API och blanda aldrig i samma svar.

Vilken är lättast att läsa?

Alla tre är läsbara när man vant sig. Några praktiska skillnader:

• snake_case och kebab-case håller ett tydligt mellanrum mellan orden, vilket hjälper vid långa namn och förkortningar (html_parser vs htmlParser vs HTMLParser).
• camelCase är kortare och behöver inga extra tecken.
• kebab-case kan inte användas för variabelnamn i de flesta språk, eftersom user-name läses som user minus name.
• Dubbelklick markerar ett helt snake_case- eller camelCase-namn i de flesta editorer, men stannar oftast vid bindestreck i kebab-case.

Den verkliga regeln är konsekvens. En fil som blandar userName, user_name och UserName är svårare att läsa än en enskild stil som används överallt.

Konvertera mellan skiftlägen

Du behöver konvertera när du flyttar data mellan lager: ett Python-API:s created_at som blir en JavaScript-createdAt, en sidtitel som blir en URL, eller ett inställningsnamn som blir en miljövariabel.

Till kebab-case eller snake_case: använd slug-generatorn. Klistra in orden, ett namn per rad, och välj Bindestreck (-) för kebab-case eller Understreck (_) för snake_case. Den gör allt till gemener, omvandlar accenter till vanliga bokstäver och tar bort symboler. Den behandlar varje symbol som en ordgräns, så user_first_name blir user-first-name och tvärtom. Den delar däremot inte upp camelCase: userFirstName blir userfirstname. Lägg in mellanslag mellan orden först.

Till SCREAMING_SNAKE_CASE. Gör snake_case-versionen i slug-generatorn, klistra sedan in den i gratis skiftlägesomvandlaren och klicka på VERSALER. Åt andra hållet gör gemener MAX_RETRIES till max_retries.

Till camelCase eller PascalCase. Det finns ingen knapp för det med ett klick. Snabbaste vägen: skriv orden med mellanslag, klicka på Versal inledning i skiftlägesomvandlaren (user first name blir User First Name), ta sedan bort mellanslagen för PascalCase, eller gör första bokstaven liten för camelCase.

Många namn på en gång, i kod. För en stor namnändring använder du editorns sök-och-ersätt med reguljärt uttryck. Testa mönstret först i gratis regex-testaren: till exempel hittar _([a-z]) varje understreck följt av en bokstav, alltså platsen där snake_case behöver en versal i camelCase. Många editorer kan göra den fångade bokstaven till versal i ersättningen; se editorns dokumentation för syntaxen.

Saker att se upp med vid konvertering

• Förkortningar. Bestäm om det ska vara userId eller userID, HtmlParser eller HTMLParser, och håll dig till valet.
• Siffror. address_line_2 konverteras rent; addressLine2 är bra; ta bara inte bort siffran.
• Offentliga namn. Att byta namn på ett JSON-fält eller en URL bryter för dem som använder det. Lägg till en omdirigering för URL:er och håll gamla fältnamn fungerande en tid i API:er.

Konvertera din text

Använd gratis skiftlägesomvandlaren för VERSALER, gemener och Versal inledning, och slug-generatorn för kebab-case och snake_case. Båda körs i webbläsaren, och det du klistrar in lämnar aldrig din enhet.