Metody stringów w JavaScript: ściąga (na żywo)

Metody stringów w JavaScript: ściąga

Metody stringów w JavaScript: ściąga z wynikami na żywo | We.Inc

Wpisz własny tekst i zobacz na żywo, jak działa na nim każda popularna metoda stringów JavaScript: slice, split, replace z regex, padStart, trim i inne, plus gotowe do skopiowania funkcje walidacji.

Stringi w JavaScript mają wbudowane metody do wyszukiwania (includes, indexOf, startsWith), wycinania (slice, substring, split), zmiany wielkości liter, przycinania, dopełniania i zastępowania. Żadna z nich nie zmienia oryginalnego tekstu: stringi są niemutowalne, więc każda metoda zwraca nową wartość. Wpisz poniżej dowolny tekst, aby obserwować działanie każdej metody podczas edycji.

Metody używane najczęściej

Zadanie
Metoda
Przykładowy wynik

Zawiera słowo?
"web site".includes("site")

Pierwsze 3 znaki
"website".slice(0, 3)
"web"

Ostatni znak
"website".at(-1)

Słowa do tablicy
"a b c".split(" ")

Zastąp każde dopasowanie
"a-b-c".replaceAll("-", "/")

Dopełnij liczbę zerami
"7".padStart(3, "0")

Lista metod podaje Ci nazwy; uruchomienie metod na własnym tekście pokazuje ich zachowanie. Poniższa ściąga na żywo stosuje każdą metodę do tego, co wpiszesz, więc przypadki brzegowe, takie jak ujemne indeksy, puste stringi i powtórzone spacje, widać od razu. Dalej znajdziesz zastępowanie z regex i małe funkcje walidacji, które możesz wkleić do formularza.

Wpisz lub wklej tekst w pole. Każdy wiersz ściągi przelicza się na bieżąco podczas pisania.
Filtruj wiersze po nazwie lub grupie, na przykład Wyszukiwanie lub Zmiana, aby szybko znaleźć metodę.
Edytuj wzorzec regex i zamiennik, aby przetestować replace z grupami przechwytującymi na swoim tekście.
Skopiuj funkcje pomocnicze niżej do przycinania, slugów, title case i sprawdzania adresów email.

Wybieraj slice zamiast substr. MDN oznacza substr jako przestarzałą, a slice przyjmuje ujemne pozycje liczone od końca.
replaceAll z regex wymaga flagi g, w przeciwnym razie rzuca TypeError.
Używaj localeCompare przy sortowaniu nazw, aby znaki diakrytyczne i wielkość liter sortowały się tak, jak oczekują czytelnicy.
length liczy jednostki kodu UTF-16, więc pojedyncze emoji może mieć długość 2. Rozłóż string do tablicy, aby policzyć punkty kodowe.
Łączenie wywołań w łańcuch jest w porządku, bo każde zwraca nowy string: text.trim().toLowerCase().replaceAll(" ", "-").

Najczęściej zadawane pytania

Czym różni się slice od substring?

Obie wycinają fragment stringa od indeksu początkowego do końcowego. slice traktuje liczbę ujemną jako liczoną od końca, więc slice(-3) zwraca trzy ostatnie znaki. substring traktuje liczby ujemne jak zero i zamienia argumenty miejscami, jeśli początek jest większy od końca.

Jak zastąpić wszystkie wystąpienia w stringu?

Użyj replaceAll("old", "new") dla zwykłego tekstu albo replace z globalnym regex, na przykład text.replace(/old/g, "new"). Wywołanie replace ze zwykłym stringiem zmienia tylko pierwsze dopasowanie.

Jak używać grup przechwytujących w zamienniku?

Otocz części wzorca nawiasami i odwołuj się do nich jako $1, $2 w stringu zamiennika. Do grup nazwanych zapisanych jako (?<year>\d{4}) odwołujesz się przez $<year>, a $& wstawia całe dopasowanie.

Jak sprawdzić, czy string jest poprawnym adresem email?

Prosty wzorzec wyłapie oczywiste literówki, ale żaden regex nie odwzorowuje w pełni reguł adresów email. Najbardziej niezawodne sprawdzenie w przeglądarce to pole input z type="email", które stosuje wzorzec ze standardu HTML, a następnie wysłanie wiadomości potwierdzającej.

Czy metody stringów zmieniają oryginalną zmienną?

Nie. Wartości stringa nie można zmienić po jej utworzeniu. Metody takie jak toUpperCase zwracają nowy string, więc musisz przypisać wynik: name = name.toUpperCase().

Indeksy, liczby ujemne i znaki

Pozycje zaczynają się od 0. at() i slice() przyjmują liczby ujemne liczone od końca, a charAt() i dostęp przez nawiasy kwadratowe nie, dlatego text.at(-1) to zgrabny sposób na pobranie ostatniego znaku.
JavaScript przechowuje tekst w UTF-16. Większość liter zajmuje jedną jednostkę, ale emoji i niektóre systemy pisma zajmują dwie, więc length, slice i charAt mogą przeciąć taki znak na pół. Array.from(text) lub pętla for...of przechodzi natomiast po prawdziwych punktach kodowych.

