在编写前端代码时，我们常常需要将一些特殊字符编码成 URL，以避免出现不可预料的错误。而 JavaScript 中有两个函数可以用来进行 URL 编码：encodeURI 和 encodeURIComponent。那么，究竟应该使用哪一个呢？这篇文章将会为您详细地解答这个问题。
encodeURI 和 encodeURIComponent 的区别
encodeURI 和 encodeURIComponent 都是 JavaScript 内置的函数，用于将字符串进行 URL 编码。它们的区别在于，encodeURI 只会将 URI 中的特殊字符进行编码，而 encodeURIComponent 则会将除了字母、数字和 - _ . ! ~ * ' ( ) 之外的所有字符都进行编码。
下面是一个简单的示例：
const uri = 'https://www.example.com/search?q=javascript&lang=en'; console.log(encodeURI(uri)); // 输出：https://www.example.com/search?q=javascript&lang=en console.log(encodeURIComponent(uri)); // 输出：https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3Djavascript%26lang%3Den
可以看到，encodeURI 只编码了 URI 中的特殊字符 : 和 /，而 encodeURIComponent 则对整个字符串进行了编码。
应该使用哪一个？
通常情况下，我们应该优先考虑使用 encodeURIComponent。因为在实际的开发中，我们需要将整个 URL 进行编码，以确保所有的特殊字符都能正确地被服务器接受。而 encodeURI 只对某些特殊字符进行编码，可能会导致一些潜在的问题。
当然，也有一些情况下可以使用 encodeURI。比如，如果我们需要编码的字符串中包含已经编码过的部分，那么此时使用 encodeURIComponent 就会出现问题。例如：
const uri = 'https://www.example.com/search?q=javascript%20tutorial'; console.log(encodeURI(uri)); // 输出：https://www.example.com/search?q=javascript%20tutorial console.log(encodeURIComponent(uri)); // 输出：https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3Djavascript%2520tutorial
可以看到，使用 encodeURIComponent 对已经编码过的字符串再次进行编码时，会将 % 也编码了一遍，导致结果不正确。
总结
在实际的开发中，我们应该优先考虑使用 encodeURIComponent，因为它能够正确地编码整个 URL，避免出现不可预料的错误。而 encodeURI 则只适用于特定的情况，需要根据具体的需求进行选择。
希望本文能够帮助您更好地理解 encodeURI 和 encodeURIComponent 函数的区别和应用场景，从而在实际的开发中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9606
