Hankige päringu stringi väärtused JavaScriptis

Ajatempel: 21. juuli 2022 12:22

URL-is annavad päringustringi väärtused sageli teavet päringu kohta, näiteks otsingu parameetrid või kasutatava objekti ID. Kui mõnda äri- või päringuloogikat käsitletakse kasutajaliideses, on oluline teada, kuidas URL-ist päringustringi väärtusi tuua. Selle saavutamiseks on mitmeid viise, millest mõnda vaatame siin.

URLSearchParams

. URLSearchParams liidest toetavad kõik suuremad brauseri versioonid, välja arvatud IE 11. See parsib URL-i päringustringi ja annab võimaluse väärtustele juurde pääseda. Näiteks:

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

Selle liidese üks negatiivseid külgi on see, et peate sellele edastama ainult URL-i päringustringi. Kui töötate praeguse brauseri URL-iga, on seda lihtne teha, kuna saate lihtsalt läbida window.location.search. Kui töötate mõne muu URL-iga, peate päringustringi eraldi sõeluma ja edastama.

Päringu parameetrite objektiks sõelumiseks kasutage URL.searchParamss .entries() meetod, mis tagastab an Iterator võtme/väärtuse paaridest ja Object.fromEntries selle objektiks teisendamiseks.

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

URL-i objekt

. URL API-d toetavad ka kõik suuremad brauseri versioonid, välja arvatud IE 11. See pakub paindlikumat viisi URL-ide sõelumiseks ja pakub ka juurdepääsu päringustringi väärtustele. Näiteks:

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

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

url.searchParams on sama tüüpi eksemplari objekt, mille tagastas URLSearchParams.

. url ülaloleval objektil on ka kõik URL-i osad osadeks jaotatud. Näiteks:

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

Puhas JavaScript

Kui te mingil põhjusel ei pääse ülaltoodud API-dele juurde või soovite sõelumise üle suuremat kontrolli omada, saate päringustringi objektiks sõelumiseks kasutada järgmist koodi.

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;
}

märkused: Päringuparameetrite sõelumiseks tavalises JS-is on palju viise, millest mõned on keerulisemad (ja tugevamad) kui teised. See on vaid üks viis ja seda kohandati see sisu.

Seejärel saame kasutada seda tavalist JS-funktsiooni ühe päringuparameetri stringiks sõelumiseks:

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

Ajatempel:

Veel alates Stackabus