7

来自旧帖子：我应该使用 encodeURI 还是 encodeURIComponent 来编码 URL？， 它说：

encodeURI assumes that the input is a complete URI that might have some 
characters which need encoding in it.

encodeURIComponent will encode everything with special meaning, so 
you use it for components of URIs such as

如果我需要将URIas 查询字符串参数编码怎么办？

例如

var url = "http://example.com/?next=" + encodeURI(url) 

or


var url = "http://example.com/?next=" + encodeURIComponent(url)
4

3 回答 3

39

如果要对查询字符串进行编码，请使用encodeURIComponent. 原因很简单：在其他几个字符中，它会编码正斜杠和不会编码的 amersand encodeURI。

编码URI组件

什么用途？假设您要对 URL 进行编码并将其传递到查询字符串中，这将使您可以对所有字符进行编码，从而得到如下内容：

encodeURIComponent('http://abc.com/my page.html?name=bob&foo=bar')

得到结果

"http%3A%2F%2Fabc.com%2Fmy%20page.html%3Fname%3Dbob%26foo%3Dbar"

您现在可以像这样安全地将其作为查询字符串传递：

http://mysite.com/foo=http%3A%2F%2Fabc.com%2Fmy%20page.html%3Fname%3Dbob%26foo%3Dbar

请注意两个 URL 如何具有查询字符串参数foo，但这没关系，因为编码的 URL 具有该编码。整个foo参数为

http%3A%2F%2Fabc.com%2Fmy%20page.html%3Fname%3Dbob%26foo%3Dbar

foo=bar与第二个编码的 URL 中的没有冲突。

编码URI

现在，如果您想对已有的完整 URL 进行编码，请使用encodeURI.

encodeURI('http://abc.com/my page.html?name=bob&foo=bar')

会给你

"http://abc.com/my%20page.html?name=bob&foo=bar"

请注意这如何使 URL 保持有效，并且在这种情况下仅对空间进行编码。如果你在上面运行encodeURIComponent，你会得到你在我的第一个例子中看到的一团糟。

编码了哪些字符？

正如 yabol 在您的第一篇文章中评论的那样，此页面向您展示了encodeURI、encodeURIComponent 和 escape: lower ASCII characters 之间的区别。您特别注意到它对以下不encodeURIComponent编码的字符进行了编码：encodeURI

chr     encodeURI(chr)  encodeURIComponent(chr)
 +           +               %2B
 /           /               %2F
 @           @               %40
 #           #               %23
 $           $               %24
 &           &               %26
 ,           ,               %2C
 :           :               %3A
 ;           ;               %3B
 =           =               %3D
 ?           ?               %3F

你的问题

您使用是正确的，encodeURIComponent因为您正在为查询字符串编码 URL。这可以追溯到我的第一个例子。如果您的查询字符串 URL（您正在编码的那个）有一个查询字符串，您希望它成为 的一部分next，而不是您的主 URL 的一部分。

错误的

"http://example.com/?next=" + encodeURI('http://abc.com/my page.html?name=bob&foo=bar')
"http://example.com/?next=http://abc.com/my%20page.html?name=bob&foo=bar"

您的 example.com url 有两个查询字符串参数：next和foo

对

"http://example.com/?next=" + encodeURIComponent('http://abc.com/my page.html?foo=bar')
"http://example.com/?next=http%3A%2F%2Fabc.com%2Fmy%20page.html%3Fname%3Dbob%26foo%3Dbar"

您的 example.com url 仅包含一个查询字符串参数：next

于 2012-09-29T05:31:52.987 回答
3

如果您需要将 编码URI为查询字符串参数，那么您绝对应该使用 (2)

var url = "http://example.com/?next=" + encodeURIComponent(query_url);

以谷歌翻译器为例，每当你在翻译部分输入地址时，地址都会被转换为一个 URI 组件，然后传递给谷歌服务器

如果需要将任何 URL 用作组件，那么encodeURIComponent(String);是您的最佳选择

于 2012-10-05T04:15:17.010 回答
1

您链接的问题中的第二个答案已经很清楚地说明了这一点：“如果您正在编码一个字符串以放入 URL 组件（查询字符串参数），您应该调用 encodeURIComponent.

如果要对现有 URL 进行编码，请调用 encodeURI。”

因此，在您的示例中， encodeURIComponent 是正确的。

于 2012-09-23T18:53:19.643 回答