Nauka JavaScript: Stringi i literały.

Uczysz się JavaScript i poszukujesz dodatkowych materiałów? W tym artykule znajdziesz informacje na temat typów zmiennych “strings” i jak sobie z nimi radzić. Cały kod pisany jest w standardzie ES6. Brzmi ciekawie?

Czego się dzisiaj dowiesz?

W tym artykule opisuje podstawowe metody które można zastosować przy operacjach na zmiennych typu “string” w języku JavaScript m.in. startsWith, endsWith, include, repeat oraz na koniec przyjrzymy się literałom. Porcja praktycznej wiedzy.

Seria JavaScript

Blog Bedekodzic.pl traktuje o nauce programowania aplikacji webowych. Jak można o tym pisać bez znajomości JavaScript? No właśnie… Zakładając, że masz już podstawową wiedzę na temat JS’a będę objaśniał zagadnienia związane ze jego współczesnymi wersjami czyli ES6 i w górę!

Wszystkie wpisy z serii można śledzić na moim blogu pod tym LINKIEM

Zmienne typu string

Zmienne typu string są jednym z podstawowych rodzajów zmiennych w JSie. Czym są? Niczym innym tylko zmiennymi zawierającymi ciągi cyfr, liter i znaków. Po co to komu? Są one kluczowe przy budowie aplikacji gdzie bardzo często pobieramy zawartość z formularzy, “wstrzykujemy” fragmenty kodu HTML (lub podobnego) w odpowiednie miejsca, wysyłamy tokeny itp. To wszystko najczęściej jest robione w formie ciągu znaków czyli stringa. Jak wygląda string?

Prosty przykład zmiennej typu string:

let msg = "Bedekodzic jest super!";

Jak to wygląda? Jest to dowolny ciąg znaków okraszony na początku cudzysłowem podwójnym “ ”  (double quotation) lub pojedynczym ‘ ’ (single quotation). Czym się one różnią? W zasadzie tylko wyglądem.

Co możemy zrobić z takim ciągiem tekstowym? JavaScript posiada wiele metod które pozwalają na modyfikację takich ciągów tekstowych. W tym wpisie nie będę się rozpisywał na temat podstawowych metod bo skupię się na standardzie ES6. Nie mniej jeśli chcesz podszlifować swój warsztat na temat stringów zanim przejdziesz dalej możesz sprawdzić np.

TUTAJ (PL)   lub TUTAJ (EN) 

Sprawdzanie zmiennej

Teraz użyjemy kilku metod do sprawdzenia zmiennej typu string.

.startsWith()

Jak sama nazwa wskazuje sprawdzamy od czego zaczyna się ciąg znaków. Skąd wziąć taki ciąg znaków? Po prostu definiujemy w zmiennej na sztywno lub pobieramy z pliku .html (input, formularz) za pomocą metody .value(). Ja pracuje na pierwszym przypadku:

let msg = 'Bedekodzic jest super!';

Chcę sprawdzić czy zmienna zaczyna się od pożądanego ciągu znaków. Użyje do tego konsoli:

console.log(msg.startsWith('Bede'));

Powyższy kod powinien mi zwrócić wartość true. Sprawdzenie udane 🙂

.endsWith()

Teraz sprawdzamy czym się kończy:

let msg = 'Bedekodzic jest super!';

console.log(msg.endsWith('per'));

Konsola wyrzuci mi false. Dlaczego? Bo na końcu jest jeszcze wykrzyknik! Zmienna nie przeszła warunku 🙁

.includes()

Sprawdzamy zawartość zmiennej:

let msg = 'Bedekodzic jest super!';

console.log(msg.includes('jest'));

Teraz otrzymamy true bo fraza jest w obrębie zmiennej.

Sprawdzanie od konkretnego miejsca

Wszystkie powyższe operacje możemy wykonać stawiając za punkt startowy/końcowy konkretny znak w ciągu np. zacznij sprawdzać od 5 znaku.

Zbadajmy w ogóle długość ciągu:

let msg = 'Bedekodzic jest super!';

console.log(msg.length);

