我应该使用 encodeURI 还是 encodeURIComponent 来编码 URL？

Question

应该使用这两种方法中的哪一种来编码 URL？

Answer 1

这取决于您实际想要做什么。

encodeURI 假设输入是一个完整的 URI，其中可能包含一些需要编码的字符。

encodeURIComponent 将对具有特殊含义的所有内容进行编码，因此您可以将其用于 URI 的组件，例如

var world = "A string with symbols & characters that have special meaning?";
var uri = 'http://example.com/foo?hello=' + encodeURIComponent(world);

Answer 2

如果您要对字符串进行编码以放入 URL 组件（查询字符串参数），则应调用encodeURIComponent 。

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

Answer 3

xkr.us有一个很好的讨论，有例子。 引用他们的总结：

escape() 方法不对 + 字符进行编码，该字符在服务器端被解释为空格，以及由字段中带有空格的表单生成。 由于此缺点以及此函数无法正确处理非 ASCII 字符的事实，您应尽可能避免使用 escape()。 最好的选择通常是 encodeURIComponent()。

escape() 不会编码：@*/+

使用 encodeURI() 方法比 escape() 方法更专业，因为它为 URI 编码，而不是作为 URL 一部分的查询字符串。 当您需要对字符串进行编码以用于任何使用 URI 并需要某些字符保持未编码状态的资源时，请使用此方法。 请注意，此方法不对 ' 字符进行编码，因为它是 URI 中的有效字符。

encodeURI() 不会编码：~!@#$&*()=:/,;?+'

最后，在对 URI 的单个组件进行编码时，应在大多数情况下使用 encodeURIComponent() 方法。 此方法将对某些通常被识别为 URI 的特殊字符的字符进行编码，以便可以包含许多组件。 请注意，此方法不对 ' 字符进行编码，因为它是 URI 中的有效字符。

encodeURIComponent() 不会编码：~!*()'

Answer 4

这是一个总结。

1. escape() 不会对 @ * _ + - 进行编码。 /

   不要使用它。

2. encodeURI() 不会对 AZ az 0-9 进行编码； , / ? ：@ & = + $ - _ 。 ！ ~ * ' ( ) #

   当您的输入是完整的 URL 时使用它，例如“ https://searchexample.com/search?q=wiki ”

3. encodeURIComponent() 不会对 AZ az 0-9 - _ 进行编码。 ！ ~ * ' ( ) 当您的输入是完整 URL 的一部分时使用它，例如const queryStr = encodeURIComponent(someString)

Answer 5

encodeURI和encodeURIComponent用于不同的目的。
一些区别是

1. encodeURI用于编码完整的 URL，而encodeURIComponent用于编码 URI 组件，例如查询字符串。

2. 有11 个字符不是由 encodeURI 编码的，而是由 encodeURIComponent 编码的。 列表：

特点	编码URI	编码URI组件
#	#	%23
$	$	%24
&	&	%26
+	+	%2B
,	,	%2C
/	/	%2F
：	：	%3A
;	;	%3B
=	=	%3D
?	?	%3F
@	@	%40

笔记：
encodeURIComponent不编码 -_.!~*'()。 如果要对这些字符进行编码，则必须将它们替换为相应的 UTF-8 字符序列

如果您想了解有关 encodeURI 和 encodeURIComponent 的更多信息，请查看参考链接。 参考链接

Answer 6

encodeURIComponent() ：假定其参数是 URI 的一部分（例如协议、主机名、路径或查询字符串）。 因此，它会转义用于分隔 URI 部分的标点字符。

encodeURI(): 用于对现有 url 进行编码

Answer 7

encodeURI和encodeURIComponent区别：

encodeURIComponent(value)主要用于对 queryString 参数值进行编码，并对value每个适用字符进行编码。 encodeURI忽略协议前缀 ( http:// ) 和域名。

---

在非常，非常罕见的情况下，如果你想实现手动编码来对其他字符（尽管他们并不需要典型案件要被编码的那样），如： ! * ! * ，那么你可以使用：

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

（ 来源）

Answer 8

其他答案描述了目的。 以下是每个函数实际转换的字符：

control = '\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0A\x0B\x0C\x0D\x0E\x0F'
        + '\x10\x11\x12\x13\x14\X15\x16\x17\x18\x19\x1A\x1B\x1C\x1D\x1E\x1F'
                                                                    + '\x7F'
encodeURI         (control + ' "%<>[\\]^`{|}'                             )
encodeURIComponent(control + ' "%<>[\\]^`{|}' + '#$&,:;=?' + '+/@'        )
escape            (control + ' "%<>[\\]^`{|}' + '#$&,:;=?' +       "!'()~")

以上所有字符都转换为百分比十六进制代码。 空格到%20 ，百分比到%25等等。下面的字符通过不变。

以下是函数不会转换的字符：

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

encodeURI         (pass_thru + '#$&,:;=?' + '+/@' + "!'()~")
encodeURIComponent(pass_thru +                      "!'()~")
escape            (pass_thru +              '+/@'          )

Answer 9

作为一般规则，使用encodeURIComponent 。 不要害怕长名称，认为它的用途更具体，对我来说这是更常用的方法。 也不要被吸引使用 encodeURI，因为您测试了它并且它似乎正确编码，这可能不是您打算使用的，即使您在名字字段中使用“Fred”的简单测试有效，您也会发现稍后当您使用更高级的文本（例如添加与号或主题标签）时，它将失败。 您可以查看其他答案以了解原因。