¡Hola a todos! Hoy, comparto un consejo rápido que mejoró significativamente la semántica de mi código.

A menudo, ya sea que trabajemos en desarrollo frontend o backend, necesitamos construir URL con parámetros, ¿verdad?

Solía ​​escribir las URL de mis solicitudes de esta manera:

const url = `http://localhost:3000/endpoint/param1=${var1}&param2=${var2}&param3=${var3}`

Aceptamos que esta URL es difícil de leer y mantener; siempre necesitamos identificar qué partes son parámetros, cuáles son variables y cuáles son solo sintaxis de Javascript.

Para abordar este problema semántico, descubrí el URL Constructor, que realiza la misma tarea pero de una manera más eficiente y elegante.

Ahora podemos reescribir el mismo código así:

const url = new URL('http://localhost:3000/endpoint')

url.searchParams.set('param1', var1)
url.searchParams.set('param2', var2)
url.searchParams.set('param3', var3)

El código indica claramente lo que está haciendo. En la primera línea creamos la URL base y en las líneas siguientes agregamos los parámetros de búsqueda necesarios.

Hecho. Ahora, la variable URL contiene los mismos parámetros de búsqueda que antes, pero ahora estamos usando la clase URL, lo que hace que el código sea mucho más simple y fácil de mantener.

¿Qué pasa contigo? ¿Has usado la clase URL antes? ¿Quizás con otro propósito? No dudes en compartir tus experiencias conmigo.