Como Obter Parâmetros Da URL Com Javascript Puro

Trabalhar com URLs é uma tarefa comum em nosso desenvolvimento diário
Muitas das vezes, trabalhamos com frameworks como Angular, Vue, React que facilitam e muito o trabalho de manipular URLs, obter parâmetros, etc.
Mas alguma vez você já precisou obter os valores de uma query parameter com javascript puro?

Para obter os valores de parâmetro de uma URL, através do Javascript puro, podemos utilizar um cara chamado: URLSearchParams
Ele nos permite trabalharmos com as strings da URL com maior facilidade!

Veja como é fácil:

1
2
3
4
5
// armazenamos os parâmetros da url
const urlParams = new URLSearchParams(window.location.search);

// acessamos o valor que desejamos
const myParam = urlParams.get('nomeDoParametro');

Então, vamos ter como exemplo a URL: www.backefront.com.br/post?topic=javascript
Seguindo o código acima, para termos o valor de topicprecisamos então fazer:

1
2
3
4
5
6
7
8
// armazenamos os parâmetros da url
const urlParams = new URLSearchParams(window.location.search);

// acessamos o valor que desejamos
const topic = urlParams.get('topic');

console.log(topic);
// Resultado esperado: "javascript"

Bem mais fácil do que imaginávamos!
Quanto sua aceitação nos navegadores, consultando o Can I Use vemos que praticamente apenas o IE não suporta essa interface!

🏡