说起来你可能不信,很长时间以来,我们这些 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()
里 - • 用
+ "¶m=" +
拼接字符串 - • 担心漏掉分隔符(
?
和&
) - • 处理特殊字符和空格
- • 调试那些看起来像外星文的 URL 字符串
最后的话
还记得我们从 callback 过渡到 async/await
的时候吗?现在是时候和 encodeURIComponent()
说再见了。
URL
和 URLSearchParams
API 为你提供了一种现代、优雅的方式来构建安全、可读且易于维护的链接。
下次生成 URL 的时候,跳过那些老套路,让 new URL()
来处理复杂的部分吧!
就像换了新手机一样,用过新方法之后,你绝对不想再回到石器时代了。