Konwersja typów w JavaScript

Wprowadzenie do konwersji typów

Konwersja typów (ang. type conversion lub type coercion) to proces zmiany typu jednej wartości na inny. W JavaScript wyróżniamy dwa główne typy konwersji:

  • Konwersja jawna (explicit): Programista świadomie konwertuje typy używając odpowiednich funkcji lub operatorów.
  • Konwersja niejawna (implicit): JavaScript automatycznie konwertuje typy w niektórych sytuacjach.

Zrozumienie mechanizmów konwersji typów jest kluczowe dla unikania błędów i pisania przewidywalnego kodu.

Konwersja niejawna (Implicit Coercion)

JavaScript automatycznie konwertuje typy w niektórych operacjach. Jest to wygodne, ale może prowadzić do nieoczekiwanych rezultatów.

1. Konwersja do stringa
console.log(5 + "3"); // "53" (liczba konwertowana do stringa)
console.log("5" + 3); // "53" (liczba konwertowana do stringa)
console.log(true + "1"); // "true1" (boolean konwertowany do stringa)
2. Konwersja do liczby
console.log("5" - 3); // 2 (string konwertowany do liczby)
console.log("5" * 2); // 10 (string konwertowany do liczby)
console.log("5" / 2); // 2.5 (string konwertowany do liczby)
console.log(true - false); // 1 (boolean konwertowany do liczby)
3. Konwersja do boolean
if ("tekst") { console.log("Prawda"); } // "Prawda" (niepusty string = true)
if ("") { console.log("Prawda"); } // nie wyświetli (pusty string = false)
if (0) { console.log("Prawda"); } // nie wyświetli (0 = false)
if (1) { console.log("Prawda"); } // "Prawda" (niezerowa liczba = true)
Uwaga: Konwersja niejawna może prowadzić do trudnych do wykrycia błędów. Zawsze staraj się używać jawnych konwersji, gdy chcesz mieć pewność co do typu.
Konwersja jawna (Explicit Coercion)

Konwersja jawna polega na świadomym przekształcaniu jednego typu w inny za pomocą odpowiednich funkcji lub operatorów.

1. Konwersja do stringa
let liczba = 42;

// Metoda String()
let tekst1 = String(liczba); // "42"

// Metoda toString()
let tekst2 = liczba.toString(); // "42"

// Konkatenacja z pustym stringiem
let tekst3 = liczba + ""; // "42"
2. Konwersja do liczby
let str = "42";

// Funkcja Number()
let num1 = Number(str); // 42

// Funkcja parseInt() i parseFloat()
let num2 = parseInt(str); // 42
let num3 = parseFloat("3.14"); // 3.14

// Operator +
let num4 = +str; // 42

// Operator Math.floor()
let num5 = Math.floor("3.99"); // 3
Różnice: parseInt() i parseFloat() ignorują znaki po pierwszej nieprawidłowej cyfrze, natomiast Number() zwraca NaN dla nieprawidłowych stringów.
3. Konwersja do boolean
let wartosc = "tekst";

// Funkcja Boolean()
let bool1 = Boolean(wartosc); // true

// Operator !! (podwójne zaprzeczenie)
let bool2 = !!wartosc; // true

// Konwersja w warunku if
if (wartosc) {
// wykona się, ponieważ "tekst" jest truthy
}
Wartość Boolean
false false
0, -0, 0n false
"", '', `` false
null false
undefined false
NaN false
Wszystkie inne wartości true
Porównywanie wartości

W JavaScript istnieją dwa operatory porównania: == (luźne porównanie) i === (ścisłe porównanie).

1. Luźne porównanie (==)
console.log(5 == "5"); // true (konwersja typów)
console.log(true == 1); // true (boolean konwertowany do liczby)
console.log(false == 0); // true (boolean konwertowany do liczby)
console.log(null == undefined); // true
2. Ścisłe porównanie (===)
console.log(5 === "5"); // false (różne typy)
console.log(true === 1); // false (różne typy)
console.log(5 === 5); // true (te same typy i wartości)
Zalecenie: Zawsze używaj === i !== zamiast == i !=, aby unikać nieoczekiwanych konwersji typów.
Praktyczne przykłady konwersji
1. Walidacja formularza
function sprawdzLiczbe(input) { // Konwersja jawna do liczby const liczba = Number(input.value); if (isNaN(liczba)) { alert("Proszę wprowadzić poprawną liczbę!"); return false; } return true; }
2. Konwersja daty do stringa
const data = new Date();
const dataString = data.toISOString(); // "2023-11-15T12:34:56.789Z"
const dataLoc = data.toLocaleDateString(); // "15.11.2023" (format zależny od lokalizacji)
3. Konwersja tablicy do stringa
const tablica = [1, 2, 3];
const string1 = tablica.toString(); // "1,2,3"
const string2 = tablica.join("-"); // "1-2-3"
Typowe pułapki i błędy

Konwersja typów w JavaScript może prowadzić do wielu nieoczekiwanych sytuacji. Oto najczęstsze pułapki:

1. NaN i porównania
console.log(NaN === NaN); // false
console.log(isNaN(NaN)); // true
console.log(isNaN("tekst")); // true
Uwaga: NaN nie jest równe samemu sobie! Do sprawdzania NaN używaj isNaN() lub Number.isNaN().
2. Konwersja null i undefined
console.log(null == undefined); // true
console.log(null === undefined); // false
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
3. Konwersja pustego stringa
console.log("" == 0); // true
console.log("" == false); // true
console.log(Boolean("")); // false
4. Konwersja tablic
console.log([] == false); // true
console.log([1] == true); // true
console.log([2] == true); // false
Dobre praktyki

Aby unikać problemów związanych z konwersją typów, warto stosować się do następujących zasad:

  • Używaj ścisłych porównań: Zawsze używaj === i !== zamiast == i !=.
  • Konwertuj jawnie: Używaj jawnej konwersji typów, gdy chcesz mieć pewność co do wyniku.
  • Sprawdzaj typy: Używaj typeof lub Array.isArray() do sprawdzania typów.
  • Uważaj na NaN: Pamiętaj, że NaN nie jest równe samemu sobie.
  • Testuj: Zawsze testuj swój kod z różnymi typami danych, aby upewnić się, że działa tak, jak oczekujesz.
Podsumowanie

Konwersja typów w JavaScript jest potężnym, ale i niebezpiecznym mechanizmem. Zrozumienie, jak działa konwersja niejawna i jawna, jest kluczowe dla pisania poprawnego i przewidywalnego kodu.

Pamiętaj, że:

  • JavaScript jest słabo typowanym językiem, co oznacza, że typy są sprawdzane w czasie wykonania.
  • Konwersja niejawna może prowadzić do nieoczekiwanych rezultatów.
  • Konwersja jawna daje Ci pełną kontrolę nad typami.
  • Zawsze używaj ścisłych porównań (===), aby unikać problemów.
```