Cómo construir una URL con parámetros en Javascript

Muchas veces usamos expresiones regulares para construir o manejar las distintas partes de una URL. Sin embargo, el motor de javascript provee de forma nativa (también para Node.js) de la api URL para tratar fácilmente con ellas.

La forma más sencilla de utilizar esta api es a través de su constructor:

const url = new URL('https://javascript.com.es')

Una vez tenemos construida nuestra instancia, podremos usar sus métodos y propiedades para extraer partes de la URL

const url = new URL('https://javascript.com.es/about#top')
console.log(url.protocol) //'https:'
console.log(url.host) // 'javascript.com.es'
console.log(url.pathname) //'/about'
console.log(url.hash) //'#top'
console.log(url.href) // 'https://javascript.com.es/about#top'

Algo que tenemos que tener en cuenta es que además nos validará las URLs, de lo contrario nos lanzará una excepción.

const url = new URL('javascript.com.es/about#top')
// TypeError: Failed to construct 'URL': Invalid URL

Con respecto a los parámetros lo habitual es que usemos template strings para crear URL.

Cuando tenemos muchos parámetros o queremos que estos sean condicionales las template strings no resultarnos del todo apropiadas.

Para ello, la api URL nos provee de la propiedad searchParams con la que podremos interactuar de una forma más limpia.

Veámoslo en acción:

const url = new URL('https://javascript.com.es/')
url.searchParams.append('q','api URL')
url.searchParams.append('order', 'desc')
console.log(url.href)
// 'https://javascript.com.es/?q=api+URL&order=desc'

Search params también nos permite interactuar con los parámetros mediante distintos métodos:

const url = new URL('https://javascript.com.es/?q=api+URL&order=desc')
console.log(url.searchParams.has("order")) // true
console.log(url.searchParams.get("order")) // desc
console.log(Object.fromEntries(url.searchParams.entries())) // { q: 'api URL', order: 'desc' }