如前所述，要对URL进行编码，您有两个函数：

encodeURI()

and

encodeURIComponent()

两者都存在的原因是，第一种方法保留了URL，但有可能留下太多未被屏蔽的内容，而第二种方法对所有需要的内容进行编码。

使用第一个，您可以将新转义的URL复制到地址栏中（例如），这样就可以了。然而，未转义的‘&’会干扰字段分隔符，‘=’会干扰域名和值，‘+’看起来像空格。但对于简单的数据，当您希望保留要转义的内容的URL性质时，这是有效的。

第二个是您需要做的一切，以确保字符串中没有任何内容干扰URL。它保留了各种不重要的字符，使URL尽可能保持可读性而不受干扰。以这种方式编码的URL将不再作为URL工作，而不会取消其标题。

因此，如果您可以花点时间，那么在添加名称/值对之前，您总是希望使用encodeURIComponent（）对名称和值进行编码，然后再将其添加到查询字符串中。

我很难找到使用encodeURI（）的理由——我将把这留给更聪明的人。

最好的答案是对查询字符串中的值使用encodeURIComponent（而不是其他）。

然而，我发现许多API都想用“+”替换“”，所以我不得不使用以下方法：

const value = encodeURIComponent(value).replace('%20','+');
const url = 'http://example.com?lang=en&key=' + value

escape在不同浏览器中的实现方式不同，encodeURI不编码许多字符（如#和甚至/）——它可以在完整的URI/URL上使用，而不会破坏它——这并不是非常有用或安全的。

正如@Jochem在下面指出的，您可能希望在（每个）文件夹名称上使用encodeURIComponent（），但无论出于什么原因，这些API似乎不希望在文件夹名称中使用+，所以普通的encodeURIComponents非常有用。

例子：

const escapedValue = encodeURIComponent(value).replace('%20','+');
const escapedFolder = encodeURIComponent('My Folder'); // no replace
const url = `http://example.com/${escapedFolder}/?myKey=${escapedValue}`;

为了防止双重编码，最好在编码之前解码URL（例如，如果您处理的是用户输入的URL，可能已经编码）。

假设我们有abc%20xyz 123作为输入（一个空格已编码）：

encodeURI("abc%20xyz 123")            //   Wrong: "abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")) // Correct: "abc%20xyz%20123"

您有三个选项：

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

但在您的情况下，如果要将URL传递到其他页面的GET参数中，则应该使用escape或encodeURIComponent，而不是encodeURI。

有关详细讨论，请参阅堆栈溢出问题最佳实践：转义或encodeURI/encodeURIComponent。

我建议使用qs-npm包：

qs.stringify({a:"1=2", b:"Test 1"}); // gets a=1%3D2&b=Test+1

它更容易与JavaScript对象一起使用，并且为所有参数提供了正确的URL编码。

如果您使用jQuery，我会使用$.param方法。它对一个对象进行URL编码，将字段映射到值，这比对每个值调用转义方法更容易读取。

$.param({a:"1=2", b:"Test 1"}) // Gets a=1%3D2&b=Test+1

坚持使用encodeURIComponent（）。函数encodeURI（）不需要对URL中具有语义重要性的许多字符进行编码（例如“#”、“？”和“&”）。escape（）已被弃用，并且不必对“+”字符进行编码，因为这些字符将在服务器上被解释为已编码的空格（正如其他人在这里指出的，不正确地对非ASCII字符进行URL编码）。

其他地方对encodeURI（）和encodeURIComponent（）之间的区别有很好的解释。如果您希望对某个内容进行编码，以便它可以安全地作为URI的一个组件（例如作为查询字符串参数）包含，则需要使用encodeURIComponent（）。