详谈js对URL进行编码和解码(三种方式的区别)

在JavaScript中，我们经常需要对URL进行编码和解码。比如在发送ajax请求时，如果URL中含有特殊字符，需要先对它进行编码后再发送请求；在处理查询字符串时，需要将编码后的字符串解码成可读的字符串。

JavaScript提供了三种方法来对URL进行编码和解码，包括encodeURI/decodeURI、encodeURIComponent/decodeURIComponent和escape/unescape。它们的使用场景和区别如下：

encodeURI/decodeURI

encodeURI和decodeURI分别用于对整个URL字符串进行编码和解码。它们对于URL中除了空格、字母、数字等字符以外的其他特殊字符不编码。

const url = 'http://example.com/path with spaces';
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // 'http://example.com/path%20with%20spaces'

const decodedUrl = decodeURI(encodedUrl);
console.log(decodedUrl); // 'http://example.com/path with spaces'

在上面这个示例中，我们可以看到，encodeURI将URL中的空格编码成了%20，而decodeURI将其解码成了可读的空格。

encodeURIComponent/decodeURIComponent

encodeURIComponent和decodeURIComponent用于对URL中的参数部分进行编码和解码。它们对于URL中所有非字母、数字和- _ . ! ~ * ' ( )这些允许的字符也进行编码。

const url = 'http://example.com/path?foo=hello world';
const encodedUrl = url.replace('hello world', encodeURIComponent('hello world'));
console.log(encodedUrl); // 'http://example.com/path?foo=hello%20world'

const decodedUrl = decodeURIComponent(encodedUrl);
console.log(decodedUrl); // 'http://example.com/path?foo=hello world'

在上面这个示例中，我们使用encodeURIComponent将参数值hello world编码成了hello%20world，然后再将其拼接回URL中。最后使用decodeURIComponent将编码后的URL进行解码，得到原始的URL。

escape/unescape

escape和unescape用于将字符串进行编码和解码。它们类似于encodeURIComponent和decodeURIComponent，但是对于某些字符的编码方式可能不同。

const url = 'http://example.com/path?foo=hello world';
const encodedUrl = escape(url);
console.log(encodedUrl); // 'http%3A%2F%2Fexample.com%2Fpath%3Ffoo%3Dhello%20world'

const decodedUrl = unescape(encodedUrl);
console.log(decodedUrl); // 'http://example.com/path?foo=hello world'

在上面这个示例中，我们使用escape对URL进行编码，并使用unescape对其进行解码，最终得到原始的URL。

综上所述，三种URL编码解码的方法各有其适用的场景和特点。在实际开发中，需要根据不同的需求选择不同的方法。