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: "[email protected]"
};
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()解析试试
相关推荐
喝拿铁写前端13 分钟前
智能系统的冰山结构
前端
无奈何杨1 小时前
扣子coze的AI工作流搭建技术,开源项目FlowGram流程搭建引擎
前端
ElasticPDF-新国产PDF编辑器1 小时前
Angular 项目 PDF 批注插件库在线版 API 示例教程
前端·pdf·angular.js
6武71 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
jakeswang2 小时前
查询条件与查询数据的ajax拼装
前端·ajax
samuel9182 小时前
axios取消重复请求
前端·javascript·vue.js
三天不学习2 小时前
JiebaAnalyzer 分词模式详解【搜索引擎系列教程】
前端·搜索引擎·jiebaanalyzer
滿2 小时前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧2 小时前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel