Query String para Objeto

Beginner

This tutorial is from open-source community. Access the source code

Introdução

Neste laboratório, exploraremos como converter uma query string ou URL em um objeto usando JavaScript. Usaremos o método String.prototype.split() para extrair os parâmetros da URL, em seguida, criaremos um objeto usando o construtor URLSearchParams e o converteremos em um array de pares chave-valor. Finalmente, usaremos Array.prototype.reduce() para converter o array em um objeto JavaScript. Este laboratório ajudará você a entender como manipular e extrair dados de URLs e query strings em JavaScript.

Convertendo Query String para Objeto

Para converter uma query string ou URL em um objeto, siga estes passos:

  1. Abra o Terminal/SSH e digite node para começar a praticar a codificação.
  2. Use String.prototype.split() para extrair os parâmetros da url fornecida.
  3. Use o construtor URLSearchParams para criar um objeto e convertê-lo em um array de pares chave-valor usando o operador spread (...).
  4. Use Array.prototype.reduce() para converter o array de pares chave-valor em um objeto.

Aqui está o código para converter a query string:

const queryStringToObject = (url) =>
  [...new URLSearchParams(url.split("?")[1])].reduce(
    (a, [k, v]) => ((a[k] = v), a),
    {}
  );

Exemplo de uso:

queryStringToObject("https://google.com?page=1&count=10");
// {page: '1', count: '10'}

Resumo

Parabéns! Você concluiu o laboratório de Query String para Objeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.