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()解析试试
相关推荐
超级大只老咪3 分钟前
字段行居中(HTML基础语法)
前端·css·html
IT_陈寒16 分钟前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只33 分钟前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience37 分钟前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹38 分钟前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo40 分钟前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse40 分钟前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye1 小时前
前端架构师,是架构什么
前端·架构
全马必破三1 小时前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库1 小时前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库