Como pegar parâmetros GET da URL com JavaScript

Neste artigo você vai aprender a como pegar parâmetros GET da URL com JavaScript, utilizando um objeto muito interessante!

Fala programador(a), beleza? Neste artigo você vai aprender a como resgatar os parâmetros da URL com JS!

Estes parâmetros são também conhecidos como query string, que é caracterizado por tudo que fica após a ? na URL

Cada parâmetor é separado por um &, então podemos ter mais um também

O nosso exemplo será a URL:

https://www.meusite.com.br/produtos?categoria=livros&autor=Augusto

Aqui podemos dizer que há uma busca por produtos que sejam livros e com um dos autores sendo uma pessoa com nome de Augusto

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Podemos resgatar esta query string com JavaScript pelo seguinte código:

const urlParams = new URLSearchParams(window.location.search);

const products = urlParams.get("produtos") // livros

const author = urlParams.get("autor") // Augusto

Aqui temos três variáveis, a primeira inicializa o objeto com base na parte de pesquisa da URL, que é window.location.search

Depois obtemos cada um dos valores em variáveis distintas

E assim resgatamos os parâmetros que foram enviados por uma requisição GET!

Conclusão

No artigo de hoje você viu como pegar parâmetros GET da URL com JavaScript

Utilizamos a classe URLSearchParams para criar uma nova instância dele baseada na URL atual

Ela possui métodos que podem resgatar os valores da URL individualmente, com o get

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos

E se você tentar pegar um parâmetro que não está na URL?

O get não quebra teu código, se liga

Ele simplesmente devolve null

const urlParams = new URLSearchParams(window.location.search)

const preco = urlParams.get("preco") // null, pois não existe na URL

Por isso é bom sempre checar antes de usar o valor

E pra isso existe o método has, que devolve true ou false dependendo se o parâmetro está lá ou não

if (urlParams.has("categoria")) { // faz algo só se categoria existir na URL }

Assim tu evita aquele erro chato de tentar usar um valor que veio vazio

Às vezes tu não sabe quais parâmetros vão vir na URL, e quer pegar todos de uma vez

Dá pra percorrer tudo com o forEach

const urlParams = new URLSearchParams(window.location.search)

urlParams.forEach((valor, chave) => { console.log(chave, valor) })

Repara que aqui a ordem é valor primeiro e chave depois, diferente do que muita gente espera

Já me confundi com isso, então fica o aviso!

Se tu quiser só a lista de chaves, tem o keys, e pros valores tem o values

E quando um mesmo parâmetro aparece repetido na URL (tipo ?cor=azul&cor=verde), o get traz só o primeiro

Pra pegar todos os valores desse parâmetro repetido tu usa o getAll, que devolve um array

Perguntas frequentes

Qual a diferença entre get e getAll?

O get devolve só o primeiro valor daquele parâmetro (uma string), e o getAll devolve um array com todos os valores, útil quando o mesmo parâmetro se repete na URL

O que o get retorna quando o parâmetro não existe?

Ele retorna null, por isso vale checar antes com o has

Preciso de alguma biblioteca externa pra isso?

Não, o URLSearchParams já vem embutido no navegador (built-in), tu não instala nada, é só usar

Dá pra usar isso no Node.js também?

Dá sim, o URLSearchParams também está disponível no Node, a diferença é que lá não existe o window.location, então tu passa a string da query direto pro objeto