URL.canParse

A análise de URLs no lado do cliente tem sido uma prática comum há duas décadas. Os primeiros dias incluíam o uso de expressões regulares ilegíveis, mas a especificação do JavaScript acabou evoluindo para um new URL método de análise de URLs. Embora URL é incrivelmente útil quando um URL válido é fornecido, uma string inválida gera um erro – eca! Um novo método, URL.canParse, estará disponível em breve para validar URLs!

O fornecimento de um URL malformado ao new URL gerará um erro, portanto, todo uso de new URL precisaria estar dentro de um try/catch bloco:

// The correct, safest way
try {
  const url = new URL('https://davidwalsh.name/pornhub-interview');
} catch (e) {
  console.log("Bad URL provided!");
}

// Oops, these are problematic (mostly relative URLs)
new URL('/');
new URL('../');
new URL('/pornhub-interview');
new URL('?q=search+term');
new URL('davidwalsh.name');

// Also works
new URL('javascript:;');

Como o senhor pode ver, as cadeias de caracteres que funcionariam corretamente com um <a> às vezes não funcionam com a tag new URL. Com URL.canParse, o senhor pode evitar o try/catch para determinar a validade do URL:

// Detect problematic URLs
URL.canParse('/'); // false
URL.canParse('/pornhub-interview'); // false
URL.canParse('davidwalsh.name'); //false

// Proper usage
if (URL.canParse('https://davidwalsh.name/pornhub-interview')) {
  const parsed = new URL('https://davidwalsh.name/pornhub-interview');
}

Percorremos um longo caminho desde os regexes crípticos e o queimador <a> para este URL e URL.canParse APIs. Atualmente, os URLs representam muito mais do que a localização, portanto, ter uma API confiável ajudou muito os desenvolvedores da Web!