js传参url地址栏出现%20怎么回事

在 JavaScript 中，当你看到 URL 地址栏中出现 %20 时，这代表了空格字符被 URL 编码后的结果。URL 编码（或称为百分号编码）用于将特殊字符转换为适合在 URL 中传输的格式。

URL 编码基础

1. 空格编码：

   • 在 URL 中，空格字符（ ）被编码为 %20。例如，Hello World 在 URL 中会被编码为 Hello%20World。

2. 其他字符编码：

   • 类似地，其他特殊字符也会被编码。例如，! 会被编码为 %21，& 被编码为 %26，/ 被编码为 %2F 等。

URL 编码的原因

1. 传输兼容性：

   • URL 只能包含特定的字符集。为了确保 URL 可以在网络上安全传输，任何不在此字符集中的字符都需要被编码成 % 后跟两个十六进制数字的形式。

2. 避免解析问题：

   • 编码特殊字符可以避免解析 URL 时出现歧义。例如，空格字符如果不被编码，可能会导致服务器解析 URL 时出现错误。

JavaScript 中的 URL 编码

在 JavaScript 中，可以使用 encodeURIComponent() 和 encodeURI() 函数来对 URL 参数进行编码：

• encodeURIComponent()：对 URI 组件进行编码（如参数值），会对所有非字母数字字符进行编码，包括空格。
• encodeURI()：对整个 URI 进行编码，但保留一些对 URI 有特殊意义的字符（如 :、/ 和 ?）。

示例代码

javascript
复制代码
// 原始数据
let spaceString = "Hello World";

// 编码参数
let encodedString = encodeURIComponent(spaceString);
console.log(encodedString); // 输出: Hello%20World

// 解码参数
let decodedString = decodeURIComponent(encodedString);
console.log(decodedString); // 输出: Hello World

使用场景

1. 查询参数：

   • 当在 URL 中传递参数时（如 http://example.com?name=John Doe），空格会被编码为 %20，使得 URL 格式正确。

2. URL 生成：

   • 在动态生成 URL 时，确保参数和路径部分被正确编码，以避免解析错误。

处理 URL 编码

如果你的 URL 中不希望出现 %20 或其他编码字符，可能需要调整编码逻辑。确保在 URL 组件中使用 encodeURIComponent() 进行编码，而在将完整 URL 传递给浏览器时使用 decodeURIComponent() 进行解码，以处理这些编码字符。

总结

在 JavaScript 中，URL 地址栏中的 %20 是空格字符的 URL 编码形式。使用 encodeURIComponent() 和 encodeURI() 函数可以对 URL 进行编码和解码，以确保 URL 在网络上传输时不会出现解析问题。 %20 是标准的 URL 编码表示方式，用于保证 URL 的正确性和兼容性。

关键字

JavaScript，URL 编码，空格编码，%20，encodeURIComponent()，encodeURI()，URL 解析，编码和解码