Jak přidat a aktualizovat parametry řetězce dotazu pomocí URLSearchParams

Jako vývojář frontendu byste si měli být vědomi toho, jak manipulovat s parametry řetězce dotazu na straně klienta. Dnes se podíváme na URLSearchParams rozhraní, které lze použít k přidání, aktualizaci nebo odstranění parametrů řetězce dotazu v JavaScriptu.

Inicializace URLSearchParams

Chcete-li vytvořit novou instanci URLSearchParams , stačí předat řetězec dotazu část adresy URL (s počátečním ? nebo bez něj ) jeho konstruktoru.

Pokud pracujete v prohlížeči, můžete přistupovat k části dotazovaného řetězce aktuální adresy URL pomocí window.location.search :

const params = new URLSearchParams(window.location.search);

Případně můžete vytvořit nový objekt URL a načíst všechny parametry dotazu jako níže:

// current URL
const url = "http://example.com?size=M&color=blue&price=29&sort=desc";

// create a URL object
const urlObj = new URL(url);

// initialize URLSearchParams
const params = new URLSearchParams(urlObj.search);

URLSearchParams konstruktor také přijímá objekt JavaScript a automaticky jej převede na řetězec dotazu:

const obj = {
    size: 'M',
    color: 'blue',
    price: 29,
    sort: 'desc'
};

// initialize URLSearchParams from object
const params = new URLSearchParams(obj);

Přístup k parametrům

Chcete-li získat hodnotu parametru dotazu, můžete použít get() metoda. Pokud parametr neexistuje nebo je prázdný, dostanete null hodnota:

params.get('price')   // 29
params.get('page')  // null

Chcete-li zkontrolovat, zda je přítomen určitý parametr dotazu, můžete použít has() metoda:

params.has('size')  // true
params.has('user')   // false

Vždy byste měli používat has() metoda pro kontrolu existence parametru před přístupem k jeho hodnotě. Vyhne se falešné pozitivitě, když je parametr přítomen v adrese URL, ale nemá žádnou hodnotu, tj. size=&rows=12 .

Získání více parametrů

Někdy může adresa URL obsahovat více než jednu hodnotu jednoho parametru. Podívejme se na následující URL:

http://example.com?size=M&size=XL&color=blue

Výše uvedená adresa URL je 100% platná. Pokud výše uvedenou adresu URL analyzujete pomocí URLSearchParams , vytvoří pole hodnot pro size parametr.

Pokud však použijete get() způsob přístupu size , získáte pouze první hodnotu M . Chcete-li získat všechny hodnoty parametru řetězce dotazu, měli byste použít getAll() metoda:

params.getAll('size') // [ 'M', 'XL' ]

Úprava parametrů

set() metodu lze použít k přidání nový parametr dotazu nebo aktualizaci stávající hodnota parametru:

// add new param
params.set('page', 2)

// update existing param
param.set('price', 9)

Všimněte si, že pokud parametr obsahuje více než hodnot, set() metoda odstraní všechny z nich a nastaví novou hodnotu:

// URL: http://example.com?size=M&size=XL&color=blue&price=29&sort=desc

// change `size` to `L`
params.set('size', 'L');

console.log([...params.keys()]); // [ 'size', 'color', 'price', 'sort' ]
console.log([...params.values()]); // [ 'L', 'blue', '29', 'desc' ]

Chcete-li se vyhnout přepsání stávajících hodnot parametrů, měli byste použít append() místo toho. Jak jeho název napovídá, append() přidá nový parametr, pokud ještě neexistuje. V opačném případě k němu připojí novou hodnotu.

Zde je příklad:

// URL: http://example.com?size=M&size=XL&color=blue&price=29&sort=desc

// append a new color
params.append('color', 'pink');

console.log([...params.entries()]);

// [ [ 'size', 'M' ],
//   [ 'size', 'XL' ],
//   [ 'color', 'blue' ],
//   [ 'price', '29' ],
//   [ 'sort', 'desc' ],
//   [ 'color', 'pink' ] ]

Chcete-li smazat parametr řetězce dotazu z adresy URL, URLSearchParams poskytuje delete() metoda:

// URL: http://example.com?size=M&size=XL&color=blue&price=29&sort=desc

// remove size
params.delete('size');

console.log([...params.entries()]);

// [ [ 'color', 'blue' ], [ 'price', '29' ], [ 'sort', 'desc' ] ]

Jak můžete vidět výše, delete() metoda odstraní všechny hodnoty size parametr.

Iterace přes parametry

Existuje několik způsobů, jak iterovat všechny parametry obsažené v URLSearchParams objekt. Prvním způsobem je použití cyklu for...of:

for (const p of params) {
    console.log(p);
}

// [ 'size', 'M' ]
// [ 'size', 'XL' ]
// [ 'color', 'blue' ]
// [ 'price', '29' ]
// [ 'sort', 'desc' ]

URLSearchParams také podporuje smyčku forEach(), kterou lze použít k iteraci přes všechny hodnoty obsažené v objektu pomocí funkce zpětného volání:

params.forEach((value, key) => {
    console.log(`${key} => ${value}`);
});

// size => M
// size => XL
// color => blue
// price => 29
// sort => desc

Můžete také použít key() , values() a entries() metody k získání iterátoru všech klíčů, hodnot nebo párů klíč–hodnota dostupných v URLSearchParams .

Získání řetězce dotazu

Jakmile budete s úpravami hotovi, můžete získat všechny parametry jako řetězec dotazu pomocí toString() metoda:

// URL: http://example.com?size=M&size=XL&color=blue&price=29&sort=desc

// remove size
params.delete('size');

// add page
params.set('page', 1);

console.log(params.toString());

// color=blue&price=29&sort=desc&page=1

Všimněte si chybějícího ? před řetězcem dotazu. toString() nepřidává to. Musíte ručně použít ? při aktualizaci adresy URL pomocí nového řetězce dotazu.

Kompatibilita prohlížeče

V době psaní článku URLSearchParams objekt je podporován všemi hlavními prohlížeči kromě IE a Opera Mini. Můžete však použít polyfill, abyste zajistili, že vaše aplikace bude fungovat i ve starých prohlížečích.