Skip to main content

Como Obter Parâmetros da Query String com JavaScript

Introdução

A query string é a parte da URL que contém parâmetros, geralmente utilizados para passar informações entre páginas. No JavaScript, podemos extrair esses parâmetros utilizando a API URLSearchParams.

Exemplo de URL

Vamos considerar a seguinte URL:

http://seusubdominio.agilifytlow.io?o=valor

Neste caso, o parâmetro o possui o valor valor.

Código JavaScript

Podemos obter o valor do parâmetro o com o seguinte código:

// Captura os parâmetros da query string
const urlParams = new URLSearchParams(window.location.search);

// Obtém o valor do parâmetro 'o'
const oValue = urlParams.get('o');

// Exibe o valor no console
console.log(oValue);

Explicação do Código

  1. window.location.search retorna a parte da URL após o ?, ou seja, a query string (?o=valor).

  2. new URLSearchParams(window.location.search) cria um objeto que permite manipular e acessar os parâmetros da query string.

  3. urlParams.get('o') obtém o valor do parâmetro o, retornando 'valor'.

  4. console.log(oValue); exibe o valor capturado no console do navegador.

Aplicações Comuns

  • Captura de dados para preencher formulário

  • Personalização de conteúdo baseado em parâmetros da URL

  • Redirecionamentos e filtragens dinâmicas com base em parâmetros

Tratamento de Parâmetros Opcionais

Caso o parâmetro não esteja presente na URL, urlParams.get('o') retornará null. Para evitar erros, podemos adicionar um valor padrão, nesse caso, deixamos em branco usando o '':

const oValue = urlParams.get('o') || '';
console.log(oValue);

Conclusão

A API URLSearchParams fornece uma maneira simples e eficiente de manipular parâmetros da querystring em JavaScript. Isso permite maior flexibilidade no desenvolvimento de aplicações web dinâmicas.