encodeURIComponent和decodeURIComponent的使用场景

实战项目存在的问题:URL中存在有特殊字符,尤其是# 。在 URL 中有特殊的意义,它表示 URL 的 锚点(fragment identifier),用于指定页面中的一个特定位置。通常,# 后面的内容被认为是锚点标识符,不会被发送到服务器,只会在客户端处理。因此,如果一个 URL 中包含 #,那么 # 后面的部分不会作为 URL 的查询字符串的一部分被解析,而是作为锚点进行处理。

encodeURIComponentdecodeURIComponent 是 JavaScript 中用于处理 URL 编码和解码的函数。它们通常用于以下场景中:

1. 传递数据作为 URL 参数时

当你需要在 URL 中传递参数(特别是包含特殊字符或非 ASCII 字符的参数)时,必须使用 encodeURIComponent 来确保参数能够正确地在 URL 中传递,而不会与 URL 的结构冲突。

场景:
  • 传递包含特殊字符的查询参数 : 比如参数值中可能包含空格、&=# 或中文字符等,如果不对这些字符进行编码,它们会与 URL 的结构混淆,导致 URL 无法正确解析。
javascript 复制代码
const name = "John Doe & Jane";
const url = `https://example.com?name=${encodeURIComponent(name)}`;
console.log(url);  // 输出:https://example.com?name=John%20Doe%20%26%20Jane

这里,& 被编码成 %26,空格被编码成 %20,以避免它们影响 URL 解析。

另一种场景:
  • 传递 JSON 数据作为 URL 参数: 当你将复杂的数据(如 JSON 字符串)作为 URL 参数传递时,必须先对整个 JSON 字符串进行编码。
javascript 复制代码
const data = {
  userId: 123,
  username: "JohnDoe",
  email: "john@example.com"
};
const jsonData = JSON.stringify(data);
const encodedData = encodeURIComponent(jsonData);
const url = `https://example.com?data=${encodedData}`;
console.log(url);
// 输出:https://example.com?data=%7B%22userId%22%3A123%2C%22username%22%3A%22JohnDoe%22%2C%22email%22%3A%22john%40example.com%22%7D

在这个例子中,整个 JSON 字符串被编码,以确保它在 URL 中传递时不发生错误。

2. 从 URL 中读取并解析数据时

在从 URL 获取参数后,如果参数值包含编码的字符,你通常需要使用 decodeURIComponent 来解码这些值,以便正确地读取原始数据。

场景:
  • 从 URL 参数获取值并解码 : 当你从浏览器的地址栏或某些 API 获取到 URL 参数时,这些参数值通常是经过 encodeURIComponent 编码的。在使用这些参数时,你需要对它们进行解码,以恢复原始值。
javascript 复制代码
const urlParams = new URLSearchParams(window.location.search);
const encodedName = urlParams.get('name'); // 获取经过编码的参数值
const decodedName = decodeURIComponent(encodedName); // 解码参数值
console.log(decodedName);  // 输出:John Doe & Jane

这里 decodeURIComponent 会将 John%20Doe%20%26%20Jane 解码为 John Doe & Jane

3. 避免 URL 解析错误

有时 URL 中的某些字符(例如 #&?)在 URL 中有特殊含义,如果它们出现在参数值中,则会干扰 URL 的解析。使用 encodeURIComponent 可以避免这些字符引起的解析错误。

示例:
javascript 复制代码
const hash = "value#hashtag";
const encodedHash = encodeURIComponent(hash); // 编码处理
const url = `https://example.com?hash=${encodedHash}`;
console.log(url);  // 输出:https://example.com?hash=value%23hashtag

如果不进行编码,# 会被认为是 URL 的锚点标识符,导致 URL 的解析错误。

4. 防止跨站脚本攻击 (XSS)

encodeURIComponent 还可以帮助防止某些类型的跨站脚本攻击(XSS)。如果你从用户输入中获取数据并将其作为 URL 参数传递,在编码这些数据时可以防止恶意的 JavaScript 被执行。

重点:

  • # 确实会导致 URL 中后面的内容被视为锚点,无法作为查询参数解析。
  • 如果你需要传递包含 # 的数据,应该使用 encodeURIComponent 对其进行编码,这样它就能正确地作为查询字符串的一部分被传递并解析。
  • 尤其是在跳转其他工程是需要进行编码解码,返回时如果url中的参数没有编码可能会报错,导致返回上个页面不成功。出现类似下面的报错
  • Unexpected Application Error! Unterminated string in JSON at position 323 (line 1 column 324)
  • 还存在一个解码中存在的问题Unexpected Application Error! URI malformed,这时候可能在编码的时候存在问题,没有完全编码。可以加下判断,解码失败的话直接通过JSON.parse()解析试试
相关推荐
IT_陈寒13 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用15 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥31 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel9 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip9 小时前
JavaScript事件流
前端·javascript