深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例

在JavaScript中，编码与解码字符串是非常常见的操作。对于URL、HTML等特殊字符的处理，我们通常会使用escape()、encodeURI()、encodeURIComponent()这几个函数，它们虽然都是编码函数，但是处理的范围和方式各不相同。

escape()

escape()函数可以编码字符串中的非ASCII字符，例如中文、日文、朝鲜文等，它使用16进制序列表示每个字符，并在前面加上%作为前缀；对于ASCII字符，它不会进行编码。需要注意的是，由于escape()函数使用的是16进制序列，对于单层URL编码，它并不适用。此外，该函数已经被废弃，推荐使用encodeURIComponent()替代。

例子1

escape('hello, 世界')
// 返回 "hello%2C%20%E4%B8%96%E7%95%8C"

encodeURI()

encodeURI()函数主要用于编码URL中的特殊字符，例如空格、&、=等。它可以对除ASCII字母和数字（A-Za-z0-9）以及特殊字符$-_.+!*'()以外的字符进行编码，使用%转义字符，将非英文字母与数字的字符编码为URI格式。需要注意的是，它并不会对完整的URL进行编码，例如：http://www.example.com/dir1/#hash1 和 http://www.example.com/dir2/#hash2 是两个不同的URL，而encodeURI()只会编码其中的特殊字符，例如：http://www.example.com/dir1/#hash1 会被编码为 http://www.example.com/dir1/#hash1 ，而不会变成 http%3A%2F%2Fwww.example.com%2Fdir1%2F%23hash1。

例子2

encodeURI('http://www.example.com/q?name=石子峻&age=18')
// 返回 "http://www.example.com/q?name=%E7%9F%B3%E5%AD%90%E5%B3%8C&age=18"

encodeURIComponent()

encodeURIComponent()函数相对于encodeURI()更为严格，它除了对ASCII字母和数字不进行编码外，会对其他所有字符进行编码（只有RFC2396定义中未保留的字符才会被编码），即它会将所有的特殊字符、汉字等都进行编码，并使用%进行替换。因此，在编码过程中应该优先考虑encodeURIComponent()。

例子3

encodeURIComponent('http://www.example.com/q?name=石子峻&age=18')
// 返回 "http%3A%2F%2Fwww.example.com%2Fq%3Fname%3D%E7%9F%B3%E5%AD%90%E5%B3%8C%26age%3D18"

总结

escape()、encodeURI()和encodeURIComponent()都是JavaScript中用于编码字符串的函数。其中，escape()已经被废弃，而encodeURI()主要用于编码URL中的特殊字符，encodeURIComponent()则更为严格，除了对ASCII字母和数字不进行编码，会对其他所有字符进行编码，并使用%进行替换。我们使用这些编码函数可防止出现编码不正确从而导致的各种莫名其妙的错误。需要根据具体的需求来选择使用哪一个函数进行编码。

例子4

比如一个提交表单的时候需要对参数进行编码，可以使用encodeURIComponent()来确保参数的正确性。示例代码如下：

// 假设表单中有两个参数name和age，需要提交到后端
const name = document.querySelector('#name').value // 假设name值为"张三"
const age = document.querySelector('#age').value // 假设age值为18
const url = `http://www.example.com/api?name=${encodeURIComponent(name)}&age=${encodeURIComponent(age)}` // 对name和age进行encodeURIComponent()编码
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err))