JS字符编码函数区别分析

在 JavaScript 中，有几个字符编码相关的函数。本篇文章将详细分析它们的区别。

escape()

escape() 函数将非 ASCII 字符和一些 ASCII 字符（如空格、句点、斜杠等）转换为一种特殊的编码格式，比如 %20 代表空格。常用于将一些特殊字符转换为 URL 字符串。

const str = 'Hello, world! 你好世界！';
console.log(escape(str)); // Hello%2C%20world%21%20%u4F60%u597D%u4E16%u754C%EF%BC%81

这里的 %2C 等编码都是按照 URL 编码规范进行编码的。其中 %20 是空格的 URL 编码表示方式。

escape() 主要存在以下两个问题：

1. 不支持 Unicode 编码
2. 与 URI 规范不一致

在实际开发中，为了避免上述问题，应该尽量使用 encodeURI() 和 encodeURIComponent() 代替 escape() 函数。

encodeURI()

encodeURI() 函数用于将整个 url 进行编码，对应的 ASCII 字符會转换为 %xy 的形式。

const url = 'https://www.baidu.com/s?wd=Node.js';
console.log(encodeURI(url)); // https://www.baidu.com/s?wd=Node.js

可以发现，encodeURI() 函数对于空格并不会进行编码。

encodeURIComponent()

encodeURIComponent() 函数用于对 URL 中的参数进行编码。

const url = 'https://www.baidu.com/s?wd=Node.js';
console.log(url + '&q=Hello, world! 你好世界！'); 
// https://www.baidu.com/s?wd=Node.js&q=Hello, world! 你好世界！

console.log(url + '&q=' + encodeURIComponent('Hello, world! 你好世界！')); 
// https://www.baidu.com/s?wd=Node.js&q=Hello%2C%20world%21%20%u4F60%u597D%u4E16%u754C%EF%BC%81

以上代码中，第一次拼接 url 字符串时，直接将带有中文以及空格的字符串拼接在 url 后面，这样会引起 URL 的错误，可能会导致程序出现异常。而第二次拼接 url 字符串时，经过 encodeURIComponent() 函数编码后，可以正常请求。

总结

• escape() 函数不支持 Unicode 编码，且与 URI 规范不一致，应使用 encodeURI() 和 encodeURIComponent() 代替。
• encodeURI() 函数将 URL 进行编码，并对一些 ASCII 字符不编码。
• encodeURIComponent() 函数用于对 URL 参数进行编码。