2025年,跟 encodeURIComponent() 说再见吧

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

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

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

手动编码的噩梦

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

ini 复制代码
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,我们就不用操心编码的细节了:

vbscript 复制代码
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,包含多个参数:

vbscript 复制代码
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() 说再见了。

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

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

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

相关推荐
Lingxing5 小时前
事件流:深入理解事件冒泡、事件捕获与事件委托
前端·javascript·面试
前端小白19955 小时前
面试取经:浏览器篇-跨标签页通信
前端·面试·浏览器
golang学习记5 小时前
从0死磕全栈第4天:使用React useState实现用户注册功能
前端
AlenLi5 小时前
TypeScript - 开发圣经SOLID设计原则
前端·架构
San305 小时前
JavaScript 入门精要:从变量到对象,构建稳固基础
javascript·面试·html
bug_kada5 小时前
深入理解事件捕获与冒泡(详细版)
前端·javascript
wanghao6664555 小时前
如何从chrome中获取会话id
前端·chrome
As33100105 小时前
Chrome 插件开发入门:打造个性化浏览器扩展
前端·chrome