Sådan tilføjes og opdateres forespørgselsstrengparametre ved hjælp af URLSearchParams

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.