Typy danych w praktyce (typeof, konwersje)

Preview Mode

You're viewing this material in preview mode. Sign up to track your progress and access all features.

Typy danych w praktyce (typeof, konwersje)
In Progress

Operator typeof

W JavaScript możemy w trakcie działania programu sprawdzić, jakiego typu jest dana wartość lub zmienna. Służy do tego operator typeof. Zwraca on nazwę typu w postaci łańcucha znaków. Przykłady:

console.log(typeof 42);           // "number"
console.log(typeof "hello");      // "string"
console.log(typeof true);         // "boolean"
let niezadeklarowana;
console.log(typeof niezadeklarowana); // "undefined" (bo zmienna istnieje, ale nie ma wartości)

Dzięki typeof możemy się dowiedzieć, z czym mamy do czynienia, co bywa pomocne przy debugowaniu lub warunkowym traktowaniu różnych typów.

Konwersja string → number

Często dane numeryczne są przechowywane lub wprowadzane jako tekst (np. zawartość pól formularza albo rezultat prompt). Aby móc wykonać operacje matematyczne na takich wartościach, trzeba je przekonwertować na typ liczbowy. W JavaScript istnieje kilka sposobów:

  • Number(string) – próbuje przekształcić cały string na liczbę (zwróci NaN jeśli się nie uda).
  • parseInt(string) – odczytuje liczbę całkowitą z początku stringa (ignoruje np. białe znaki, a także dalsze znaki po liczbie). Przykład: parseInt("123") da 123, a parseInt("123abc") też da 123. Jeśli string nie zaczyna się od cyfry, wynikiem będzie NaN.
  • parseFloat(string) – działa podobnie do parseInt, ale obsługuje liczby rzeczywiste (z kropką dziesiętną).

Najczęściej wystarczy nam Number() lub parseInt(). Zobaczmy przykład problemu i jego rozwiązania:

let a = "5";
let b = "7";
console.log(a + b);             // "57" - tu nastąpiło połączenie stringów, nie dodawanie!
let suma = Number(a) + Number(b);
console.log(suma);              // 12 - teraz wykonało poprawne dodawanie liczb

W powyższym kodzie zmienne a i b przechowują teksty "5" i "7". Operator + potraktował je jak dwa stringi, więc je skleił, dając "57". Dopiero po konwersji Number(a) i Number(b) uzyskaliśmy liczby 5 i 7, które można dodać do siebie (wynik 12).

Wartość NaN

NaN (skrót od Not a Number) to specjalna wartość typu number oznaczająca, że dana liczba jest "nieprawidłowa" lub nieokreślona. Przykład: Number("abc") zwróci NaN, bo ciąg "abc" nie reprezentuje żadnej liczby. Można sprawdzić, czy dana wartość jest NaN używając funkcji isNaN(x) (zwraca true, jeśli x nie jest liczbą).

Konwersja number → string

W drugą stronę też bywa potrzebna konwersja, np. gdy chcemy wyświetlić liczby łącznie z tekstem. JavaScript często robi to automatycznie (np. w konkatenacji: wiek + " lat" zamieni wiek na tekst). Możemy też jawnie konwertować:

  • String(123) da "123".
  • Metoda .toString() na liczbie, np. (123).toString().
  • Konkatenacja z pustym stringiem: 123 + """123".

Przykład: prosta walidacja wejścia (tekstowego na numeryczne)

let wpisanyWiek = "17"; // przykładowo, taka wartość mogła zostać odczytana z prompt lub formularza
let wiekNum = Number(wpisanyWiek);
if (isNaN(wiekNum)) {
    console.log("Wprowadzono niepoprawny wiek (nie jest liczbą).");
} else {
    if (wiekNum >= 18) {
        console.log("Użytkownik pełnoletni.");
    } else {
        console.log("Użytkownik niepełnoletni.");
    }
}

W powyższym kodzie najpierw próbujemy przekonwertować string wpisanyWiek na liczbę. Jeśli wynik jest NaN (to sprawdzamy przez isNaN()), to znaczy, że tekst nie był poprawną reprezentacją liczby – wypisujemy komunikat o błędzie. W przeciwnym razie wykorzystujemy przekonwertowaną liczbę wiekNum do podjęcia decyzji w if-ie (pełnoletni czy nie).

Ćwiczenia

  1. Wypróbuj operator typeof na różnych wartościach i zmiennych. Np.:
  2. Zdefiniuj let x = 10 i sprawdź typeof x (powinno być "number").
  3. Przypisz x = "dziesięć" i znów sprawdź typeof x (teraz będzie "string").
  4. Sprawdź typeof true, typeof undefined, a także stwórz pusty obiekt let obj = {} i sprawdź typeof obj (wynik może Cię zaskoczyć!).
  5. Weź dwie zmienne tekstowe z liczbami, np. let str1 = "8"; let str2 = "15";. Spróbuj je dodać operatorem + i przeanalizuj wynik. Następnie skonwertuj je na typ number (np. używając Number() lub parseInt()) i dodaj ponownie. Porównaj rezultaty w konsoli.
  6. Zdefiniuj zmienną dane i przypisz jej wartość złożoną z cyfr i liter, np. "123xyz". Spróbuj zamienić ją na liczbę przez Number(dane) i sprawdź wynik. Użyj isNaN() aby potwierdzić, czy wynik jest NaN. Zastanów się, dlaczego tak się stało.
  7. Utwórz zmienną liczba i przypisz jej wartość liczbową, np. 42. Następnie zamień tę liczbę na string na trzy różne sposoby: używając konkatenacji z "", funkcji String() oraz metody .toString(). Po każdej konwersji zastosuj typeof, aby upewnić się, że otrzymałeś "string".