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

作为构建浏览器的人,我需要解析大量的 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_urlconst 变为 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 126Firefox 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 调用了!

相关推荐
Bruce_Liuxiaowei38 分钟前
构建macOS命令速查手册:基于Flask的轻量级Web应用实践
前端·macos·flask
Python私教1 小时前
安装electron项目是为什么要执行postinstall script
前端·javascript·electron
shmily_yyA1 小时前
Nextjs15 实战 - React Notes之SidebarNoteList优化和Suspense的使用
前端·react.js·前端框架
知识分享小能手1 小时前
CSS3学习教程,从入门到精通, 化妆品网站 HTML5 + CSS3 完整项目(26)
前端·javascript·css·学习·css3·html5·媒体
了不起的码农2 小时前
ES6对函数参数的新设计
前端·ecmascript·es6
XH2762 小时前
Android 通知用法详解
前端
陈随易2 小时前
盘点23个Nodejs的替代品Bun的实用功能
前端·后端·程序员
uhakadotcom2 小时前
兄弟们,炸裂了!llama 4发布了!又有哪些创业公司被颠覆了?
前端·算法·面试
uhakadotcom2 小时前
EventEmitter3:高性能事件发射器的使用与优势
前端·javascript·面试
XH2762 小时前
Android Bitmap.createBitmap() 用法全解析
前端·设计