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
-
window.location.search
retorna a parte da URL após o?
, ou seja, a query string (?o=valor
). -
new URLSearchParams(window.location.search)
cria um objeto que permite manipular e acessar os parâmetros da query string. -
urlParams.get('o')
obtém o valor do parâmetroo
, retornando'valor'
. -
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.