escape 和 encodeURI 和 encodeURIComponent 区别？

在日常开发中，我们经常会用到  escape 和 encodeURI 和 encodeURIComponent   这三个方法对 url 或某些字符串进行转义，那这三个方法有什么区别呢？

escape

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/escape

反转义方法：unescape

官方说明 escape 已弃用: 不再推荐使用该特性。建议使用后两者

escape 生成新的由十六进制转义序列替换的字符串

escape 函数是全局对象的属性。特色字符如：@*_+-./ 被排除在外。

字符的 16 进制格式值，当该值小于等于 0xFF 时，用一个 2 位转义序列：%xx 表示。大于的话则使用 4 位序列：%uxxxx 表示。

escape("abc123");     // "abc123"
escape("äöü");        // "%E4%F6%FC"
escape("ć");          // "%u0107"

// special characters
escape("@*_+-./");    // "@*_+-./"

escape("https://www.test.com/s/1Txqs9Syi75OfeR5ly03rXw?a=12312312312sfsafa")
// 'https%3A//www.test.com/s/1Txqs9Syi75OfeR5ly03rXw%3Fa%3D12312312312sfsafa'

encodeURI

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

反转义方法：decodeURI

encodeURI 会替换所有的字符，但不包括以下字符，即使它们具有适当的 UTF-8 转义序列：

类型	包含
保留字符	; , / ? : @ & = + $
非转义的字符	字母 数字 - _ . ! ~ * ' ( )
数字符号	#

encodeURI 自身无法产生能适用于 HTTP GET 或 POST 请求的 URI，例如对于 XMLHTTPRequests，因为 "&", "+", 和 "=" 不会被编码，然而在 GET 和 POST 请求中它们是特殊字符。然而encodeURIComponent这个方法会对这些字符编码。

encodeURI("abc123");     // "abc123"
encodeURI("äöü");        // '%C3%A4%C3%B6%C3%BC'
encodeURI("ć");          // '%C4%87'

// special characters
encodeURI("@*_+-./");    // "@*_+-./"

encodeURI("https://www.test.com/s/1Txqs9Syi75OfeR5ly03rXw?a=12312312312sfsafa")
// https://www.test.com/s/1Txqs9Syi75OfeR5ly03rXw?a=12312312312sfsafa'

encodeURIComponent

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

反转义方法：decodeURIComponent

与 encodeURI() 相比，此函数会编码更多的字符，包括 URI 语法的一部分。【推荐使用】

encodeURIComponent 转义除了如下所示外的所有字符：

// 不转义的字符：
// A-Z a-z 0-9 - _ . ! ~ * ' ( )

encodeURIComponent("abc123");     // "abc123"
encodeURIComponent("äöü");        // '%C3%A4%C3%B6%C3%BC'
encodeURIComponent("ć");          // '%C4%87'

// special characters
encodeURIComponent("@*_+-./");    // '%40*_%2B-.%2F'

encodeURIComponent("https://www.test.com/s/1Txqs9Syi75OfeR5ly03rXw?a=12312312312sfsafa")
// 'https%3A%2F%2Fwww.test.com%2Fs%2F1Txqs9Syi75OfeR5ly03rXw%3Fa%3D12312312312sfsafa'

注意，编码和解码都要使用成对的方案，否则可能会报错。