Cadena de consulta a objeto

JavaScriptJavaScriptBeginner
Practicar Ahora

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

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

En este laboratorio, exploraremos cómo convertir una cadena de consulta o URL en un objeto utilizando JavaScript. Utilizaremos el método String.prototype.split() para extraer los parámetros de la URL, luego crearemos un objeto utilizando el constructor URLSearchParams y lo convertiremos en una matriz de pares clave-valor. Finalmente, utilizaremos Array.prototype.reduce() para convertir la matriz en un objeto de JavaScript. Este laboratorio te ayudará a entender cómo manipular y extraer datos de URLs y cadenas de consulta en JavaScript.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/SecurityGroup(["Security"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") javascript/SecurityGroup -.-> javascript/web_sec("Web Security Basics") subgraph Lab Skills javascript/variables -.-> lab-28565{{"Cadena de consulta a objeto"}} javascript/data_types -.-> lab-28565{{"Cadena de consulta a objeto"}} javascript/arith_ops -.-> lab-28565{{"Cadena de consulta a objeto"}} javascript/comp_ops -.-> lab-28565{{"Cadena de consulta a objeto"}} javascript/array_methods -.-> lab-28565{{"Cadena de consulta a objeto"}} javascript/higher_funcs -.-> lab-28565{{"Cadena de consulta a objeto"}} javascript/spread_rest -.-> lab-28565{{"Cadena de consulta a objeto"}} javascript/web_sec -.-> lab-28565{{"Cadena de consulta a objeto"}} end

Convertir una cadena de consulta en un objeto

Para convertir una cadena de consulta o URL en un objeto, siga estos pasos:

  1. Abra la Terminal/SSH y escriba node para comenzar a practicar la codificación.
  2. Utilice String.prototype.split() para extraer los parámetros de la url dada.
  3. Utilice el constructor URLSearchParams para crear un objeto y conviértalo en una matriz de pares clave-valor utilizando el operador de propagación (...).
  4. Utilice Array.prototype.reduce() para convertir la matriz de pares clave-valor en un objeto.

A continuación, se muestra el código para convertir la cadena de consulta:

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

Uso de ejemplo:

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

Resumen

¡Felicidades! Has completado el laboratorio de convertir una cadena de consulta en un objeto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.