Operacje na zmiennych tekstowych w JavaScript

Stronę tą wyświetlono już: 1973 razy

Łączenie ciągów znaków z innymi typami prostymi

Połączenie dwóch zmiennych tekstowych w JavaScript jest banalnie proste i odbywa się za pomocą operatora dodawania:

Listing 1
  1. var text = "Tekst";
  2. var text2 = "do połączenia";
  4. alert(text + " " + "do połączenia");

Wynikiem działania powyższego skryptu będzie wyświetlenie okna dialogowego z tekstem: Tekst do połączenia.

Można również łączyć tekst z zmiennymi liczbowymi. Oto przykład:

Listing 2
  1. var age = 20;
  2. var name = "Jacek";
  4. alert(name + " ma " + age + " lat");

Połączenie powyższego tekstu da w wyniku: Jacek ma 20 lat.

Pozyskanie długości ciągu znaków zawartego w zmiennej tekstowej za pomocą właściwości length

Listing 3
  1. var text = "jakiś tekst";
  2. alert(text.length);

Wyciąganie pojedynczego znaku z ciągu znaków i interowanie po ciągu znaków

Ciąg znaków to jest tak naprawdę tablica, więc czemuż by nie wyciągnąć pojedynczego znaku tak jak to się robi z elementami tablicy:

Listing 4
  1. var text = "jakiś tekst";
  2. echo(text[4]); // wyświetli piątą literę, czyli: ś

Iterowanie za pomocą pętli for:

Listing 5
  1. var text = "jakiś tekst";
  3. for(var i = 0; i < text.length; i++){
  4. if(text[i] == 'ś'){
  5. alert("ś znaleziono na pozycji " + i);
  6. }
  7. }

Przycinanie tekstu za pomocą metody substr

Zmienne tekstowe posiadają metodę substr, która umożliwia ich przycinanie. Oto przykład przycięcia tekstu:

Listing 6
  1. var text = "Jacek ma 20 lat";
  2. alert(text.substr(0, 5)); // wycina i wyświetla pierwszych pięć znaków tekstu
  3. alert(text.substr(-5)); // wycina i wyświetla sześć ostatnich znaków tekstu

Znajdowanie tekstu w tekście za pomocą metody search

Metoda search zwraca indeks pierwszego wystąpienia tekstu w danym ciągu znaków. Jeżeli tekst nie zostanie znaleziony to zwracana wartość jest równa -1. Funkcja ta używa również wyrażeń regularnych. Oto przykład prostego jej użycia:

Listing 7
  1. var text = "obliczeniowo.com.pl";
  2. alert(text.search("com")); // zwróci położenie "com" w tekście

Metoda ta zwraca uwagę na wielkość liter, aby tego uniknąć można użyć następującego wyrażenia regularnego:

Listing 8
  1. var text = "Żółty jest kolorem słonecznym, żółty jest kolorem ciepłym";
  2. alert(text.search(/żółty/i));

Zamiana tekstu w tekście za pomocą metody replace

Metoda replace przyjmuje dwa argumenty, pierwszy z nich to zamieniany tekst a drugi to tekst wstawiany. Metoda ta zwraca wynik swojego działania.

Listing 9
  1. var text = "Jacek ma 20 lat";
  2. alert(text.replace("Jacek", "Maciek"));

Podział tekstu za pomocą metody split

Metoda split zwraca tablicę tekstu podzielonego względem podanego jako pierwszy argument tej funkcji separatora. Drugi argument (opcjonalny) określa maksymalną liczbę podziału. Oto przykład:

Listing 10
  1. var names = "Maciek, Ania, Michał, Robert, Aga";
  2. var namesTable = names.split(", ");
  3. for(var i = 0; i < namesTable.length; i++){
  4. alert(namesTable[i]);
  5. }

Formatowanie zmiennych liczbowych przy zamianie na tekst

Załóżmy, że dana liczba całkowita powinna zawsze mieć długość 3 znaków i, że jest pewne, iż liczba ta nigdy nie przekroczy długość tych trzech znaków, wtedy to można liczbę taką sformatować następująco:

Listing 11
  1. var int_number = 20;
  2. alert(("00" + int_number).substr(-3)); // metoda substr przycina tekst do trzech znaków licząc od tyłu

Powyższa metoda nie jest zbyt elegancka i ma pewną wadę, mianowicie taką, że gdy liczba będzie np. 4-ro cyfrowa to pierwsza cyfra zostanie ucięta.

Nieco lepiej ma się sytuacja w przypadku formatowania zmiennych zmiennoprzecinkowych, albowiem dostępna jest funkcja toFixed, która to z kolei umożliwia określenie do ilu cyfr po przecinku ma być wyświetlona liczba zmiennoprzecinkowa:

Listing 12
  1. var pi = 3.14159265359;
  2. alert(pi.toFixed(3)); // wyświetli: 3.141
  4. var float_number = 3.2;
  5. alert(float_number.toFixed(3)); // wyświetli: 3.200

Możliwe jest również uzyskanie notacji naukowej w formacie np. 1e3 co odpowiada zapisowi 103. W celu uzyskania takiego zapisu konieczne jest skorzystanie z funkcji toExponential w podobny do poprzedniego sposób:

Listing 13
  1. var float_number = 3200.56;
  2. alert(float_number.toExponential(3)); // wyświetli: 3.201e3

Komentarze