Question

从旧帖子Should I use encodeURI or encodeURIComponent for encoding URLs?开始，它说：

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

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

e.g。

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

or


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

Answer 1

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

<强> encodeURIComponent方法

使用的是什么？假设您要对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

请注意两个网址如何都有一个查询字符串参数foo，但这是正常的，因为编码后的网址已编码。整个foo参数是

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

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

<强>是encodeURI

现在，如果您想对已经存在的完整网址进行编码，请使用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在您的第一篇文章中所评论的那样，此页面会显示Differences between encodeURI, encodeURIComponent, and escape: lower ASCII characters。您特别注意到encodeURIComponent对encodeURI没有的以下字符进行编码：

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

您的问题

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

<强>错误

"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网址有两个查询字符串参数：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网址只包含一个查询字符串参数：next

Answer 2

如果U需要将URI编码为查询字符串参数，那么你一定要选择（2）

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

以google翻译为例，每当您在翻译部分中键入地址时，地址都会转换为URI组件，然后传递给Google服务器

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

Answer 3

您链接的问题中的第二个答案已经非常明确地说： “如果你要编码一个字符串来放入一个URL组件（一个查询字符串参数），你应该调用encodeURIComponent。

如果您要对现有网址进行编码，请调用encodeURI。“

所以在你的例子中，encodeURIComponent是正确的。

如果我正在编码将用作查询字符串参数的URI：encodeURI或encodeURIComponent

3 个答案: