Als frontend-ontwikkelaar moet u weten hoe u queryreeksparameters aan de clientzijde kunt manipuleren. Vandaag kijken we naar de URLSearchParams
interface die kan worden gebruikt om queryreeksparameters in JavaScript toe te voegen, bij te werken of te verwijderen.
Initialiseren URLSearchParams
Een nieuwe instantie maken van URLSearchParams
, geef gewoon het gedeelte met de queryreeks van de URL door (met of zonder de eerste ?
) naar zijn constructor.
Als u in een browser werkt, kunt u het gedeelte met de queryreeks van de huidige URL openen met window.location.search
:
const params = new URLSearchParams(window.location.search);
U kunt ook een nieuw URL-object maken en alle queryparameters ophalen, zoals hieronder:
// 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);
De URLSearchParams
constructor accepteert ook een JavaScript-object en verandert het automatisch in een queryreeks:
const obj = {
size: 'M',
color: 'blue',
price: 29,
sort: 'desc'
};
// initialize URLSearchParams from object
const params = new URLSearchParams(obj);
Toegang tot parameters
Om de waarde van een queryparameter te krijgen, kunt u de get()
. gebruiken methode. Als de parameter niet bestaat of leeg is, krijg je een null
waarde:
params.get('price') // 29
params.get('page') // null
Om te controleren of een bepaalde queryparameter aanwezig is, kunt u de has()
. gebruiken methode:
params.has('size') // true
params.has('user') // false
Gebruik altijd de has()
methode om het bestaan van de parameter te controleren voordat de waarde wordt benaderd. Het vermijdt een vals positief wanneer de parameter aanwezig is in de URL maar geen waarde heeft, bijv. size=&rows=12
.
Meerdere parameters ophalen
Soms kan een URL meer dan één waarde van een enkele parameter bevatten. Laten we eens kijken naar de volgende URL:
http://example.com?size=M&size=XL&color=blue
Bovenstaande URL is 100% geldig. Als u de bovenstaande URL ontleedt met URLSearchParams
, zal het een reeks waarden maken voor de size
parameter.
Als u echter de get()
methode om toegang te krijgen tot size
, je krijgt alleen de eerste waarde M
. Om alle waarden van een queryreeksparameter te krijgen, moet u de getAll()
. gebruiken methode:
params.getAll('size') // [ 'M', 'XL' ]
Parameters wijzigen
De set()
methode kan worden gebruikt om toe te voegen een nieuwe queryparameter of update de bestaande parameterwaarde:
// add new param
params.set('page', 2)
// update existing param
param.set('price', 9)
Merk op dat als de parameter meer dan waarden bevat, de set()
methode zal ze allemaal verwijderen en de nieuwe waarde instellen:
// 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' ]
Om te voorkomen dat de bestaande parameterwaarden worden overschreven, moet u de append()
. gebruiken methode in plaats daarvan. Zoals de naam al doet vermoeden, append()
zal een nieuwe parameter toevoegen als deze nog niet bestaat. Anders wordt er een nieuwe waarde aan toegevoegd.
Hier is een voorbeeld:
// 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' ] ]
Om verwijderen een queryreeksparameter van de URL, URLSearchParams
levert de delete()
methode:
// 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' ] ]
Zoals je hierboven kunt zien, is de delete()
methode verwijdert alle waarden van de size
parameter.
Itereren door parameters
Er zijn meerdere manieren om alle parameters in de URLSearchParams
. te herhalen object. De eerste manier is om de for...of-lus te gebruiken:
for (const p of params) {
console.log(p);
}
// [ 'size', 'M' ]
// [ 'size', 'XL' ]
// [ 'color', 'blue' ]
// [ 'price', '29' ]
// [ 'sort', 'desc' ]
URLSearchParams
ondersteunt ook de forEach()-lus die kan worden gebruikt om alle waarden in het object te doorlopen met een callback-functie:
params.forEach((value, key) => {
console.log(`${key} => ${value}`);
});
// size => M
// size => XL
// color => blue
// price => 29
// sort => desc
U kunt ook de key()
. gebruiken , values()
, en entries()
methoden om een iterator te krijgen van alle sleutels, waarden of sleutel-waardeparen die beschikbaar zijn in URLSearchParams
.
Query String ophalen
Als u klaar bent met de wijzigingen, kunt u alle parameters als een queryreeks krijgen met behulp van de toString()
methode:
// 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
Let op de ontbrekende ?
voor de queryreeks. De toString()
voegt het niet toe. U moet handmatig ?
. gebruiken bij het bijwerken van de URL met de nieuwe queryreeks.
Browsercompatibiliteit
Op het moment van schrijven is de URLSearchParams
object wordt ondersteund door alle belangrijke browsers behalve IE en Opera Mini. U kunt echter een polyfill gebruiken om ervoor te zorgen dat uw toepassing ook in oude browsers blijft werken.