Interfaz URLSearchParams

Autor: | Última modificación: 23 de noviembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

En este post, te enseñaremos qué es y cómo funciona la interfaz URLSearchParams, fundamental para interactuar con algunos detalles de nuestra URL.

¿Qué es la interfaz URLSearchParams?

La interfaz URLSearchParams es un espacio en el que encontramos distintos métodos para trabajar con el query string de una URL, que se identifica por ser todo el segmento de un enlace después del signo de interrogación (?). Este segmento nos permite guardar información extra para ser más específicos con el recurso al que hace referencia la URL.

Un ejemplo del uso de un query string es un enlace con ID en JavaScript, en el que el ID de un objeto se usa en la URL para identificar y mostrar dicho objeto.

¿Cómo funciona la interfaz URLSearchParams?

Como te mencionamos antes, la interfaz URLSearchParams pone a disposición del desarrollador web una serie de métodos que permiten ejecutar distintas acciones sobre el query string de la URL que le pasemos. Entre estos métodos se encuentran algunos de simple consulta y otros de interacción.

Hay un pequeño truco con esta interfaz, pues su constructor solamente recibe el query string de la URL. Es decir, no podemos simplemente pasar todo el enlace como parámetro. Entonces, para obtener solamente el query string deberemos usar la propiedad search de la propiedad window.location.

A continuación, te mostramos la línea de código que podrías usar para crear una nueva instancia de esta interfaz y pasarle tu query string actual:

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

Ahora que hemos guardado esta acción bajo una variable, que en nuestro caso es la constante searchParams, podremos usar este nombre para acceder a los distintos métodos de la interfaz URLSearchParams.

Uno de los métodos más usados en esta interfaz es el .get, pues nos permite consultar ciertos detalles del query string de nuestra URL actual. Para ello, el método .get recibe la clave de la propiedad que queremos consultar y nos devuelve su valor.

A continuación, te mostramos un ejemplo en el que obtenemos el ID de este segmento de URL usando la constante declarada anteriormente:

searchParams.get («id»)

Con la anterior línea de código, hemos logrado conseguir el valor del id actual de la URL en la que estamos. En nuestro caso, esta búsqueda ha retornado el valor 4. Este tipo de búsquedas nos permitirán luego hacer una petición fetch usando este valor para buscar el objeto que tenga el mismo id del enlace. De este modo, se mostrará el contenido correspondiente al id que tiene la URL.

Además del método .get, existen muchas funciones nativas propias de esta interfaz que nos permiten ejecutar todo tipo de acciones sobre el query string. Si quieres conocer más sobre los distintos métodos de la interfaz URLSearchParams, te recomendamos leer el artículo URLSearchParams en la página oficial de la Mozilla Developer Network.

¿Qué sigue?

Tras leer este post, sabes exactamente qué es y cómo funciona la interfaz URLSearchParams, pero ¡todavía queda mucho por aprender sobre el desarrollo web! Si quieres seguir aprendiendo sobre los conceptos, lenguajes, patrones y herramientas fundamentales para este mundo, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva ideal para ti. ¡No te lo pierdas y solicita información ahora!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!