URL.canParse(): Un cambio de juego en el desarrollo web

Las URL están en todas partes. Las usamos mucho. Pero aunque se usan mucho, no tenemos una buena forma de comprobar si una cadena es una URL válida o no.

Así es como generalmente construimos un objeto URL:

const url = new URL('https://www.google.com');

Ahora si te preguntas, por qué debería preocuparme por esto, simplemente usaré la URL como una cadena.

Así que para responder a esto, si utilizamos un objeto URL, entonces tendremos algunos métodos incorporados para extraer el nombre de host, parámetros de consulta, etc.

// Using a URL object
let myURL = new URL('https://example.com/path?param1=value1#fragment');

console.log(myURL.hostname); // Output: example.com

myURL.pathname = '/newpath';
myURL.searchParams.set('param2', 'value2');

console.log(myURL.toString()); // Output: https://example.com/newpath?param1=value1&param2=value2#fragment

De lo contrario, tenemos que utilizar regex y bibliotecas de terceros para validar y analizar las cadenas de URL.

Ahora bien, si pasamos alguna cadena inválida en el constructor de URL, entonces el motor JS arrojará un error como este:

Ahora para manejar estos, desde hace 2 décadas hemos estado haciendo esto:

try {
  const url = new URL('JS Is Love');
} catch (e) {
  console.log("JS Is Love but sorry it's not a valid URL");
}

Pero ahora tenemos una nueva forma de comprobar si una cadena dada puede formar una URL válida o no.

URL.canParse()

if (URL.canParse('https://www.youtube.com/@rahuulmiishra')) {
  const parsed = new URL('https://www.youtube.com/@rahuulmiishra');
}

URL.canParse() es un método estático, que toma dos argumentos:

Una URL es una cadena o cualquier objeto capaz de convertirse en una cadena, como un <a> o <area> o algún elemento de HTML. Indica una URL absoluta o relativa. En los casos en los que la URL proporcionada sea relativa, deberá suministrarse una URL base que servirá como punto de referencia. Si la URL es absoluta, no se tendrá en cuenta ninguna base especificada.
Base (opcional): El parámetro base es una cadena opcional que indica la URL base que se utilizará cuando la URL dada sea relativa. Si no se define explícitamente, su valor predeterminado es indefinido.

Test valid absolute URL
 URL.canParse("https://developer.mozilla.org/"): true

Test relative URL with no base URL
 URL.canParse("/en-US/docs"): false

Test relative URL with valid base URL
 URL.canParse("/en-US/docs","https://developer.mozilla.org/"): true

Test relative URL with base URL supplied as a URL object
const urlObj = new URL('https://developer.mozilla.org/');
 URL.canParse("/en-US/docs",urlObj);true

Conclusión:
Además de sonar bien cuando lo escribes, usar el objeto URL tiene más sentido lógicamente. El método try-catch puede parecer bien en el código, pero no es tan agradable a la vista y no coincide con la forma en que naturalmente pensamos acerca de las cosas.

Fuente