Hent forespørgselsstrengværdier i JavaScript

Tidsstempel: 21. juli 2022 kl. 12

I en URL giver forespørgselsstrengværdier ofte oplysninger om anmodningen, f.eks. parametre for en søgning eller id'et for et objekt, du bruger. Hvis nogen af ​​forretnings- eller anmodningslogikken håndteres i frontend, er det vigtigt at vide, hvordan man henter forespørgselsstrengværdierne fra URL'en. Der er en række måder at opnå dette på, og nogle af dem vil vi se her.

URLSearchParams

URLSearchParams grænsefladen understøttes af alle større browserversioner undtagen IE 11. Det virker ved at analysere forespørgselsstrengen i en URL og give en måde at få adgang til værdierne på. For eksempel:

let params = new URLSearchParams('q=node&page=2');
params.get('q'); 
params.get('page');

En af ulemperne ved denne grænseflade er, at du kun skal sende den til forespørgselsstrengen i en URL. Hvis du arbejder med den aktuelle browser-URL, er det nemt at gøre, da du bare kan bestå window.location.search. Hvis du arbejder med en anden URL, skal du analysere og videregive forespørgselsstrengen separat.

For at parse forespørgselsparametrene til et objekt skal du bruge URL.searchParams's .entries() metode, som returnerer en Iterator af nøgle/værdi-par, og Object.fromEntries at konvertere det til et objekt.

let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries);

URL-objekt

URL API understøttes også af alle større browserversioner undtagen IE 11. Det giver en mere fleksibel måde at parse URL'er på, og det giver også en måde at få adgang til forespørgselsstrengværdierne. For eksempel:

const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;

searchParams.get('q'); 
searchParams.get('page');

url.searchParams er den samme type instansobjekt returneret af URLSearchParams.

url objektet ovenfor har også alle dele af URL'en opdelt i dets dele. For eksempel:

url.href; 
url.origin; 
url.protocol; 
url.host; 
url.hostname; 
url.port; 
url.pathname; 
url.search; 
url.hash;

Ren JavaScript

Hvis du af en eller anden grund ikke er i stand til at få adgang til API'erne ovenfor eller ønsker at have mere kontrol over parsingen, kan du bruge følgende kode til at parse forespørgselsstrengen ind i et objekt.

function getQueryParams(url) {
    const paramArr = url.slice(url.indexOf('?') + 1).split('&');
    const params = {};
    paramArr.map(param => {
        const [key, val] = param.split('=');
        params[key] = decodeURIComponent(val);
    })
    return params;
}

Bemærk: Der er mange måder at parse forespørgselsparametre på i almindelig JS, nogle mere komplicerede (og robuste) end andre. Dette er kun én måde, og blev tilpasset fra denne kerne.

Vi kan derefter bruge denne almindelige JS-funktion til at parse en enkelt forespørgselsparam til en streng:

getQueryParams('https://stackabuse.com/search?q=node&page=2')

Tidsstempel:

Mere fra Stablemisbrug