Como adicionar parâmetros a query string com JavaScript

Neste artigo você vai aprender a como adicionar parâmetros a query string em JavaScript, ou seja, aos valores que ficam na URL do navegador

Fala programador(a), bora aprender mais sobre query string e JavaScript!

Em JS temos um objeto chamado URLSearchParams, ao instanciá-lo conseguimos maniupar a query string

Nele vamos utilizar o método set, que recebe um nome de parâmetro e um valor

Após este processo o novo parâmetro será adicionado a query string

Veja o código necessário:

    const urlParams = new URLSearchParams(window.location.search);
    
    urlParams.set("name", "horadecodar");
    
    const param = urlParams.get("name")
    
    console.log(param) // horadecodar

Nas duas primeiras linhas instanciamos o objeto e também inserimos o parâmetro

Depois é feito o resgate, através do método get

Bem simples não é? 🙂

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Conclusão

Neste artigo você viu como adicionar parâmetros a query string em JavaScript

Utilizamos o objeto URLSearchParams e os métodos set e get do mesmo

Com isso é possível fazer todo o processo que necessitamos!

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!

Como remover um parâmetro da query string:

Adicionar é só metade do trabalho, uma hora tu vai precisar TIRAR um parâmetro da URL também

Pra isso existe o método delete, que recebe só o nome do parâmetro

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

urlParams.set("name", "horadecodar");
urlParams.delete("name");

console.log(urlParams.get("name")) // null

Repara que o get devolve null quando o parâmetro não existe mais

Ou seja, dá pra usar o próprio get como teste rápido de existência 🙂

Qual a diferença entre set e append?

O set sobrescreve: se o parâmetro já existir, o valor antigo dá lugar ao novo

Já o append ADICIONA mais um valor, mantendo o que já estava lá

const urlParams = new URLSearchParams();

urlParams.append("tag", "js");
urlParams.append("tag", "query-string");

console.log(urlParams.toString()) // tag=js&tag=query-string

Pra resgatar todos os valores de um mesmo parâmetro usamos o getAll, que devolve um array

Tome cuidado aqui: se tu usar append achando que é set, a query string vai acumulando valor repetido e o get devolve só o primeiro

Como atualizar a URL do navegador de verdade:

Aqui mora a pegadinha que mais confunde quem tá começando

O URLSearchParams trabalha em cima de uma cópia da query string, então mexer nele não muda a barra de endereço sozinho

Pra refletir a mudança na URL a gente usa o history junto do toString do nosso objeto

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

urlParams.set("name", "horadecodar");

const novaUrl = `${window.location.pathname}?${urlParams.toString()}`;

history.replaceState(null, "", novaUrl);

O replaceState troca a URL atual sem recarregar a página

Se tu quiser que o botão de voltar do navegador guarde o estado anterior, usa o pushState no lugar, a assinatura é a mesma

Já me ferrei com isso: fiquei um tempo achando que o set tinha falhado, quando na verdade faltava esse último passo 😅

Como ler todos os parâmetros da query string:

Nem sempre a gente sabe o que vem na URL, aí não dá pra ficar chamando get de um em um

O objeto é iterável, então dá pra percorrer com forEach ou com um for of

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

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

const objeto = Object.fromEntries(urlParams);

console.log(objeto)

Repara na ordem do forEach: primeiro vem o VALOR e depois a chave, o contrário do que muita gente espera

O Object.fromEntries é um atalho massa pra transformar tudo em um objeto comum e seguir a vida 😀

Só lembra que, com chave repetida, esse atalho guarda apenas o último valor, aí o getAll continua sendo o caminho

Como montar uma query string do zero:

Não precisa ter URL nenhuma pra usar o URLSearchParams, dá pra criar um do zero passando um objeto

const urlParams = new URLSearchParams({
name: "horadecodar",
curso: "javascript avançado"
});

Se liga no espaço e no cedilha ali: o próprio objeto já faz o encode dos valores pra você

Isso mata aquela URL quebrada clássica de quando a gente monta a string na mão, na base da concatenação

Bem melhor, né? 🙂

Perguntas frequentes sobre query string em JavaScript:

Como saber se um parâmetro existe na URL?

Usando o método has, que devolve true ou false

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

console.log(urlParams.has("name"))

Dá pra manipular a query string de uma URL que não é a da página?

Dá sim, e nem precisa montar string na mão

Instancia um objeto URL e pega o searchParams dele, que já é um URLSearchParams com todos esses métodos

const url = new URL("https://horadecodar.com.br/?name=matheus");

url.searchParams.set("name", "horadecodar");

console.log(url.toString())

Preciso instalar alguma biblioteca pra isso?

Repara que em nenhum exemplo deste artigo tem import ou require

Menos dependência no projeto, sempre bom =)