Metody wyszukiwania, które zwracają różne rzeczy

includes, startsWith i endsWith zwracają wartość logiczną. indexOf i lastIndexOf zwracają pozycję lub -1. search przyjmuje regex i również zwraca pozycję. match zwraca dopasowania, a matchAll zwraca iterator wszystkich dopasowań z ich grupami.
Wybieraj według tego, czego potrzebuje kolejna linia. Jeśli rozgałęziasz kod tylko na tak lub nie, metoda zwracająca wartość logiczną czyta się jaśniej niż porównywanie indeksu z -1.

Czyszczenie danych od użytkownika

Przycinaj przed walidacją, bo wklejony tekst często ma spacje lub znaki nowej linii na końcach. Ujednolicaj wielkość liter przed porównaniem i zwijaj ciągi białych znaków za pomocą replace(/\s+/g, " ").
Walidacja w przeglądarce to wygoda dla odwiedzającego. Powtórz te same sprawdzenia na serwerze, bo żądania można wysłać w ogóle bez Twojej strony.

Zastępowanie wyrażeniem regularnym

Zastępowanie z regex może dopasowywać wzorce zamiast stałego tekstu, zmieniać kolejność części dzięki grupom przechwytującym lub obliczać zamiennik funkcją.

Specjalne wzorce w stringu zamiennika

Wzorzec
Wstawia

Całe dopasowanie

Tekst numerowanej grupy przechwytującej

$<name>
Tekst nazwanej grupy przechwytującej

Dosłowny znak dolara

Wzorce zastępowania z regex, których użyjesz ponownie

Każda linia działa samodzielnie. Forma z funkcją pozwala przekształcić każde dopasowanie, tutaj zamieniając pierwszą literę każdego słowa na wielką.

Funkcje do walidacji i czyszczenia

Slug, title case, skracanie i podstawowe sprawdzenie email

Małe funkcje bez zależności do formularzy i URL. Sprawdzenie email wyłapuje tylko oczywiste błędy; potwierdzaj adresy, wysyłając wiadomość.

Metody, których warto unikać

Starsze metody, które MDN oznacza jako przestarzałe

Metoda
Użyj zamiast tego

substr(start, length)
slice(start, start + length)

anchor(), bold(), link() i inne metody opakowujące w HTML
Twórz elementy przez DOM i ustawiaj textContent

Inspekcja

Liczba jednostek kodu UTF-16

Inspekcja

Znak na danej pozycji; liczby ujemne liczą od końca

Inspekcja

Ostatni znak

Inspekcja

Znak na danej pozycji, pusty string poza zakresem

Inspekcja

Numer jednostki kodu UTF-16 na danej pozycji

Wyszukiwanie

true, jeśli tekst występuje gdziekolwiek

Wyszukiwanie

true, jeśli string zaczyna się od tekstu

Wyszukiwanie

true, jeśli string kończy się tekstem

Wyszukiwanie

Pierwsza pozycja tekstu lub -1

Wyszukiwanie

Ostatnia pozycja tekstu lub -1

Wyszukiwanie

Pozycja pierwszego dopasowania regex lub -1

Wyszukiwanie

Tablica wszystkich dopasowań z globalnym regex

Wycinanie

Fragment między dwiema pozycjami

Wycinanie

Pięć ostatnich znaków

Wycinanie

Fragment między dwiema pozycjami, bez liczb ujemnych

Wycinanie

Tablica części podzielonych separatorem

Zmiana

Każda litera wielka

Zmiana

Każda litera mała

Zmiana

Usuwa białe znaki z obu końców

Zmiana

Usuwa białe znaki z początku

Zmiana

Usuwa białe znaki z końca

Zmiana

Dopełnia początek do danej długości

Zmiana

Dopełnia koniec do danej długości

Zmiana

String połączony ze sobą n razy

Zmiana

Zastępuje tylko pierwsze dopasowanie

Zmiana

Zastępuje każde dopasowanie

Zmiana

Łączy stringi; + robi to samo

Zmiana

Postać normalna Unicode, przydatna przed porównaniem

Porównanie

Liczba ujemna, 0 lub dodatnia dla kolejności sortowania

Wszystkie

Ściąga metod stringów na żywo

Wpisz tekst, a każda metoda poniżej zadziała na nim podczas edycji.

Twój tekst (str)

Filtruj metody

na przykład pad lub trim

Grupa metod

Metody stringów według grup (pokazano: {n})

Wywołanie

Grupa

Co robi

Wynik

Wypróbuj zastępowanie z regex

Edytuj wzorzec, flagi i zamiennik, aby przetestować je na własnym tekście.

Tekst

Wzorzec

Flagi

Zamiennik

Nieprawidłowy wzorzec: {msg}

Zacznij za darmo · Bez karty kredytowej

Powiązane: Poradniki

Produkt

Dla kogo

Funkcje

Zasoby

Firma

Mapa strony