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!
