HTTP-URL编码函数

HTTP-URL编码函数

一般来说，URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号。比如，世界上有英文字母的网址 “h ttp://www.haorooms.com”， 但是没有希腊字母的网址“h ttp://www.aβγ.com” （读作阿尔法-贝塔-伽玛.com）。这是因为网络标准RFC 1738做了硬性规定：

Only alphanumerics [0-9a-zA-Z], the special characters “$-_.+!*’(),” [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL.

这意味着，如果URL中有汉字，就必须编码后使用。但是麻烦的是，RFC 1738没有规定具体的编码方法，而是交给应用程序（浏览器）自己决定。这导致“URL编码”成为了一个混乱的领域。
在我上一篇博客中提供了一种监测 ？及 = 来格式化URL中查询字符串的方法。但是，实际上这个方法还存在一定问题，那就是，如果用urlParas(testUrl).set()设定一个查询字符串 hi=“你好”，会使得查询字符串中出现中文，必须编码以后使用。
下面介绍JavaScript中常用的URL编码函数。

1. escape()

escape()是js编码函数中最古老的一个。虽然这个函数现在已经不提倡使用了，但是由于历史原因，很多地方还在使用它，所以有必要先从它讲起。实际上，escape()不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值。

    var test = "你好";
    console.log(escape(test)); //%u4F60%u597D

注意：escape()不对“+”编码。但是我们知道，网页在提交表单的时候，如果有空格，则会被转化为+字符。服务器处理数据的时候，会把+号处理成空格。所以，使用的时候要小心。

2. encodeURI

它着眼于对整个URL进行编码，因此除了常见的符号以外，对其他一些在网址中有特殊含义的符号“; / ? : @ & = + $ , #”，也不进行编码。编码后，它输出符号的utf-8形式，并且在每个字节前加上%。

    var test1 = "https://www.baidu.com/baidu?wd=你好";
    console.log(encodeURI(test1)); //https://www.baidu.com/baidu?wd=%E4%BD%A0%E5%A5%BD

看吧，对于 ？ = 等，encodeURI没有进行编码。

3. encodeURIComponent

最后一个Javascript编码函数是encodeURIComponent()。与encodeURI()的区别是，它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。因此，“; / ? : @ & = + $ , #”，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。至于具体的编码方法，两者是一样。

    var test1 = "https://www.baidu.com/baidu?wd=你好";
    console.log(encodeURI(test1)); //https://www.baidu.com/baidu?wd=%E4%BD%A0%E5%A5%BD
    console.log(encodeURIComponent(test1)); //https%3A%2F%2Fwww.baidu.com%2Fbaidu%3Fwd%3D%E4%BD%A0%E5%A5%BD

对比可以看出，encodeURIComponent对 : // ? 等特殊符号也进行了编码，故其不应该用于对完整URL编码。

综上，可以写出一个向URL末尾添加查询字符串的函数。

    function addURLParam(url, name, value){
        url += (url.indexOf("?") == -1 ? "?" : "&");
        url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
        return url;
    }

    var test2 = "https://www.baidu.com/baidu";
    var encodeURL = addURLParam(test2, "键名", "123");
    console.log(encodeURL); //https://www.baidu.com/baidu?%E9%94%AE%E5%90%8D=123

这样，才能保证URL合法，减少出错可能。