URI编码解码和base64
概述
对于uri的编解码,在js中有3对函数,分别是escape/unescape,encodeURI/decodeURI,encodeURIComponent/decodeURIComponent。
它们的适用范围不同,而且遵循的编码规范也不同。
对于上述函数而言,所有的ASCII的字符编码相同,采用%XX的形式。而对于unicode字符,escape编码形式为%uXXXX,而其余两个函数
则先将unicode字符按照utf-8对其进行编码,然后继续进行uri编码(百分号)。对于中文字符,每个字符用urf-8编码则为3个字节,然后在每个
字节前面加上%即可。如:‘中国’按照urf-8编码为"0xE40xB80xAD0xE50x9B0xBD",进而对该6个字节进行百分号编码:
"%E4%B8%AD%E5%9B%BD"。
对于base64编码,常常在网络中用于编码长标识符。编码规则是每3个8位字节为一组,分成4组6位字节,并且每个字节的高位补零,形成4个8位
的字节。base64编码具有可逆性。在js中,IE10以及w3c浏览器内置了window.btoa()来完成二进制数据或者ASCII字符到base64的转换。但是
unicode字符不能使用该函数。
区别
这三对函数的安全字符(即不需要编码的字符)范围也不同,如下所示:
- escape(69个):*/@+-._0-9a-zA-Z
- encodeURI(82个):!#$&'()*+,/:;=?@-._~0-9a-zA-Z
- encodeURIComponent(71个):!'()*-._~0-9a-zA-Z
现在对比encodeURI和encodeURIComponent,从名称上可看出encodeURI是针对整个URI进行编码,我们以特殊的URI--URL来说明下。
对于URL为http://www.baidu.com而言,如果用encodeURI编码,返回的仍是“http://www.baidu.com”;如果用encodeURIComponent
编码,返回的为"http%3A%2F%2Fwww.baidu.com"。
encodeURI所针对的是整个URI,并不会对分隔符如/,?,=符号进行编码,否则破坏了URI的原有含义,而encodeURIComponent则是针对URI的
某一部分进行编码,如查询字符串部分的&会被转义。
base64编码与btoa
在浏览器内部,encodeURIComponent(s) = escape(unicodeToUTF8(s));
根据上述公式,可以退出 unicodeToUTF8(s) = unescape(encodeURIComponent(s));然后根据utf-8编码的字符进行base64编码。
function unicodeToBase64(s){
return window.btoa(unescape(encodeURIComponent(s)))
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法