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

If you want to encode a query string, use encodeURIComponent. The reason is simple: among a few other chars, it'll encode the forward slash and amersand that encodeURI will not.

encodeURIComponent

有什么用?假设您要编码一个URL并将其传递到查询字符串中，这将使您对所有字符进行编码，从而得到如下所示:

What's the use? Say you want to encode a URL and pass it in the query string, this will let you encode all the characters so you get something like this:

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

获得结果

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

您现在可以安全地将其作为查询字符串传递，如下所示:

You can now safely pass that as a query string like so:

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

请注意，两个URL都具有查询字符串参数 foo ，但这没关系，因为已编码的URL已对其进行了编码.整个 foo 参数是

Notice how both URLs have a query string parameter foo but that's OK because the encoded URL has that encoded. The entire foo parameter is

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

第二个经过编码的URL中的 foo = bar 没有冲突.

There is no conflict with the foo=bar in the second, encoded, URL.

encodeURI

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

Now, if you want to encode a complete URL that you have already, use encodeURI.

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

会给你

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

请注意如何使URL保持有效，并且在这种情况下，仅对空格进行编码.如果您要在该代码上运行 encodeURIComponent ，那么您将在我的第一个示例中看到混乱的情况.

Notice how that keeps the URL valid and, in this instance, only encodes the space. If you were to run encodeURIComponent on that, you'd get the mess you see in my first example.

编码了哪些字符?

正如yabol在您的第一篇文章中所评论的那样，此页面向您显示> encodeURI，encodeURIComponent，并转义:较低的ASCII字符.您会特别注意到， encodeURIComponent 对以下字符进行了编码，而 encodeURI 则不对这些字符进行编码:

As yabol commented in your first post, this page shows you the Differences between encodeURI, encodeURIComponent, and escape: lower ASCII characters. You notice specifically that encodeURIComponent encodes the following chars that encodeURI does not:

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

您的问题

使用 encodeURIComponent 是正确的，因为您正在编码查询字符串的URL.这可以回到我的第一个示例.如果您的查询字符串网址(您要编码的网址)包含查询字符串，则您希望该查询字符串成为 next 的一部分，而不是主URL的一部分.

You are correct in using encodeURIComponent because you're encoding a URL for a query string. This goes back to my first example. If your query-string URL (the one you're encoding) has a query string, you want that to be part of next, not part of your main 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网址具有两个查询字符串参数: next 和 foo

Your example.com url has two query string parameters: next and 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

Your example.com url contains only one query string parameter: next