Operacje na zmiennych tekstowych w JavaScript

Stronę tą wyświetlono już: 11593 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

var text = "Tekst";
var text2 = "do połączenia";
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

var age = 20;
var name = "Jacek";
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

var text = "jakiś tekst";
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

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

Iterowanie za pomocą pętli for:

Listing 5

var text = "jakiś tekst";
for(var i = 0; i < text.length; i++){
if(text[i] == 'ś'){
alert("ś znaleziono na pozycji " + i);
}
}

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

var text = "Jacek ma 20 lat";
alert(text.substr(0, 5)); // wycina i wyświetla pierwszych pięć znaków tekstu
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

var text = "obliczeniowo.com.pl";
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

var text = "Żółty jest kolorem słonecznym, żółty jest kolorem ciepłym";
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

var text = "Jacek ma 20 lat";
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

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

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

var int_number = 20;
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

var pi = 3.14159265359;
alert(pi.toFixed(3)); // wyświetli: 3.141
var float_number = 3.2;
alert(float_number.toFixed(3)); // wyświetli: 3.200

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

Listing 13