Hoppa till huvudinnehåll

Så här konverterar du text till camelCase, snake_case, kebab-case och PascalCase

Av Converty Team

Lär dig hur du konverterar text till camelCase, snake_case, kebab-case och PascalCase utan att förvandla namnrensning till en manuell omskrivning.

Så här konverterar du text till camelCase, snake_case, kebab-case och PascalCase

Att namnge städning är ett av de där små jobben som dyker upp på många olika ställen. Ett produktnamn måste bli en webbadress slug. Ett kalkylarkshuvud måste bli ett egenskapsnamn. En CSS-token behöver en förutsägbar identifierare. En anteckning från en designfil måste bli något som en utvecklare kan klistra in i kod utan att skriva om varje ord för hand.

Det svåra är att inte förstå vad camelCase, snake_case, kebab-case eller PascalCase betyder. Det svåra är att tillämpa samma regel konsekvent när källtexten har mellanslag, skiljetecken, versaler och blandade avgränsare. Det är där ett fokuserat arbetsflöde för Case / Slug / Escape hjälper. Klistra in källtexten en gång, granska fallvarianterna tillsammans och kopiera utdata som passar nästa system.

Varför ärendekonvertering är viktig i verkligt arbete

Fallkonvertering sitter mellan skrivande och implementering. Den människovänliga frasen är vanligtvis inte det maskinvänliga namnet.

Föreställ dig en funktionsflagga som heter "New Checkout Banner". Produktanteckningen använder titelfall. Koden kan behöva newCheckoutBanner. En konfigurationsfil kan förvänta sig new_checkout_banner. Ett ruttsegment eller CSS-klass kanske föredrar new-checkout-banner. Samma idé går igenom flera system, och varje manuell omskrivning är en liten möjlighet till drift.

Samma problem dyker upp i innehållsoperationer. En rubrik blir en slug. Ett kampanjnamn blir en spårningsnyckel. En supportetikett blir en intern identifierare. Om varje person skriver om namnet på olika sätt, blir arbetet svårare att söka, jämföra och underhålla.

Hur man konverterar text till vanliga skiftlägesformat

Det snabbaste arbetsflödet är att hålla källfrasen synlig och generera de troliga utgångarna sida vid sida.

  1. Öppna verktyget Case / Slug / Escape.
  2. Klistra in frasen, etiketten, titeln eller identifieraren du behöver för att normalisera.
  3. Jämför de genererade camelCase-, PascalCase-, snake_case- och kebab-case-utgångarna.
  4. Kopiera formuläret som matchar destinationssystemet.
  5. Håll källfrasen i närheten om någon behöver bekräfta det mänskligt läsbara namnet senare.

Detta är bättre än att manuellt redigera separatorer eftersom regeln tillämpas en gång. Du gissar inte om ett ord ska förbli versaler eller om ett skiljetecken ska bli en avgränsare. Du förvandlar en fras till förutsägbara resultat.

Vilket skiftläge ska du använda?

Olika fallstilar mappar vanligtvis till olika destinationer.

FormateraVanligt brukPraktisk anledning
camelCaseJavaScript-variabler, objektnycklar, UI-tillståndsnamnKompakt och vanligt i frontend-kod
PascalCaseKomponentnamn, klassnamn, exporterade typerHåller namngivna kodenheter lätta att skanna
snake_caseDatafält, CSV-härledda rubriker, vissa API:erTydliga avskiljare med gemener stabilitet
kebab-caseURL slugs, ruttsegment, CSS-liknande etiketterLäsbar i stigar och avstavade sammanhang

Den viktiga delen är att inte behandla en stil som universellt korrekt. Rätt utgång är den som passar platsen dit texten ska härnäst.

Använd samma pass för slugs och flykt

Ärenderensning visas ofta bredvid annan textrensning. När en titel har blivit kebab-case kan den också behöva bli en ren webbadress slug. När ett utdrag har blivit en identifierare kan ett relaterat värde behöva escape-adress, HTML eller JSON innan det säkert kan klistras in någon annanstans.

Det är därför Converty håller skiftläge, slug och escape-utgångar tillsammans. Verktyget försöker inte bli ett innehållshanteringssystem eller kodredigerare. Det är ett kort operativt steg för att omvandla grov text till de former som publicering, routing och implementering förväntar sig.

För ett bredare startarbetsflöde som kombinerar slugs med Markdown och favicon prep, läs Hur innehållsteam kan förbereda Slugs, Markdown och Favicons för en ny lansering. Om nästa fråga handlar om kodning snarare än namngivning, fortsätt med When to Use URL Encoding, HTML Escaping och JSON Escaping.

Öppna verktyget Case / Slug / Escape när nästa uppgift förvandlar en grov fras till en förutsägbar identifierare, slug, eller escaped sträng.

Du kanske också gillar