说起来你可能不信，很长时间以来，我们这些 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 字符串

转自https://juejin.cn/post/7546527709537386539