译：new URL() 问题以及 URL.parse() 是如何解决它的 tags:

原文地址：kilianvalkhof.com/2024/javasc...
作者：kilian Valkhof

作为构建浏览器的人，我需要解析大量的 URL。一部分是为了验证它们，另一部分是为了规范或者获取 URL 中的某些部分。浏览器中的 URL API 可以让你做到这一点，但其体验并不理想。

new URL() 的问题

new URL() 的 new 代表它可以被用作构造函数：调用它可以创建一个新的 URL 实例。但当你传入一个无法被解析的 URL 时，它就会抛错。因此，你需要编写错误处理的代码。

如果你不这么做，那得不到处理错误会中断你的 JS 代码。下面的代码看上去不错，但如果 urlstring 格式错误，它就会终止：

javascript 复制代码

const urlstring = "this is not a URL";
const not_a_url = new URL(urlstring);
// Uncaught TypeError: URL constructor: "this is not a URL" is not a valid URL.

因此，你需要将它们放到 try/catch 中，用来捕获错误。

javascript 复制代码

const urlstring = "this is not a URL";
let not_a_url;

try {
   not_a_url = new URL(urlstring);
} catch {
  // we catch and ignore the error
  // not_a_url is already undefined so no need to actually do anything.
}

这会增加更多的代码，也会带来视觉干扰。同时也意味之你要把 not_a_url 从 const 变为 let 来进行赋值。在实际应用中的控制流程也会变得更加复杂。

稍微优化一下

URL.parse() 是最新添加的 URL api。当传入的是可解析的 URL，这个方法会返回 true。

自 2023 年 12 月才可以跨浏览器使用。因此若想通用的话还为时尚早（原文时间 2024/4/24），但它可以让代码更具可读性。

比起使用 try/catch 我们可以在解析前先对检查 URL，并且用内联操作即可。

javascript 复制代码

const urlstring = "this is not a URL";

const not_a_url = URL.canParse(urlstring) && new URL(urlstring);
// not_a_url = false

这让 not_a_url 重新变回了 const，并且更容易被理解。

抱怨

比起构建一些我自己的小函数将 try...catch 或者 canParse 从代码中抽象出来，我决定写一些东西并在 Twitter 上抱怨。

在传入一个非法的 URL 时让 new URL() 抛出错误，是一个非常糟糕的 API设计。

不久之后，Anne van Kesteren 回复了一个关于 URL "parse" 中不该抛出错误的 GithHub issue。

Anne 在 2018 年添加了这个问题，但我的推文又重新引起了兴趣。不久之后，Anne 将 URL.parse() 添加到了规范中，并对所有的浏览器引擎提做了修复。

Anne 本人在 WebKit 中实现了它，同时也会在 Chromium 126 和 Firefox 126 中发布。

使用 URL.parse

使用 URL.parse 我们回到最早的例子，并且可以让控制流程变得简单：

javascript 复制代码

const urlstring = "this is not a URL";

const not_a_url = URL.parse(urlstring);
// not_a_url = null

具有此功能的浏览器会在接下来的几个月内发布（Firefox 将在 5 月，Chrome 将在 6 月发布，我不知道 Safari 的发布时间），所以你在使用此方法之前还需要再等待一段时间，但我已经'迫不及待'地想摆脱我所有的 try...catch 调用了！