Som frontend-udvikler bør du være opmærksom på, hvordan du manipulerer forespørgselsstrengparametre på klientsiden. I dag skal vi se på URLSearchParams
grænseflade, der kan bruges til at tilføje, opdatere eller slette forespørgselsstrengparametre i JavaScript.
Initialiserer URLSearchParams
For at oprette en ny forekomst af URLSearchParams
, skal du blot sende forespørgselsstrengdelen af URL'en (med eller uden initialen ?
) til sin konstruktør.
Hvis du arbejder i en browser, kan du få adgang til forespørgselsstrengdelen af den aktuelle URL med window.location.search
:
const params = new URLSearchParams(window.location.search);
Alternativt kan du oprette et nyt URL-objekt og hente alle forespørgselsparametre som nedenfor:
// 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
constructor accepterer også et JavaScript-objekt og ændrer det automatisk til en forespørgselsstreng:
const obj = {
size: 'M',
color: 'blue',
price: 29,
sort: 'desc'
};
// initialize URLSearchParams from object
const params = new URLSearchParams(obj);
Adgang til parametre
For at få værdien af en forespørgselsparameter kan du bruge get()
metode. Hvis parameteren ikke eksisterer, eller den er tom, får du en null
værdi:
params.get('price') // 29
params.get('page') // null
For at kontrollere, om en bestemt forespørgselsparameter er til stede, kan du bruge has()
metode:
params.has('size') // true
params.has('user') // false
Du bør altid bruge has()
metode til at kontrollere eksistensen af parameteren, før du får adgang til dens værdi. Det undgår en falsk positiv, når parameteren er til stede i URL'en, men ikke har nogen værdi, dvs. size=&rows=12
.
Få flere parametre
Nogle gange kan en URL indeholde mere end én værdi af en enkelt parameter. Lad os se på følgende URL:
http://example.com?size=M&size=XL&color=blue
Ovenstående URL er 100 % gyldig. Hvis du analyserer ovenstående URL med URLSearchParams
, vil det skabe en række værdier for size
parameter.
Men hvis du bruger get()
metode til at få adgang til size
, får du kun den første værdi M
. For at få alle værdier af en forespørgselsstrengparameter skal du bruge getAll()
metode:
params.getAll('size') // [ 'M', 'XL' ]
Ændring af parametre
set()
metode kan bruges til at tilføje en ny forespørgselsparameter eller opdatering den eksisterende parameterværdi:
// add new param
params.set('page', 2)
// update existing param
param.set('price', 9)
Bemærk, at hvis parameteren indeholder mere end værdier, er set()
metoden vil fjerne dem alle og indstille den nye værdi:
// 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' ]
For at undgå at tilsidesætte de eksisterende parameterværdier bør du bruge append()
metode i stedet for. Som navnet antyder, append()
vil tilføje en ny parameter, hvis den ikke allerede eksisterer. Ellers vil den tilføje en ny værdi til den.
Her er et eksempel:
// 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' ] ]
For at slette en forespørgselsstrengparameter fra URL'en, URLSearchParams
giver delete()
metode:
// 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' ] ]
Som du kan se ovenfor, er delete()
metode fjerner alle værdier af size
parameter.
Generering gennem parametre
Der er flere måder at iterere over alle parametre inkluderet i URLSearchParams
objekt. Den første måde er at bruge for...of-løkken:
for (const p of params) {
console.log(p);
}
// [ 'size', 'M' ]
// [ 'size', 'XL' ]
// [ 'color', 'blue' ]
// [ 'price', '29' ]
// [ 'sort', 'desc' ]
URLSearchParams
understøtter også forEach()-løkken, der kan bruges til at iterere gennem alle værdier indeholdt i objektet med en tilbagekaldsfunktion:
params.forEach((value, key) => {
console.log(`${key} => ${value}`);
});
// size => M
// size => XL
// color => blue
// price => 29
// sort => desc
Du kan også bruge key()
, values()
og entries()
metoder til at få en iterator af alle nøgler, værdier eller nøgleværdi-par, der er tilgængelige i URLSearchParams
.
Henter forespørgselsstreng
Når du er færdig med ændringerne, kan du få alle parametre som en forespørgselsstreng ved at bruge toString()
metode:
// 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
Bemærk den manglende ?
foran forespørgselsstrengen. toString()
tilføjer det ikke. Du skal manuelt bruge ?
når du opdaterer URL'en med den nye forespørgselsstreng.
Browserkompatibilitet
I skrivende stund er URLSearchParams
objektet understøttes af alle større browsere undtagen IE og Opera Mini. Du kan dog bruge en polyfill for at sikre, at din applikation fortsætter med at fungere selv i gamle browsere.