关于encodeURIComponent编码非UTF-8字符时出现的怪异情况
Posted ryzz
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于encodeURIComponent编码非UTF-8字符时出现的怪异情况相关的知识，希望对你有一定的参考价值。
现在有个test.html文件，这个文件的编码是UTF-8，其中“你好”的UTF-8编码是：E4 BD A0 E5 A5 BD，文件代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
console.log(encodeURIComponent("你好")); //%E4%BD%A0%E5%A5%BD
</script>
</head>
<body>
<p>hello你好</p>
</body>
</html>
可以看见，enencodeURIComponent就是将“你好”以UTF-8编码输出（这也正是encodeURIComponent方法的定义：将非URI字符都以UTF-8编码的格式输出为字符串），现在来看一个怪异的情况，还是上面的test.html（所以文件的编码依旧是UTF-8），只不过这次手动把charset改为了GBK编码，用来误导encodeURIComponent方法，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<script>
console.log(encodeURIComponent("你好")); //%E6%B5%A3%E7%8A%B2%E3%82%BD
</script>
</head>
<body>
<p>hello你好</p>
</body>
</html>
什么，输出的是什么鬼！不着急，我们慢慢分析：
encodeURIComponent认为需要encode的字符的编码是charset指定的编码，这里就是GBK，而encodeURIComponent需要的是UTF-8编码的字符，这样它才会进行encode，所以必须发生编码之间的转换，具体如下，
“你好”的UTF-8：E4 BD A0 E5 A5 BD
所以“你好”实际上是以上面的6字节存储在文件test.html里面（因为文件的实际编码是UTF-8）
但是charset指定的GBK是2字节编码（除128个ASCII外，都是2字节编码），所以它把E4 BD认为是1个GBK字符，尝试把它转为UTF-8，其中E4 BD在GBK中对应的是“浣”字，而这个字在UTF-8则是E6 B5 A3
由此问题解决！
以上是关于关于encodeURIComponent编码非UTF-8字符时出现的怪异情况的主要内容，如果未能解决你的问题，请参考以下文章
encodeURI()和encodeURIComponent() 区别
url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介
url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介