URLSearchParams – Jak używać i dlaczego warto?

URLSearchParams to interfejs, który zawiera metody pomagające w pracy z parametrami URL. Dzięki niemu można łatwo tworzyć, odczytywać oraz modyfikować parametry zapytania URL bez konieczności manipulowania nimi jako ciągami znaków. Pozwala to na czytelniejsze i bardziej efektywne operowanie parametrami w projektach.

Przykład 1: Pobieranie parametrów z adresu URL

Załóżmy następujący scenariusz: użytkownik jest kierowany na stronę internetową pod adresem:

https://devhelpers.pl/products?category=angular&sort=oldest

Aby znaleźć parametry category i sort, możemy skorzystać z URLSearchParams:

// Tworzymy obiekt URL i wyodrębniamy jego parametry
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);

// Odczytujemy wartości parametrów
const category = params.get('category'); // 'angular'
const sort = params.get('sort'); // 'oldest'

// Jeśli potrzebujemy sprawdzić czy dany parametr istnieje 
const isCategory = params.has('category'); // true

// Wypisujemy wartości na konsolę
console.log('Kategoria:', category);
console.log('Sortowanie:', sort);

Dzięki tej metodzie możemy łatwo odczytać wartości parametrów, co przydaje się do dynamicznego filtrowania lub sortowania treści na stronie.

Przykład 2: Iterowanie po parametrach z adresu URL

Jedną z zalet URLSearchParams jest możliwość iterowania po jego zawartości. Dzięki temu można wygodnie przeglądać wszystkie pary klucz-wartość za pomocą pętli for...of, forEach oraz filtrować i mapować parametry.

const url = new URL(
  'https://devhelpers.pl/products?category=angular&sort=oldest&filter=new',
);
const params = new URLSearchParams(url.search);

// Iteracja za pomocą pętli for...of
for (const [key, value] of params) {
  console.log(`${key}: ${value}`);
}
// lub
for (const [key, value] of params.entries()) {
  console.log(`${key}: ${value}`);
}

// Iteracja za pomocą forEach
params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// Uwaga: aby użyć filter() lub map(), należy przekonwertować na tablicę
const paramArray = Array.from(params)
  .filter(([key, value]) => key !== 'category')
  .map(([key, value]) => `${key}=${value}`);
console.log(paramArray.join('&')); // 'sort=oldest&filter=new'

Przykład 3: Tworzenie i modyfikowanie parametrów zapytania

Często podczas pracy nad aplikacjami musimy dynamicznie dodawać lub zmieniać parametry zapytania URL, np. podczas filtrowania danych przez użytkownika. Zamiast ręcznie modyfikować ciągi znaków, możemy użyć URLSearchParams do efektywnego zarządzania parametrami.

// Tworzymy obiekt URL i obiekt URLSearchParams
const baseUrl = 'https://devhelpers.pl/search';
const params = new URLSearchParams();

// Dodajemy parametry
params.append('category', 'angular');
params.append('sort', 'oldest');

// Modyfikujemy istniejący parametr
params.set('sort', 'rating');

// Konstruujemy pełny URL z parametrami
const fullUrl = `${baseUrl}?${params.toString()}`;

// Wypisujemy zaktualizowany URL
console.log(fullUrl); // 'https://devhelpers.pl/search?category=angular&sort=rating'

Dlaczego warto używać URLSearchParams?

URLSearchParams upraszcza pracę z parametrami URL poprzez zwięzłe i intuicyjne metody operacji na danych. Dodatkowo, dzięki jego iterowalności, praca z parametrami jest jeszcze bardziej elastyczna. Pozwala na:

• Łatwe odczytywanie parametrów za pomocą get() i getAll().
• Iterowanie za pomocą for...of, forEach czy map().
• Dodawanie nowych parametrów za pomocą append().
• Modyfikowanie istniejących wartości z set().
• Usuwanie parametrów dzięki delete().