前端开发中的字符编码有哪些

这篇文章将为大家详细讲解有关前端开发中的字符编码有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联服务项目包括爱民网站建设、爱民网站制作、爱民网页制作以及爱民网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，爱民网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到爱民省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

前端开发过程中会接触各种各样的编码，比较常见的主要是UTF－8和HTML实体编码，但是web前端的世界却不止这两种编码，而且编码的选择也会 造成一定的问题，如前后端开发过程中不同编码的兼容、多字节编码可能会造成的XSS漏洞等。因此，本文旨在更好的全面了解涉及前端开发领域的字符编码，避 免可能出现的交互和开发中的忽视的漏洞。

URL编码

我曾经在URL编码解码和base64一文中讲述了URL编码中的三组函数，并对比了这三组函数与base64编码的关系，在此简要说明一下。
escape/unescape函数针对宽字符做unicode编码，并针对码值做十六进制编码，所以使用escape针对汉字编码会得到形 如”\uxxxx”的结果；encodeURI/decodeURI,encodeURIComponent/decodeURIComponent函数 针对宽字节编码却不同于escape，首先针对宽字节字符进行UTF－8编码，然后针对编码后的结果进行“％”替换，得到结果。以上所述都是针对宽字节字 符而言，对于编码靠前的ASCII字符而言，上述三组函数的安全字符的范围也有所不同，具体可在上文中了解。

base64编码

base64编码在前端通常用于图片和icon的编码，它将每3个8位字节为一组，分成4组6位字节，并且每个字节的高位补零，形成4个8位的字 节，由此可看出base64编码是可逆推的。在大多数浏览器中，提供了ASCII字符的base64编码函数，即window.btoa()。该函数无法 针对宽字节进行base64编码，若针对中文编码，则需现转换位UTF－8编码，然后进行base64编码。

function unicodeToBase64(s){ return window.btoa(unescape(encodeURIComponent(s))) }

通过encodeURIComponent对宽字节字符编码，是“％xx”形式的编码，与UTF8编码的区别仅在于前缀（这是由规范RFC3986决定的，将非ASC字符进行某种形式编码，并转换为16进制，并在字节前加上“％”）。因此通过unescape(encodeURIComponent(s))可以转化为UTF8字节。当然，也可自己写一个转换函数，按照一定规则便行为UTF－8编码的字节，如下例：

``` unescape(encodeURIComponent("中国")) //结果："中国" encodeURIComponent("中国") //结果："%E4%B8%AD%E5%9B%BD" console.log("\u00E4\u00B8\u00AD\u00E5\u009B\u00BD") // 结果： "中国" ```

通过简单的replace函数，就可以完成URL编码到UTF8编码的转换，进而完成宽字节字符到base64编码的转换。有了这个函数，我们手动生成一些data URI形式的内容，只需制定MIME类型和编码方式，就可以实现文本的转换，如以下代码：

```

abc // 未编码前：test ```

前端UTF8编码与后端GBK编码的兼容

目前前端大都采用UTF8进行编码，不管是html、js抑或是css，而后端则由于历史原因大都采用GBK或GB2312进行解码，因此前端通过 parameter传递的URL编码的字符串就不可能直接在后台进行解码，为了更好的兼容性，前端可进行两次URL编码，即 encodeURIComponent（encodeURIComponent（“中国”）），这样后端接收到参数后，先使用GBK或GB2312解码， 得到了UTF8编码后再使用UTF8解码即可。两次编码主要是利用“ASC字符使用GBK或GB2312编码不变”的特点完成，富有技巧。

HTML实体编码与进制编码

实体编码针对HTML的预留字符而言，如“<>”等。实体编码有两种形式&实体名;或&entity_number;，由于浏览器对&实体名;的兼容性有差别，因此***采用实体号的形式编码。

进制编码，顾名思义将ASC字符对应的码值按照十六进制或十进制编码，并转化为&#x;(16进制)或&#D;(10进制)形式。

单单针对实体编码而言并没有什么特殊强调的点，之所以把它单独列为一个章节，意在强调这两种编码与js代码的作用域的关系。

')">cccc