说起来你可能不信，很长时间以来，我们这些 JavaScript 程序员就像是在用石器时代的工具——encodeURIComponent() 来确保 URL 查询参数的安全性。说它能用吧，确实能用……但就是让人用得不爽。

想象一下，你每次都得把动态数据包在 encodeURIComponent() 里，然后手动拼接字符串，还得反复检查每个 & 和 ? 有没有写对。就像是用算盘算账一样，虽然能算出结果，但过程实在太痛苦了。

幸好，现代的 URL API 给了我们一个更清爽、更安全的选择。咱们一起来看看吧！

手动编码的噩梦

假设你正在为一个商品搜索页面构建链接，传统的做法是这样的：

const keyword = "coffee & cream";
const category = "beverages";

const url =
  "https://shop.example.com/search?query=" +
  encodeURIComponent(keyword) +
  "&cat=" +
  encodeURIComponent(category);

console.log(url);
// "https://shop.example.com/search?query=coffee%20%26%20cream&cat=beverages"

看到了吗？这代码就像是在搭积木，一块一块地拼，稍微不小心就会出错。忘记 encodeURIComponent() 的话，URL 直接就废了。

更干净的方法：new URL()

有了现代的 URL API，我们就不用操心编码的细节了：

const url = new URL("https://shop.example.com/search");
url.searchParams.set("query", "coffee & cream");
url.searchParams.set("cat", "beverages");

console.log(url.toString());
// "https://shop.example.com/search?query=coffee+%26+cream&cat=beverages"

是不是清爽多了？就像是从手洗衣服升级到了洗衣机——省心又高效。

为什么这样更好？

用 URL API 有这些好处：

自动编码 → 不用担心特殊字符，API 会自动处理 更易读 → 代码逻辑一目了然，不用在一堆字符串拼接中找 bug 灵活性 → 随时添加、更新或删除参数，不用重写字符串 通用支持 → 现代浏览器和 Node.js 都支持

不只是搜索查询

你可以用这个方法处理各种动态链接。比如构建一个天气预报的 URL，包含多个参数：

const url = new URL("https://api.weather.com/forecast");
url.searchParams.set("city", "Los Angeles");
url.searchParams.set("unit", "imperial");
url.searchParams.set("days", 5);

console.log(url.toString());
// "https://api.weather.com/forecast?city=Los+Angeles&unit=imperial&days=5"

如果用 encodeURIComponent() 来做，代码会长很多，还更难读懂。

现在你可以忘掉的东西

  • 把每个值都包在 encodeURIComponent() 里
  • 用 + "&param=" + 拼接字符串
  • 担心漏掉分隔符（? 和 &）
  • 处理特殊字符和空格
  • 调试那些看起来像外星文的 URL 字符串

最后的话

还记得我们从 callback 过渡到 async/await 的时候吗？现在是时候和 encodeURIComponent() 说再见了。

URL 和 URLSearchParams API 为你提供了一种现代、优雅的方式来构建安全、可读且易于维护的链接。

下次生成 URL 的时候，跳过那些老套路，让 new URL() 来处理复杂的部分吧！

就像换了新手机一样，用过新方法之后，你绝对不想再回到石器时代了。