Pridobite vrednosti poizvedbenega niza v JavaScriptu

Časovni žig: 21. julij 2022 12

V URL-ju vrednosti poizvedbenega niza pogosto zagotavljajo informacije o zahtevi, kot so parametri za iskanje ali ID predmeta, ki ga uporabljate. Če se katera koli poslovna logika ali logika zahtev obravnava v sprednjem delu, je pomembno vedeti, kako pridobiti vrednosti poizvedbenega niza iz URL-ja. To lahko dosežete na več načinov, nekaj jih bomo videli tukaj.

URLSearchParams

O URLSearchParams vmesnik podpirajo vse glavne različice brskalnika razen IE 11. Deluje tako, da razčleni poizvedbeni niz URL-ja in omogoči dostop do vrednosti. Na primer:

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

Ena od slabosti tega vmesnika je, da mu morate posredovati samo poizvedbeni niz URL-ja. Če delate s trenutnim URL-jem brskalnika, je to preprosto, saj lahko preprosto posredujete window.location.search. Če delate s katerim koli drugim URL-jem, boste morali ločeno razčleniti in posredovati poizvedbeni niz.

Če želite parametre poizvedbe razčleniti v objekt, uporabite URL.searchParamsje .entries() metoda, ki vrne an Iterator parov ključ/vrednost in Object.fromEntries da ga pretvorite v predmet.

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

Objekt URL

O URL API podpirajo tudi vse glavne različice brskalnikov razen IE 11. Ponuja bolj prilagodljiv način za razčlenjevanje URL-jev in omogoča tudi dostop do vrednosti poizvedbenega niza. Na primer:

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

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

url.searchParams je ista vrsta predmeta primerka, ki ga vrne URLSearchParams.

O url objekt zgoraj ima tudi vse dele URL-ja razdeljene na dele. Na primer:

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

Čisti JavaScript

Če iz kakršnega koli razloga ne morete dostopati do zgornjih API-jev ali želite imeti večji nadzor nad razčlenjevanjem, lahko uporabite naslednjo kodo za razčlenitev poizvedbenega niza v 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;
}

Opombe: Obstaja veliko načinov za razčlenitev poizvedbenih parametrov v navadnem JS, nekateri bolj zapleteni (in robustni) od drugih. To je samo en način in je bil prilagojen to bistvo.

Nato lahko uporabimo to navadno funkcijo JS za razčlenitev posameznega parametra poizvedbe v niz:

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

Časovni žig:

Več od Stackabuse