使用js实现URL中的中英文转化

一个现象，从浏览器地址栏复制网址，http://www.baidu.com/s?wd=格娜小屋，就是这样的，http://www.baidu.com/s?wd=%E6%A0%BC%E5%A8%9C%E5%B0%8F%E5%B1%8B。

实在不知道该如何取名，姑且先这么叫吧。
其实，照片文章主要是要讲解我们经常会在浏览器(xml,html)中遇到的一些编码，以及unicode，gbk，utf-8中的一些简要关系，以及后端的一些关联。

OK，让我们先看下场景1

从一个URL中看起：
http://www.baidu.com/s?wd=%E6%88%91%E6%98%AF%E5%A5%BD%E4%BA%BA

肯定有人奇怪wd=后面一串是什么玩意？
你可以用JavaScript中的decodeUri解析出来：

decodeURI("%E6%88%91%E6%98%AF%E5%A5%BD%E4%BA%BA")
//输出 "我是好人"

这里，推荐你阅读下，这篇文章。在这篇文章中，你会知道，为什么用decodeURI可以解码出，为什么unescape不可以。

言归正传，这串奇怪的字符到底是怎么出来的呢？
其实就是将UTF-8版的“我是好人”，传入了encodeURI，然后得到的。

这里有两点要注意，
1、本身文字内容的编码是UTF-8
2、传入encodeURI，其实就等于又进行了一次urlencode

没有错，做了两种编码操作，这就是为什么这个代码看上去这么怪的原因。

ok，这里先说这个情况。接下来，让我们看场景2

escape("我是好人")
//输出 "%u6211%u662F%u597D%u4EBA"

这一串又是什么？这个是unicode，其实真正的unicode码是6211，只是为了表示是unicode，js里面都会加上%u。

再看个场景3

将下面这段复制到Html文本中，然后用浏览器显示：

<div>
&#25105;&#26159;&#22909;&#20154;
</div>

你会看到，页面上显示“我是好人”。

这又是什么情况？

其实，你将场景2中的数字部分，转换成10进制，对应的就是场景3中的数字了，不同的是一个前面用的是%u，场景3中，用的是&#。

其实上面，还可以写成：

<div>
&#x6211&#x662F&#x597D&#x4EBA
</div>

效果是一样的。

但是&#可以直接被浏览器渲染，这是因为HTML是采用UTF-8作为标准字集。（注意，unicode的编码和UTF-8的编码只需要通过模板就可以很方便的转换，所以，从一定意义上可以认为unicode和utf-8是一回事，但是unicode和GBK完全不是一回事，这点要注意。）
这里其实就是,这个的nnn就是unicode的编码，而&#可以认为是html的约定，只要出现这个就是需要转义的。

而%u只是转码出来用来标示这是unicode的，并不是用来告诉浏览器如何解析的。

现在让我们思考场景1和场景2的关系。
其实说到这里就要明白utf8产生的原因，其原因是因为要减少网络传输的使用带宽，同时前面也说utf和unicode的互转可以通过模板简单实现。同时，浏览器是可以识别utf的，当然你要指定，此外操作系统本身就可以识别unicode，自然浏览器也可以识别。所以，你直观看起来就可能比较迷惑了。因为都是“我是好人”。其实这个时候我们应该从他们对应的十六进制码来看，对于utf和unicode来说，两者对应的十六进制值是不同的。这点很关键，这也就是他的背后要两个不同函数解析的原因。总而言之，对于编码操作，为了不混淆，在思考问题时，一定要转换成对应的16进制值。

对于有兴趣了解unicode和utf之间的转换模板机制的话，可以看我的另一篇文章。