I en URL ger frågesträngsvärden ofta information om begäran, som parametrar för en sökning eller ID:t för ett objekt du använder. Om någon av affärs- eller förfrågningslogikerna hanteras i gränssnittet är det viktigt att veta hur man hämtar frågesträngsvärdena från URL:en. Det finns ett antal sätt att uppnå detta, några av dem kommer vi att se här.
URLSearchParams
Smakämnen URLSearchParams
gränssnittet stöds av alla större webbläsarversioner utom IE 11. Det fungerar genom att tolka frågesträngen för en URL och tillhandahålla ett sätt att komma åt värdena. Till exempel:
let params = new URLSearchParams('q=node&page=2');
params.get('q');
params.get('page');
En av nackdelarna med det här gränssnittet är att du bara måste skicka det till frågesträngen för en URL. Om du arbetar med den aktuella webbläsarens webbadress är det lätt att göra eftersom du bara kan passera window.location.search
. Om du arbetar med någon annan webbadress måste du analysera och skicka frågesträngen separat.
För att analysera frågeparametrarna till ett objekt, använd URL.searchParams
's .entries()
metod, som returnerar en Iterator
nyckel/värdepar, och Object.fromEntries
för att omvandla det till ett objekt.
let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries);
URL-objekt
Smakämnen URL
API stöds också av alla större webbläsarversioner utom IE 11. Det erbjuder ett mer flexibelt sätt att analysera webbadresser, och det ger också ett sätt att komma åt frågesträngsvärdena. Till exempel:
const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;
searchParams.get('q');
searchParams.get('page');
url.searchParams
är samma typ av instansobjekt som returneras av URLSearchParams
.
Smakämnen url
objektet ovan har också alla delar av URL:en uppdelade i sina delar. Till exempel:
url.href;
url.origin;
url.protocol;
url.host;
url.hostname;
url.port;
url.pathname;
url.search;
url.hash;
Ren JavaScript
Om du av någon anledning inte kan komma åt API:erna ovan eller vill ha mer kontroll över analysen, kan du använda följande kod för att analysera frågesträngen till ett 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;
}
Anmärkningar: Det finns många sätt att analysera frågeparametrar i vanlig JS, vissa mer komplicerade (och robusta) än andra. Detta är bara ett sätt, och anpassades från denna kärna.
Vi kan sedan använda den här vanliga JS-funktionen för att analysera en enda frågeparam till en sträng:
getQueryParams('https://stackabuse.com/search?q=node&page=2')