encodeURIComponent和decodeURIComponent


URL编码大作战:告别"失踪"的&/,精通 encodeURIComponent!🚀

哈喽,各位前端开发者们!👋

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

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

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

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

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

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

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

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

💥 灾难发生了!

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

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

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

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

主角登场:encodeURIComponent() 的"伪装"艺术 🦸

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

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

它非常严格,只会放过一小部分"安全"的字符:

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

除此之外,通通"伪装"起来!

场景一:拯救查询参数

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

javascript 复制代码
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。这里的斜杠 / 也是个"猛兽",必须被驯服。

javascript 复制代码
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组件从路由中拿到了之前编码过的搜索词:

javascript 复制代码
// 在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中解析并解码所有参数

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

javascript 复制代码
// 假设我们从 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,它能帮你自动处理解码,代码更简洁、更健壮!

javascript 复制代码
// 假设从 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%的场景下,它都是你正确的选择。

总结:成为URL编码大师的秘诀 ✨

回顾:

  1. 识别风险 :任何时候,只要你想把一个可能包含特殊字符(&, ?, /, #, 空格等)或中文的字符串放进URL,就要想起编码!
  2. 选择武器 :使用 encodeURIComponent() 来对你的数据进行"伪装",确保它在URL中安全传输。
  3. 还原真相 :在接收端,使用 decodeURIComponent() (或者更推荐的 URLSearchParams)来"卸妆",获取原始数据。
  4. 牢记区别 :只在需要编码整个URL时才考虑 encodeURI(),编码URL的部分 时,请坚决使用 encodeURIComponent()
相关推荐
贩卖纯净水.15 分钟前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
程序研1 小时前
一、ES6-let声明变量【解刨分析最详细】
前端·javascript·es6
疯狂的沙粒1 小时前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
xiaominlaopodaren2 小时前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript
PasserbyX2 小时前
一句话解释JS链式调用
前端·javascript
1024小神2 小时前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
古夕2 小时前
如何将异步操作封装为Promise
前端·javascript
@一枝梅2 小时前
vue3 vite.config.js 引入bem.scss文件报错
javascript·rust·vue·scss
古夕2 小时前
JS 模块化
前端·javascript
一只小风华~2 小时前
HTML前端开发:JavaScript 常用事件详解
前端·javascript·html