encodeURIComponent和decodeURIComponent的使用场景

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

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

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

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

场景：

• 传递包含特殊字符的查询参数： 比如参数值中可能包含空格、&、=、# 或中文字符等，如果不对这些字符进行编码，它们会与 URL 的结构混淆，导致 URL 无法正确解析。

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 字符串进行编码。

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 编码的。在使用这些参数时，你需要对它们进行解码，以恢复原始值。

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 可以避免这些字符引起的解析错误。

示例：

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()解析试试