Hanki kyselymerkkijonoarvot JavaScriptissä

Aikaleima: 21. heinäkuuta 2022 klo 12

URL-osoitteessa kyselymerkkijonoarvot tarjoavat usein tietoja pyynnöstä, kuten haun parametrit tai käyttämäsi objektin tunnus. Jos jotakin liiketoiminta- tai pyyntölogiikkaa käsitellään käyttöliittymässä, on tärkeää tietää, kuinka kyselymerkkijonoarvot noudetaan URL-osoitteesta. On olemassa useita tapoja saavuttaa tämä, ja muutamia niistä tarkastellaan tässä.

URLSearchParams

- URLSearchParams käyttöliittymää tukevat kaikki yleisimmät selainversiot paitsi IE 11. Se toimii jäsentämällä URL-osoitteen kyselymerkkijonoa ja tarjoamalla tavan käyttää arvoja. Esimerkiksi:

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

Yksi tämän käyttöliittymän huonoista puolista on, että sinun on välitettävä sille vain URL-osoitteen kyselymerkkijono. Jos käytät nykyistä selaimen URL-osoitetta, se on helppo tehdä, koska voit vain ohittaa window.location.search. Jos työskentelet jonkin muun URL-osoitteen kanssa, sinun on jäsennettävä ja välitettävä kyselymerkkijono erikseen.

Jos haluat jäsentää kyselyparametrit objektiksi, käytä URL.searchParamsn .entries() menetelmä, joka palauttaa an Iterator avain/arvo-pareista ja Object.fromEntries muuntaaksesi sen esineeksi.

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

URL-objekti

- URL API:ta tukevat myös kaikki yleisimmät selainversiot paitsi IE 11. Se tarjoaa joustavamman tavan jäsentää URL-osoitteita, ja se tarjoaa myös tavan päästä käsiksi kyselyn merkkijonoarvoihin. Esimerkiksi:

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 samantyyppinen ilmentymäobjekti, jonka palauttaa URLSearchParams.

- url Yllä olevassa objektissa on myös kaikki URL-osoitteen osat jaettu osiin. Esimerkiksi:

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

Puhdas JavaScript

Jos et jostain syystä pääse käsiksi yllä oleviin sovellusliittymiin tai haluat hallita jäsentämistä paremmin, voit käyttää seuraavaa koodia jäsentääksesi kyselymerkkijonon objektiksi.

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

Huomautuksia: On monia tapoja jäsentää kyselyparametreja tavallisessa JS:ssä, jotkut monimutkaisempia (ja vankempia) kuin toiset. Tämä on vain yksi tapa, ja se on mukautettu tämä ydin.

Voimme sitten käyttää tätä tavallista JS-funktiota jäsentämään yksittäisen kyselyparametrin merkkijonoksi:

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

Aikaleima:

Lisää aiheesta Stackabus