Obter valores de string de consulta em JavaScript

Carimbo de data / hora: 21 de julho de 2022, 12h

Em um URL, os valores da string de consulta geralmente fornecem informações sobre a solicitação, como parâmetros para uma pesquisa ou o ID de um objeto que você está usando. Se alguma lógica de negócios ou solicitação for tratada no front-end, é importante saber como recuperar os valores da string de consulta da URL. Existem várias maneiras de conseguir isso, algumas das quais veremos aqui.

URLSearchParams

A URLSearchParams A interface é suportada por todas as principais versões de navegador, exceto o IE 11. Ele funciona analisando a string de consulta de uma URL e fornecendo uma maneira de acessar os valores. Por exemplo:

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

Uma das desvantagens dessa interface é que você deve passar apenas a query string de uma URL. Se você estiver trabalhando com o URL do navegador atual, isso é fácil de fazer, pois você pode simplesmente passar window.location.search. Se você estiver trabalhando com qualquer outro URL, precisará analisar e passar a string de consulta separadamente.

Para analisar os parâmetros de consulta em um objeto, use URL.searchParams's .entries() método, que retorna um Iterator de pares chave/valor, e Object.fromEntries para convertê-lo em um objeto.

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

Objeto URL

A URL A API também é suportada por todas as principais versões de navegadores, exceto o IE 11. Ela oferece uma maneira mais flexível de analisar URLs e também fornece uma maneira de acessar os valores da string de consulta. Por exemplo:

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

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

url.searchParams é o mesmo tipo de objeto de instância retornado por URLSearchParams.

A url O objeto acima também tem todas as partes do URL divididas em suas partes. Por exemplo:

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

JavaScript puro

Se por algum motivo você não conseguir acessar as APIs acima ou quiser ter mais controle sobre a análise, use o código a seguir para analisar a string de consulta em um objeto.

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

Note: Existem muitas maneiras de analisar parâmetros de consulta em JS simples, algumas mais complicadas (e robustas) do que outras. Esta é apenas uma maneira, e foi adaptada de esta essência.

Podemos então usar esta função JS simples para analisar um único parâmetro de consulta em uma string:

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

Carimbo de hora:

Mais de Abuso de pilha