javascript中几个编码函数encodeURI、encodeURIComponent以及escape的区别

Posted on Edited on In

背景

今天平台在向调用的平台发送回调请求的时候，发现有问题，排查了一会儿发现并不是所有的回调请求都会有问题。基本上纯字母或数字的回调都没有问题，而出问题的请求包含”&”,”-“等特殊字符，于是第一时间想到是不是解析特殊字符的问题。

于是跟接收方约定，我将请求encode后发送，接收方接收后decode后再解析。

TEST1

代码片段：

1
var resParams = {"name":encodeURI(out.name),"blockId":blockId,"total":1,"detail":encodeURI(reportPath)};

发布后，重新触发，查看日志：

1
..."detail":"http://(绿色围墙)/detail?id=1&suffix=1438601805325"...}

怎么貌似请求串没有改变？

第一反应，怀疑是不是编码没有成功，但我之前一直都是使用encodeURI编码，并不会别的什么方法，于是百度了下，发现还有个encodeURIComponent以及escape的区别方法。

TEST2

1
var resParams = {"name":encodeURIComponent(out.name),"blockId":blockId,"total":1,"detail":encodeURIComponent(reportPath)};

发布后，重新触发，查看日志：

1
..."detail":"http://(绿色围墙)/detail%3Fid%3D1%26suffix%3D1438601805325"...}

起效了~

总结

javascript中有三种编码的函数，分别是：*escape(),encodeURI()以及encodeURIComponent()*。

  1. escape
    该方法不对ASCII字母和数字编码，也不会对ASCII标点符号编码，除此之外的所有字符均会被编码。
    基本上该方法已经被javascript标准所遗弃，从ECMAScript v3开始，标准就建议使用encodeURI和encodeURIComponent代替。

  2. encodeURI
    该方法不会对字母和数字编码，也不会对这些ASCII标点符号编码：** -_.!~*’() **
    该方法的目的是对URI进行完整的编码，对URI中具有特殊含义的标点符号不进行转义。
    因此正如我遇到的问题一样，如果URI中含有分隔符，则应当使用encodeURIComponent方法编码。

  3. encodeURIComponent
    该方法不会对字母和数字编码，也不会对这些ASCII标点符号编码：** -_.!~‘() **
    其他字符，如    * ;/?:@&=+$,# **这些用于分隔 URI 组件的标点符号，都会由十六进制转义替换。
    encodeURIComponent除了编码标准的URI之外，对于它的参数也都一并进行处理。

他们对应的解码函数分别是：
unescape(),decodeURI(),decodeURIComponent()