Przejdź do głównej treści

Jak przekonwertować tekst na camelCase, snake_case, kebab-case i PascalCase

Autor: Converty Team

Dowiedz się, jak konwertować tekst na camelCase, snake_case, kebab-case i PascalCase bez przekształcania czyszczenia nazewnictwa w ręczne przepisywanie.

Jak przekonwertować tekst na camelCase, snake_case, kebab-case i PascalCase

Czyszczenie nazewnictwa to jedno z tych małych zadań, które pojawia się w wielu różnych miejscach. Nazwa produktu musi stać się adresem URL slug. Nagłówek arkusza kalkulacyjnego musi stać się nazwą właściwości. Token CSS potrzebuje przewidywalnego identyfikatora. Notatka z pliku projektu musi stać się czymś, co programista będzie mógł wkleić do kodu bez ręcznego przepisywania każdego słowa.

Najtrudniejszą częścią jest niezrozumienie, co oznaczają camelCase, snake_case, kebab-case lub PascalCase. Najtrudniejszą częścią jest konsekwentne stosowanie tej samej zasady, gdy tekst źródłowy zawiera spacje, znaki interpunkcyjne, wielkie litery i mieszane separatory. Właśnie w tym pomaga skoncentrowany przepływ pracy Case / Slug / Escape. Wklej raz tekst źródłowy, przejrzyj razem warianty przypadków i skopiuj dane wyjściowe pasujące do następnego systemu.

Dlaczego konwersja przypadków ma znaczenie w prawdziwej pracy

Konwersja przypadków odbywa się pomiędzy pisaniem a wdrażaniem. Wyrażenie przyjazne człowiekowi zwykle nie jest nazwą przyjazną maszynie.

Wyobraź sobie flagę funkcji o nazwie „Nowy baner realizacji transakcji”. W notatce produktu zastosowano wielkość liter. Kod może wymagać newCheckoutBanner. Plik konfiguracyjny może oczekiwać new_checkout_banner. Segment trasy lub klasa CSS może preferować new-checkout-banner. Ten sam pomysł przechodzi przez kilka systemów, a każde ręczne przepisanie to niewielka szansa na dryf.

Ten sam problem pojawia się w operacjach na treści. Nagłówek zmienia się w slug. Nazwa kampanii staje się kluczem śledzenia. Etykieta pomocnicza staje się identyfikatorem wewnętrznym. Jeśli każda osoba przepisze nazwę inaczej, wyszukiwanie, porównywanie i utrzymywanie pracy stanie się trudniejsze.

Jak przekonwertować tekst na popularne formaty wielkości liter

Najszybszy przepływ pracy polega na tym, aby fraza źródłowa była widoczna i generowała prawdopodobne wyniki obok siebie.

  1. Otwórz narzędzie Case / Slug / Escape.
  2. Wklej frazę, etykietę, tytuł lub identyfikator, który chcesz znormalizować.
  3. Porównaj wygenerowane wyniki camelCase, PascalCase, snake_case i kebab-case.
  4. Skopiuj formularz pasujący do systemu docelowego.
  5. Zachowaj frazę źródłową w pobliżu, jeśli ktoś będzie musiał później potwierdzić nazwę czytelną dla człowieka.

Jest to lepsze niż ręczna edycja separatorów, ponieważ reguła jest stosowana raz. Nie zgadujesz, czy słowo powinno pozostać pisane wielką literą, czy też znak interpunkcyjny powinien stać się separatorem. Zamieniasz frazę w przewidywalne wyniki.

Którego przypadku powinieneś użyć?

Różne style obudów są zwykle powiązane z różnymi miejscami docelowymi.

FormatPowszechne zastosowaniePowód praktyczny
camelCaseZmienne JavaScript, klucze obiektów, nazwy stanów interfejsu użytkownikaKompaktowy i powszechny w kodzie frontendowym
PascalCaseNazwy komponentów, nazwy klas, eksportowane typyUłatwia skanowanie nazwanych jednostek kodowych
snake_casePola danych, nagłówki pochodzące z CSV, niektóre interfejsy APIWyczyść separatory ze stabilnością małych liter
kebab-caseAdres URL slugs, segmenty trasy, etykiety przypominające CSSCzytelne w ścieżkach i kontekstach z łącznikami

Ważne jest, aby nie traktować jednego stylu jako uniwersalnie poprawnego. Prawidłowe wyjście to takie, które pasuje do miejsca, w którym tekst będzie dalej.

Użyj tego samego hasła do slugs i ucieczki

Czyszczenie wielkości liter często pojawia się obok innych metod czyszczenia tekstu. Gdy tytuł zmieni się na kebab-case, może zaistnieć potrzeba zmiany go na czysty adres URL slug. Gdy fragment kodu stanie się identyfikatorem, powiązana wartość może wymagać zmiany znaczenia adresu URL, kodu HTML lub JSON, zanim będzie można ją bezpiecznie wkleić w innym miejscu.

Dlatego właśnie Converty przechowuje razem wyniki wielkości liter, slug i ucieczki. Narzędzie nie stara się być systemem zarządzania treścią czy edytorem kodu. Jest to krótki krok operacyjny umożliwiający przekształcenie szorstkiego tekstu w kształty oczekiwane przez publikację, routing i implementację.

Aby zapoznać się z szerszym procesem uruchamiania, który łączy slugs z Markdown i przygotowaniem favicon, przeczytaj Jak zespoły zajmujące się treścią mogą przygotować Slugs, Markdown i Favicons do nowego uruchomienia. Jeśli następne pytanie dotyczy kodowania, a nie nazewnictwa, przejdź do Kiedy używać kodowania URL, zmiany znaczenia HTML i zmiany znaczenia JSON.

Otwórz narzędzie Case / Slug / Escape, gdy następnym zadaniem jest przekształcenie przybliżonej frazy w przewidywalny identyfikator, slug lub ciąg znaków ucieczki.

Może Ci się też spodobać