Hoe queryreeksparameters toe te voegen en bij te werken met behulp van URLSearchParams

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.