Konsola wyrzuci nam wynik 22 bo w ciągu jest 22 znaków (łącznie ze spacjami). Teraz zacznijmy nasze sprawdzanie powiedzmy w ten sposób:

console.log(msg.startsWith('Bede', 6)); //false

console.log(msg.endsWith('per', 21)); //true

console.log(msg.includes('jest', 12)); //false

Otrzymamy wyniki kolejno false, true, false. Dlaczego?

Bo startsWith() zaczyna się od 6 znaku czyli ‘o’ w ciągu a tam już nie ma frazy ‘Bede’. Czyli false.

Bo endsWith() kończy swoją analizę na 21 znaku czyli ‘r’ więc nie uwzględnia ‚!’. Czyli ostatnie znaki to per. True.

Bo includes() zaczyna od 12 znaku czyli ‘e’. Potem już nie ma całej frazy ‘jest’. False.

Proste. Prawda?

.repeat()

Jak sama nazwa wskazuje tu będziemy powtarzać.

let info='XO';

console.log(info.repeat(4));

Czterokrotnie powtórzymy zmienną info. Co otrzymamy?

‘XOXOXOXO’ 🙂

Template literals

To wręcz rewolucyjny sposób przedstawiania zmiennych typu string bo nie wrzucamy znaków do cudzysłowu pojedynczego lub podwójnego lecz do… template literalsa (zna ktoś sensowne tłumaczenie?) czyli znaku:

``

Taki skrzywiony pojedynczy cudzysłów.

Ten sposób pozwala nie tylko na przenoszenie ciągu zmiennych do nowych linii gdzie:

To:

let msg = "Ja: Bedekodzic jest super! \n\
Ty: Ciekawe…";

Jest tożsame z tym:

let msg = `Ja: Bedekodzic jest super!
Ty: Ciekawe…`;

Ale na swobodne ‘wstrzykiwanie’  zmiennych do ciągów znaków. To ogromne ułatwienie wykorzystywane we współczesnych frameworkach JS. O co chodzi?

Mamy trzy zmienne. Jeden to będzie string a dwie będą liczbami na których wykonam operację i wstrzyknę do stringa ( takie z życia wzięte ostatnio ). Robi się to za pomocą formuły ${}. Wszystko w jednym prostym zapisie:

let materials = 3000,
    work = 3000,
    text = `Na remont wydałem wydałem: ${(materials+work)} PLNow`;

console.log(text);

Jako wynik otrzymuje komunikat: “Na remont wydałem wydałem: 6000 PLNow”.

Co dalej?

Dalej jest już tylko kontynuacja nauki i praktyczne zastosowanie wiedzy 🙂 Jeśli potrzebujecie dodatkowych informacji na temat stringów we współczesnym JSie możecie poczytać np. TUTAJ

Podsumowanie

Zmienne typu ‘string’ są niezbędne przy tworzeniu współczesnych aplikacji. Ja już je polubiłem. A Ty?

Print Friendly, PDF & Email

Bartek Cis

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?
  • Tomasz Sochacki

    Od siebie dodam dwie ciekawostki 🙂

    const msg = ‚Bedekodzic jest super!’;

    msg.startsWith(‚B’); //true
    msg.startsWith(‚b’); //false
    msg.startsWith(‚B’,0); //true
    msg.startsWith(‚B’,1); //false
    msg.startsWith(‚B’,-1); //true
    msg.startsWith(‚B’,-500); //true

    Pierwsza to fakt, że metody String.prototype analizują dokładne punkty kodowe znaków, czyli litera „B” nie będzie tożsama z literką „b”. Warto o tym pamiętać np. pobierając dane z formów i w razie czego np. oblecieć toLowerCase() itp.

    Druga to fakt, że jeśli przekażemy jako indeks wartość ujemną to przyjmie ona domyślną wartość, czyli zero. Nie da się więc szukać od końca 🙂 Ma to oczywiście sens, bo po to są dwie metody starts i ends.

    Powodzenia w blogowaniu (mój blog już od dawna wymaga reanimacji ale jakoś nie mogę się za to zabrać…).

    Pozdrawiam!