Como obter parâmetros de URL em JavaScript: análise por baixo dos panos

Parâmetros de URL em JavaScript: do simples ao complexo

Todo desenvolvedor já se deparou pelo menos uma vez com a tarefa: extrair dados da barra de endereços do navegador. Você abre uma página, vê algo como /products?id=42&category=books — e entende: em algum lugar dentro desse conjunto de caracteres estão escondidos dados importantes. Como extraí-los? A pergunta, que reuniu milhares de votos no Stack Overflow, é: "How can I get query string values in JavaScript?". Hoje não vamos apenas dar uma resposta pronta — vamos olhar por baixo dos panos desse processo e analisar como funciona o parsing de URL em JavaScript em todos os níveis.

Por que isso é importante? Porque os parâmetros de URL são a base da web moderna. Transferência de dados entre páginas, filtragem de produtos, análise, links de referência — tudo isso é construído em cima de strings simples após o ponto de interrogação. E se você programa em JavaScript, saber trabalhar com query string não é uma opção, é uma habilidade obrigatória.

O que é query string e como vê-la no navegador

Para começar, vamos esclarecer os termos. Query string (string de consulta) é a parte do URL que começa após o ponto de interrogação. Por exemplo, no endereço:

https://example.com/search?q=javascript&lang=ru&page=1

tudo o que vem depois de ? é a query string. Ela consiste em pares chave=valor, separados por e comercial (&). Cada chave pode aparecer várias vezes — e é importante lembrar disso.

Para obter essa string em JavaScript, basta acessar a propriedade:

const queryString = window.location.search;\nconsole.log(queryString); // "?q=javascript&lang=ru&page=1"

Observe: a propriedade retorna a string junto com o ponto de interrogação. Este é o ponto de partida para todas as manipulações posteriores.

Método nº1: URLSearchParams — moderno e simples

Se você está escrevendo código para navegadores modernos (e isso é 99% dos casos), use a API nativa URLSearchParams. Ela surgiu em 2016 e desde então se tornou o padrão de facto para trabalhar com parâmetros de URL. Vamos ver como funciona:

// Obtém a string de consulta\nconst queryString = window.location.search;\n\n// Cria um objeto URLSearchParams\nconst params = new URLSearchParams(queryString);\n\n// Obtém o valor pela chave\nconst q = params.get('q');       // "javascript"\nconst lang = params.get('lang'); // "ru"\nconst page = params.get('page'); // "1"\n\n// Verifica se o parâmetro existe\nconsole.log(params.has('lang')); // true\n\n// Obtém todos os valores, se a chave se repetir\nparams.append('q', 'python');\nconsole.log(params.getAll('q')); // ["javascript", "python"]\n\n// Itera sobre todos os parâmetros\nfor (const [key, value] of params) {\n    console.log(`${key}: ${value}`);\n}\n// Saída:\n// q: javascript\n// lang: ru\n// page: 1\n// q: python

Por baixo dos panos, o URLSearchParams decodifica automaticamente caracteres codificados (por exemplo, %20 vira espaço) e lida corretamente com casos complexos, como chaves repetidas. Isso não é apenas conveniente — é seguro.

Como funciona por baixo dos panos?

Quando você cria new URLSearchParams(queryString), o motor JavaScript executa os seguintes passos:

\n
• Remove o ponto de interrogação inicial (se houver).
\n
• Divide a string pelo caractere &, obtendo um array de pares.
\n
• Divide cada par pelo primeiro caractere = em chave e valor.
\n
• Decodifica componentes URI — substitui %20 por espaço, %23 por # e assim por diante.
\n
• Armazena tudo em uma estrutura, onde cada chave corresponde a um array de valores (mesmo que seja apenas um).
\n

Esse processo é totalmente reversível. Você pode modificar os parâmetros