encodeURIComponent 的作用是什么？简单的示例解释

如果您在 JavaScript 中构建了 URL，您可能会遇到encodeURIComponent，以及可能遇到的令人困惑的相似兄弟，encodeURI。使用错误的链接是一种典型的错误，它会以微妙的方式破坏链接。这里通过示例清楚地解释了encodeURIComponent 的作用，以及在两者之间进行选择的简单规则。

它的作用

encodeURIComponent 接受一个字符串，并用其百分比编码的等效字符替换 URL 中不安全的任何字符。空格变为 %20，& 符号变为 %26，等号变为 %3D，问号变为 %3F，依此类推。目的是使一段文本可以安全地作为值、搜索词、参数、重定向目标放入 URL 中，而不会将特殊字符误读为 URL 结构。它对可能导致问题的所有内容进行编码，这正是您想要的单个值。

一个具体的例子

假设您要为查询“cats & dogs”构建一个搜索 URL。如果你只是连接它，你会得到 ...?q=cats & dogs，它会中断，& 符号被读取为参数分隔符，并且空格是非法的。首先通过encodeURIComponent运行该值，“cats & dogs”变成cats%20%26%20dogs，给你...?q=cats%20%26%20dogs，服务器正确地将其读取为单个值“cats & dogs”。编码通过转义原本是结构性的字符来保留数据的含义。

编码URI组件与编码URI

区别在于每个人都留下了什么。 encodeURIComponent 对保留的所有内容进行编码，包括 URL 结构字符，如 / ? & = #，因为它假定您正在对 URL 内部的值进行编码。 encodeURI 故意不对这些结构字符进行编码，因为它假设您正在对整个已构建的 URL 进行编码并希望保持其功能。因此，encodeURI('https://x.com?a=b c') 保持 ://、? 和 = 不变，只修复空格，而encodeURIComponent 会转义所有这些。对片段使用组件，对整个 URL 使用encodeURI。

简单的规则

以下规则可以帮助您摆脱麻烦：如果您要对 URL、搜索词、参数值、路径段、重定向目标中的值进行编码，请使用encodeURIComponent。如果您要对整个 URL 进行编码并希望保留为工作 URL，请使用encodeURI。当您不确定时，您几乎总是需要encodeURIComponent，因为您几乎总是编码一个值，而不是整个URL。正确处理这一点可以防止最常见的 URL 构建错误。

注意双重编码

一个陷阱：永远不要对已经编码的字符串运行encodeURIComponent。如果对一个值进行两次编码，百分号本身也会被编码，%20 会变成 %2520，并且链接会中断。仅对原始、未编码的文本进行编码。如果不确定字符串是否已编码，请先对其进行解码，然后再对其进行一次编码。这种双重编码错误是您有时在损坏的 URL 中看到的神秘 %2520 的根源。