escape、encodeURI和encodeURIComponent的区别

时间：2021-02-06 18:24:28

1.简单解释

　　简单来说，escape是对字符串(string)进行编码(而另外两种是对URL)，作用是让它们在所有电脑上可读。
　　编码之后的效果是%XX或者%uXXXX这种形式。
　　其中 ASCII字母、数字、@*/+ ，这几个字符不会被编码，其余的都会。
　　最关键的是，当你需要对URL编码时，请忘记这个方法，这个方法是针对字符串使用的，不适用于URL。

2.   encodeURI和encodeURIComponent

　　对URL编码是常见的事，所以这两个方法应该是实际中要特别注意的。
　　它们都是编码URL，唯一区别就是编码的字符范围，其中
　　encodeURI方法不会对下列字符编码 ASCII字母、数字、~!@#$&*()=:/,;?+'
　　encodeURIComponent方法不会对下列字符编码 ASCII字母、数字、~!*()'
也就是encodeURIComponent编码的范围更广，会将http://XXX中的//也编码，会导致URL不可用。

 

3简单使用

3.1编码中文

    var param = "中文";
    console.log(escape(param));
    console.log(encodeURI(param));
    console.log(encodeURIComponent(param));

 

结果:

escape、encodeURI和encodeURIComponent的区别

 

3.2 encodeURI和encodeURIComponent编码URL

    var url = "http://localhost:85/Exam/settingAction_saveSettings.action?safeHatNumLength=测试";
    console.log(encodeURI(url));
    console.log(encodeURIComponent(url));

 

 结果:

http://localhost:85/Exam/settingAction_saveSettings.action?safeHatNumLength=%E6%B5%8B%E8%AF%95
http%3A%2F%2Flocalhost%3A85%2FExam%2FsettingAction_saveSettings.action%3FsafeHatNumLength%3D%E6%B5%8B%E8%AF%95

 

4.使用场景 

1、如果只是编码字符串，不和URL有半毛钱关系，那么用escape，而且这个方法一般不会用到。
2、如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。
3、当你需要编码URL中的参数的时候，那么encodeURIComponent是最好方法。

 

5.测试URL传中文参数问题

 后台采用struts2的属性驱动接受。并且进行解码: (Java后台解码)

        System.out.println(safeHatNumLength);
        try {
            System.out.println(URLDecoder.decode(safeHatNumLength,"UTF-8"));
        } catch (UnsupportedEncodingException e1) {
            e1.printStackTrace();
        }

 

 

5.1直接在url中输入中文查看后台:

 http://localhost:85/Exam/settingAction_saveSettings.action?safeHatNumLength=测试

 

结果:

测è¯

 

5.2window.open不编码直接访问

    var url = "http://localhost:85/Exam/settingAction_saveSettings.action?safeHatNumLength=测试";
    window.open(encodeURI(url));

 

结果同上

 

5.3   URL中文参数两次编码得到正确结果(一次编码不能得到正确结果)

总结:参数携带中文需要两次编码，如下:

        var url = encodeURI(encodeURI("http://localhost:85/Exam/settingAction_saveSettings.do?safeHatNumLength=测试"));
        console.log(url);
        window.open(url);

 

结果:

%E6%B5%8B%E8%AF%95
测试

 

原因:

如果只进行一次encodeURI，得到的是UTF-8形式的URL，服务器端通过request.getParameter()解码查询参数(通常是iso-8859-1)就会得到乱码。

如果进行两次encodeURI,第一次编码得到的是UTF-8形式的URL，第二次编码得到的依然是UTF-8形式的URL，但是在效果上相当于首先进行了一次UTF-8编码(此时已经全部转换为ASCII字符)，再进行了一次iso-8859-1编码，因为对英文字符来说UTF-8编码和ISO-8859-1编码的效果相同。在服务器端，首先通过request.getParameter()自动进行第一次解码(可能是gb2312,gbk,utf-8,iso-8859-1等字符集,对结果无影响)得到ascii字符，然后再使用UTF-8进行第二次解码，通常使用java.net.URLDecoder("","UTF-8")方法。

 

5.4  表单get方法提交一次编码就可以

    <form id="testForm" action="/Exam/settingAction_saveSettings.do" method="get">
            <input name="safeHatNumLength" />
            <input type="button" value="提交" onclick="submitForm();" />
    </form>
    <script>
    function submitForm() {
        $.get("/Exam/settingAction_saveSettings.do",encodeURI($("#testForm").serialize()));
    }
</script>

escape、encodeURI和encodeURIComponent的区别

 

后台结果::

%E9%97%AE%E9%97%AE
问问

 

 

 

总结:　　

　　如果只对参数编码用encodeURIComponent编码就可以，当然用 encodeURI也可以，如果不生效可以用两次编码。

　　如果是对整个URL进行编码最好用encodeURI，而且是两次编码 ，否则有可能不必生效。

　　判断是否生效只需要看带到后台的参数是否是编码后的格式，或者url的地址是否是编码之后的。

 

标签：

相关文章