URLSearchParams
Obiekt do odczytu i budowania parametrów zapytania w adresie, czyli części po znaku ?, np. ?kurs=js&strona=2.
- Zwraca
- Nowy obiekt
URLSearchParams.
Przykład
#const params = new URLSearchParams('?kurs=javascript&strona=2&tag=dom&tag=zdarzenia')
console.log(params.get('kurs'))
console.log(Number(params.get('strona')) + 1)
console.log(params.get('sortuj'))
console.log(params.getAll('tag'))
console.log(params.has('tag'))Definicja i zastosowanie
#URLSearchParams przechowuje parametry zapytania jako listę par nazwa i wartość. Obiekt utworzysz z napisu ("?kurs=js&strona=2", znak ? na początku jest pomijany), ze zwykłego obiektu ({ kurs: "js" }) albo z tablicy par. Gotowy obiekt znajdziesz też we właściwości searchParams każdego obiektu URL.
Metoda get(nazwa) zwraca wartość parametru albo null, gdy go nie ma, getAll() zwraca wszystkie wartości o tej nazwie, has() sprawdza obecność, set() ustawia wartość (zastępując poprzednie), append() dopisuje kolejną wartość o tej samej nazwie, a delete() usuwa parametr. Wartości są zawsze napisami, więc liczby zamieniaj przez Number().
Metoda toString() składa parametry z powrotem w napis i koduje znaki specjalne: spacja staje się +, a polskie litery sekwencjami %XX. Po obiekcie przejdziesz pętlą for...of, a Object.fromEntries(params) zamieni go na zwykły obiekt. Obiekt przekazany jako body do fetch() zostanie wysłany w tym samym formacie co zwykły formularz.
Składnia
#new URLSearchParams(init)
params.get(name)
params.getAll(name)
params.has(name)
params.set(name, value)
params.append(name, value)
params.delete(name)
params.toString()
params.sizeParametry
#init
opcjonalny
Napis z parametrami (np.location.search), obiekt z parami nazwa i wartość albo tablica par[nazwa, wartość].
Więcej przykładów
#const params = new URLSearchParams({ szukaj: 'pętla for', poziom: 'początkujący' })
params.append('tag', 'js')
params.set('poziom', 'średni')
console.log(params.toString())
console.log(`/api/kursy?${params}`)set() zmienia wartość istniejącego parametru w tym samym miejscu listy. W template literal obiekt sam zamienia się na napis przez toString().
const params = new URLSearchParams('imie=Ania&punkty=340&odznaka=start')
for (const [name, value] of params) {
console.log(`${name} = ${value}`)
}
console.log(Object.fromEntries(params))
console.log(params.size)const address = 'https://codeworlds.com/ranking?okres=tydzien&strona=3'
const url = new URL(address)
url.searchParams.set('strona', '1')
url.searchParams.delete('okres')
url.searchParams.append('kurs', 'python')
console.log(url.search)
console.log(url.href)Zmiany w url.searchParams od razu aktualizują search i href obiektu URL.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Parametry bieżącej strony odczytasz przez
new URLSearchParams(location.search). get()zwraca napis albonull, aNumber(null)to0. Brakującemu parametrowi nadaj wartość domyślną:Number(params.get("strona") ?? 1).- Nie koduj wartości ręcznie przez
encodeURIComponent()przedset(), bo zostaną zakodowane podwójnie.URLSearchParamsrobi to sam.
Powiązane hasła
#- URLObiekt do tworzenia, odczytywania i zmieniania adresów URL. Rozkłada adres na części: protokół, host, ścieżkę i parametry.
- locationObiekt z informacjami o adresie bieżącej strony. Pozwala odczytać jego części i przejść pod inny adres.
- history.pushState()Dodaje nowy wpis do historii przeglądarki i zmienia adres w pasku bez przeładowania strony.
- FormDataZbiera wartości pól formularza w pary nazwa i wartość. Gotowy obiekt można odczytać albo wysłać do serwera przez fetch().
- Object.fromEntries()Tworzy obiekt z listy par [klucz, wartość].
- fetch()Wysyła zapytanie HTTP i zwraca obietnicę z odpowiedzią serwera (obiektem Response).
Widzisz błąd albo brakuje przykładu? Napisz do nas.