說(shuō)起來(lái)你可能不信，很長(zhǎng)時(shí)間以來(lái)，我們這些 JavaScript 程序員就像是在用石器時(shí)代的工具——encodeURIComponent() 來(lái)確保 URL 查詢參數(shù)的安全性。說(shuō)它能用吧，確實(shí)能用……但就是讓人用得不爽。
想象一下，你每次都得把動(dòng)態(tài)數(shù)據(jù)包在 encodeURIComponent() 里，然后手動(dòng)拼接字符串，還得反復(fù)檢查每個(gè) & 和 ? 有沒(méi)有寫(xiě)對(duì)。就像是用算盤算賬一樣，雖然能算出結(jié)果，但過(guò)程實(shí)在太痛苦了。
幸好，現(xiàn)代的 URL API 給了我們一個(gè)更清爽、更安全的選擇。咱們一起來(lái)看看吧！
手動(dòng)編碼的噩夢(mèng)
假設(shè)你正在為一個(gè)商品搜索頁(yè)面構(gòu)建鏈接，傳統(tǒng)的做法是這樣的：
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"
看到了嗎？這代碼就像是在搭積木，一塊一塊地拼，稍微不小心就會(huì)出錯(cuò)。忘記 encodeURIComponent() 的話，URL 直接就廢了。
更干凈的方法：new URL()
有了現(xiàn)代的 URL API，我們就不用操心編碼的細(xì)節(jié)了：
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"
是不是清爽多了？就像是從手洗衣服升級(jí)到了洗衣機(jī)——省心又高效。
為什么這樣更好？
用 URL API 有這些好處：
自動(dòng)編碼 → 不用擔(dān)心特殊字符，API 會(huì)自動(dòng)處理
更易讀 → 代碼邏輯一目了然，不用在一堆字符串拼接中找 bug
靈活性 → 隨時(shí)添加、更新或刪除參數(shù)，不用重寫(xiě)字符串
通用支持 → 現(xiàn)代瀏覽器和 Node.js 都支持
不只是搜索查詢
你可以用這個(gè)方法處理各種動(dòng)態(tài)鏈接。比如構(gòu)建一個(gè)天氣預(yù)報(bào)的 URL，包含多個(gè)參數(shù)：
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() 來(lái)做，代碼會(huì)長(zhǎng)很多，還更難讀懂。
現(xiàn)在你可以忘掉的東西
? 把每個(gè)值都包在 encodeURIComponent() 里
? 用 + "¶m=" + 拼接字符串
? 擔(dān)心漏掉分隔符（? 和 &）
? 處理特殊字符和空格
? 調(diào)試那些看起來(lái)像外星文的 URL 字符串
轉(zhuǎn)自https://juejin.cn/post/7546527709537386539
該文章在 2025/9/8 9:20:45 編輯過(guò)
400 186 1886
