在前端开发中，常常会遇到需要对 URL 进行编码的需求。JavaScript 提供了三种不同的编码方式，分别是 escape、encodeURI 和 encodeURIComponent。虽然它们都能对字符串进行编码，但是它们之间有一些区别和适用场景。
escape
escape 函数可以对字符串进行 URL 编码，其编码规则是将非 ASCII 字符转换成 %xx 的形式，其中 xx 代表字符对应的 ASCII 编码值的十六进制表示。同时，一些特殊字符如空格、加号、减号等也会被编码。例如：
escape("你好！hello world+-*./") // 输出 "%u4F60%u597D%21hello%20world%2B-*.%2F"
可以看到，中文字符被转换成了 %uxxxx 的形式，而英文字符则被转换成了普通的 %xx 形式。由于该函数趋向于过度编码，因此在实际使用中并不常见。
encodeURI
encodeURI 函数可以对整个 URL 进行编码，包括协议、域名、路径和查询参数等。其编码规则是将非 ASCII 字符和某些特殊字符转换成 %xx 的形式，其中 xx 依然代表字符对应的 ASCII 编码值的十六进制表示。但是，encodeURI 函数会忽略一些特殊字符，如冒号、斜杠、问号和井号等。例如：
encodeURI("https://www.example.com/path/to?query=你好！hello world+-*./#fragment") // 输出 "https://www.example.com/path/to?query=%E4%BD%A0%E5%A5%BD%EF%BC%81hello%20world+-*./#fragment"
可以看到，中文字符和空格等被转换成了 %xx 的形式，而其他特殊字符则保留不变。
encodeURIComponent
encodeURIComponent 函数通常用于对查询参数进行编码。其编码规则与 encodeURI 相似，但是会对更多的特殊字符进行编码，比如斜杠、问号和井号等。例如：
encodeURIComponent("你好！hello world+-*./") // 输出 "%E4%BD%A0%E5%A5%BD%EF%BC%81hello%20world-*.%2F"
可以看到，中文字符和空格等被转换成了 %xx 的形式，而其他特殊字符也被编码了。
总结
三种 URL 编码函数的使用场景如下：
- escape：在实际使用中较少见，不推荐使用。
- encodeURI：用于对整个 URL 进行编码，但是不编码一些特殊字符。
- encodeURIComponent：用于对查询参数进行编码，同时编码更多的特殊字符。
在实际开发中，我们应该根据具体的需求选择合适的编码函数。如果需要对整个 URL 进行编码，可以使用 encodeURI；如果只需要对查询参数进行编码，则应该使用 encodeURIComponent。如果不确定如何选择，可以使用 encodeURIComponent 作为默认选项。
示例代码：
-- -------------------- ---- ------- ----- --- - ----------------------------------------------- -------------------- -- -- ------ -- ------------------------ -- -- --------- -- --------------------------- -- -- ------------------ -- ------------------------------------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31517
