当前位置：首页 > news >正文

encodeURIComponent和decodeURIComponent

news 来源：原创 2025/6/11 13:33:58

URL编码大作战：告别“失踪”的`&`和`/`，精通 `encodeURIComponent`！🚀

哈喽，各位前端开发者们！👋

你是否遇到过这样的情况：满怀信心地构建了一个URL，想把"C# & .NET"作为搜索词传给后端，结果后端老哥跑来问你：“你传过来的参数怎么只剩'C#'了？'& .NET'去哪儿了？” 😱

或者，你想把一个文件路径 /my/files/report.pdf 作为参数传递，结果整个路由都乱了套？

别慌，这可不是什么灵异事件！这背后的“捣蛋鬼”其实是URL的特殊字符。今天，我们就来彻底搞定这个“捣蛋鬼”，让你彻底掌握URL编码的核心武器——encodeURIComponent() 和它的好搭档 decodeURIComponent()。

为什么我们需要URL编码？ 🩸

URL（统一资源定位符）就像是互联网世界的门牌号，它有一套自己的语法规则。其中，一些字符被赋予了特殊的“语法含义”，比如：

?: 分隔URL路径和查询参数的开始
&: 分隔多个查询参数
=: 连接参数名和参数值
/: 定义路径层级
#: 指向页面内的锚点

现在，想象一下我们要构建一个搜索链接，搜索词是 Vue & Redux：

let keyword = "Vue & Redux";
let url = `https://example.com/search?q=${keyword}`;
// 结果 -> https://example.com/search?q=Vue & Redux

💥 灾难发生了！

浏览器和服务器看到这个URL时，会这样解读：

有一个查询参数，键是 q，值是 Vue 。
后面跟着一个 &，哦，这是下一个参数的开始。
下一个参数是 Redux，但它没有 =，格式不正确，可能会被忽略或报错。

你看，& 字符在这里引起了歧义，破坏了我们原本的意图。

为了解决这个问题，我们需要对这些特殊字符进行“伪装”，让它们失去语法含义，变成普普通通的文本。这就是URL编码的用武之地！

主角登场：`encodeURIComponent()` 的“伪装”艺术 🦸

MDN解释：encodeURIComponent() 函数通过将特定字符的每个实例替换成代表字符的 UTF-8 编码的一个、两个、三个或四个转义序列来编码 URI（只有由两个“代理”字符组成的字符会被编码为四个转义序列）。与 encodeURI() 相比，此函数会编码更多的字符，包括 URI 语法的一部分。

encodeURIComponent() 就像一个专业的“伪装大师”。当你给它一个字符串，它会把所有可能引起麻烦的特殊字符，统统转换成 % 加上两位十六进制数的格式。

它非常严格，只会放过一小部分“安全”的字符：

字母 (A-Z, a-z)
数字 (0-9)
以及这几个宝贝：- _ . ! ~ * ' ( )

除此之外，通通“伪装”起来！

场景一：拯救查询参数

让我们用 encodeURIComponent() 来拯救上面那个例子：

let baseUrl = "https://example.com/search";
let queryKey = "q";
let queryValue = "Vue & Redux"; // 包含捣蛋鬼 '&'let finalUrl = `${baseUrl}?${queryKey}=${encodeURIComponent(queryValue)}`;console.log(finalUrl);
// ✅ 正确输出: https://example.com/search?q=Vue%20%26%20Redux

看！& 被伪装成了 %26，空格被伪装成了 %20。现在，服务器收到的 q 参数值就是完完整整的 "Vue & Redux"，皆大欢喜！

场景二：驯服路径中的“猛兽”

在之前的 prevPath 例子中，我们传递的参数本身就是一个路径，比如 /my/folder。这里的斜杠 / 也是个“猛兽”，必须被驯服。

let originalPathSegment = "my folder/file name.txt";
let encodedPathSegment = encodeURIComponent(originalPathSegment);console.log(encodedPathSegment);
// ✅ 正确输出: my%20folder%2Ffile%20name.txt

现在，你可以安全地把它作为另一个URL的查询参数，而不用担心它把你的路由结构搅得天翻地覆。

完美搭档：`decodeURIComponent()` 的解密时刻 🕵️

MDN解释：decodeURIComponent() 方法用于解码由 encodeURIComponent 方法或者其他类似方法编码的部分统一资源标识符（URI）。

有“伪装”就有“卸妆”。当你的应用程序（无论是前端还是后端）从URL中获取到被编码过的参数时，就需要 decodeURIComponent() 来把它恢复成原始的、人类可读的样子。

场景三：解码查询参数

假设我们的Vue组件从路由中拿到了之前编码过的搜索词：

// 在Vue组件中，this.$route.query.q 的值是 "Vue%20%26%20Redux"
let encodedValueFromUrl = "Vue%20%26%20Redux";
let decodedValue = decodeURIComponent(encodedValueFromUrl);console.log(decodedValue);
// ✅ 正确输出: Vue & Redux

瞧，我们又拿回了最初的数据！

场景四：从URL中解析并解码所有参数

在真实世界里，我们可能需要从一个完整的查询字符串中解析出所有的键和值。

// 假设我们从 window.location.search 获取到查询字符串
let searchString = "?q=Vue%20Router%20%26%20Vuex&category=%E5%89%8D%E7%AB%AF";// 通常需要手动解析查询字符串，这里简化处理
// 实际应用中会使用 URLSearchParams 或其他库
let params = {};
searchString.substring(1).split("&").forEach((pair) => {const [key, value] = pair.split("=");params[decodeURIComponent(key)] = decodeURIComponent(value);});console.log("Parsed and decoded query parameters:", params);

提示：虽然手动分割字符串也能实现，但强烈推荐使用浏览器内置的 URLSearchParams API，它能帮你自动处理解码，代码更简洁、更健壮！

// 假设从 window.location.search 拿到这个字符串
let searchString = "?q=Vue%20Router%20%26%20Vuex&category=%E5%89%8D%E7%AB%AF";// 现代浏览器推荐使用 URLSearchParams，更简单安全！
const params = new URLSearchParams(searchString);const q = params.get('q'); // URLSearchParams 会自动解码
const category = params.get('category'); // 它也会自动解码中文console.log("搜索词:", q);      // ✅ 输出: 搜索词: Vue Router & Vuex
console.log("分类:", category); // ✅ 输出: 分类: 前端

小心！别用错了兄弟：`encodeURI` vs `encodeURIComponent` 🧐

你可能还见过一个长得很像的函数 encodeURI()。请注意，它们是两兄弟，但性格完全不同！

encodeURIComponent() (弟弟): 更严格，它会编码所有它认为有风险的特殊字符，包括 &, =, ?, / 等。它适用于编码URL的一个组成部分（比如查询参数的值、路径的一部分）。
encodeURI() (哥哥): 更宽容，它不会编码 &, =, ?, / 这些用于构建URL的“保留字符”。它适用于编码一个完整的URL，比如你的URL里本身就包含了中文字符。

一句话原则：当你需要把一个值塞进URL的查询参数里时，永远优先使用 encodeURIComponent()！99%的场景下，它都是你正确的选择。