开发者工具 · URL 编码器和解码器
URL 构造函数为您编码的内容：浏览器的百分比编码集
· 工作原理
url 编码 JavaScript 什么工作组 网络 API
URL API 会默默地对某些字符进行百分比编码，而不会影响其他字符，具体取决于它们位于 URL 的哪个部分。这篇文章解释了 WHATWG 编码集以及如何预测输出。
成为 %20 的空间和 |留下来了 - new URL() 部分编码路径的具体情况
当 new URL("https://example.com/hello world") 运行时，空间默默地变成 %20 。但是 new URL("https://example.com/hello|world") 保持管道不变。这种差异不是随机的。WHATWG URL 标准定义了单独的字符集来为每个 URL 组件进行编码：路径、查询、片段和用户信息都有自己的规则。了解这些集意味着预测构造函数将做什么。
该空间需要百分比编码，因为它在 HTTP 上不安全并且会破坏可读性。管道是不同的：不是分割结构的保留字符，因此浏览器不会管它。安全性和可读性之间的界限是由 WHATWG 划定的，而不是猜测。测试“hello world”显示编码；测试“hello|world”揭示了每个 URL 部分的边界。
一个 URL，多个编码集 — 路径、查询、片段和用户信息都有自己的要转义的字符列表
一个URL包含多个区域，每个区域都有自己的编码规则。路径遵循一组，查询另一组，分段第三组，用户信息第四组。路径和查询中的空格变为 %20。等号保留在查询中，用于分隔键和值，但encodeURIComponent 将其转换为 %3D。 URL 构造函数了解其上下文并为每个部分应用正确的规则。
编码集精确且小。 Path有自己的字符列表；查询有一个相似但不同的列表。这反映了哪些字符具有结构意义。正斜杠分割路径段，因此encodeURIComponent 将其编码为 %2F。在片段中，可以存在正斜杠而不破坏任何内容。了解 WHATWG 规则意味着无需运行代码即可预测输出。
为什么百分比编码是单向的：保持编码的内容保持这种方式
URL 构造函数执行单向规范化。将“%20”传递给新 URL，它会生成未更改的 %20。构造函数将其识别为已编码并保留它。这就是双重编码很重要的原因：编码一次，通过构造函数，并且编码保持不变。构造函数不会解码、重新解释和重新编码；它向前读。
这一单向属性会影响将 URL.href 视为规范的应用程序。如果将用户输入与路径连接起来，输入将被标准化但不会被解码。像“my+file”这样的值保持原样，或者在某些情况下变成“my%2Bfile”。如果从表单数据中读取加号，则使用decodeURIComponent 的后续代码可能会将加号读取为空格。构造函数标准化一次；之后，你的价值就固定了。
工作示例：通过 new URL() 传递相同的混乱字符串并读取 href、pathname 和 searchParams — 三个不同的视图
将“hello world&foo=bar|test#anchor”放入具有不同组件的新 URL 中。该空间到处都变成%20。路径中的＆符号保留（那里没有结构意义），但在查询中它也保留（分隔参数，因此规范化会失去“q =”和“foo = bar”之间的边界）。管道和哈希的行为因位置而异。
读取 href、pathname 和 searchParams 显示三个不同的视图。 pathname 显示没有方案、主机或查询的编码路径。 searchParams 给出解码后的参数，因此表单数据中的“hello+world”变成了空格。搜索属性保留文字字符串。 href 显示完整的规范化 URL。这些共存于一个对象上；使用哪个取决于您的下一步。
URLSearchParams 和表单编码规则 — 为什么它为空格生成 +，而路径名生成 %20
URLSearchParams 应用表单编码：空格变为加号，而不是 %20。 new URLSearchParams({q: "hello world"}) 生成“q=hello+world”，而不是“q=hello%20world”。这是历史应用/x-www-form-urlencoded规则。但是，如果您将此字符串作为原始查询传递给新 URL，则加号将保持加号；只有 URLSearchParams 将其解码为空格。构造函数忠实于它所看到的。
这个加号差异会导致常见错误。地址栏中的 URL 使用 %20 作为空格。表单数据使用加号。如果使用decodeURIComponent（字面意思是加号）而不是URLSearchParams.get 进行解码，空格将变成加号字符。 URL 编码器和解码器同时显示：粘贴“hello+world”并比较组件和表单模式以查看空格出现的位置。
与encodeURI 比较——两者一致的地方和分歧的地方
URL 构造函数和encodeURIComponent 是不同的工具。 encodeURIComponent 对除了未保留的字母、数字和 - _ 之外的几乎所有内容进行编码。 ！ 〜*'（）。它假设没有上下文。 URL 构造函数解析实际的 URL 并为每个组件应用 WHATWG 规则。 encodeURIComponent 将“hello/world"”转换为“hello%2Fworld”；新 URL 将斜杠视为路径分隔符。相同的输入，不同的输出。
通过连接片段构建 URL 时使用encodeURIComponent。使用 URLSearchParams 或 URL 构造函数来获取完整或部分 URL。不要对整个 URL 使用encodeURIComponent；你会破坏这个计划。将结果与意图进行比较。浏览器强制执行 URL 结构意见，而新的 URL 则实现它们。 URL 编码器和解码器并排显示两个视图。
这不包括什么 - 主机解析、IDNA 以及特殊与非特殊方案
WHATWG URL 标准是事实来源，但阅读它需要耐心。编码集在算法片段中定义，而不是普通列表。在实践中，理解原理比记住集合更重要。路径允许更多字符（斜杠是结构性的）；查询有自己的规则；片段的限制最少（在客户端处理，从不发送到服务器）。每个组件都有自己的规则；知道这一点可以告诉您去哪里寻找。
规范化和验证是不同的边界。构造函数规范化：清理百分比编码、应用组件规则、给出规范形式。它不验证：抛出无效字符，但接受空主机。构造函数对格式严格，但对解释宽松。要了解确切的规范合规性，请阅读 WHATWG 的百分比编码字节部分。对于日常构建，请使用 URLSearchParams、URL API 和真实示例。
要点：解析器有意见——URL 编码器和解码器如何向您显示值或地址的简单百分比编码，以便您可以将其与浏览器生成的内容进行比较
此处不支持的 WHATWG 功能包括使用 IDNA 转换（国际域名到 ASCII）的主机解析以及特殊与非特殊方案处理。文件：URL 使用双斜杠权限；数据：URL 没有。构造函数强制执行这些规则。转换主机名和确定特殊状态属于规范读取，而不是百分比编码。当跨不同方案构建 URL 时，这一点很重要。
通过将浏览器解释与预期进行比较来测试您的 URL 构造。使用新的 URL 构建，读取重要的属性：完整表单的 href、路径的路径名、原始查询的搜索、解码的 searchParams。如果输出让您感到惊讶，请粘贴到 URL 编码器和解码器中并逐步进行转换。该工具显示标准化输出和原始编码，揭示差异。了解 WHATWG 集意味着了解浏览器选择以及如何使用它们。