前言
数据操作过程中,经常涉及到编码与解码等相关操作,如web请求时会对url进行编码,其中的中文等字符会转义为其他内容;中文字符串数据传输时,会将其使用base64编码并在接收后解码,以避免乱码的出现。
一、URL编码
1. URLEncoder和URLDecoder
URLDecoder 和 URLEncoder 用于普通字符串 和 application/x-www-form-urlencoded MIME 字符串之间的相互转换。
当URL地址里包含非西欧字符的字符串时,浏览器会将这些非西欧字符串转换成application/x-www-form-urlencoded MIME 字符串。
- URLDecoder类包含一个decode(String s,String enc)静态方法,它可以将application/x-www-form-urlencoded MIME字符串转成普通字符串;
- URLEncoder类包含一个encode(String s,String enc)静态方法,它可以将普通字符串转换成application/x-www-form-urlencoded MIME字符串。
2. URL编码规则
对 String 编码时,使用以下规则:
- 字母、数字和字符, “a” 到 “z”、”A” 到 “Z” 和 “0” 到 “9” 保持不变;
- 特殊字符 “.”、”-“、”*” 和 “_” 保持不变;
- 空格字符 ” ” 转换为一个加号 “+”;
- url编码时会将 + 编码成空格;
- 除此之外,所有的其他字符都是不安全的,会变成以 % 开头的字符;
- 对于一个中文,会使用3个字节表示。
由于以上限制内容,因此URL编码是一种限制性编码方式。
3. Javascript 原生提供三对 Url编码 的函数
Javascript中提供了3对函数用来将不安全不合法的Url字符转换为合法的Url字符表示 ,它们分别是:
- escape / unescape
- encodeURI / decodeURI
- encodeURIComponent / decodeURIComponent
由于解码和编码的过程是可逆的,因此这里只解释编码的过程。
3.1 三对函数的不同点
(1) 安全字符不同
下面列出了这三个函数的安全字符(即函数不会对这些字符进行编码):
- escape(69个):*/@±._0-9a-zA-Z
- encodeURI(82个):!#$&'()*+,/:;=?@-._~0-9a-zA-Z
- encodeURIComponent(71个):!'()*-._~0-9a-zA-Z
(2) 兼容性不同
escape函数是从Javascript 1.0的时候就存在了,其他两个函数是在Javascript 1.5才引入的。但是由于Javascript 1.5已经非常普及了,所以实际上使用encodeURI和encodeURIComponent并不会有什么兼容性问题。
(3) 对Unicode字符的编码方式不同
escape 和 encodeURI / encodeURIComponent 不是同一类。
简单来说,escape 是对字符串进行编码, 而另外两种是对URL进行编码,作用是让它们在所有电脑上可读。编码之后的效果是%XX或者%uXXXX这种形式。其中 ASCII字母,数字 ,@*/+ 这几个字符不会被编码,其余的都会。
注意:当需要对URL编码时,请忘记这个方法,这个方法是针对字符串使用的,不适用于URL。
(4) 适用场合不同
encodeURI 被用作对一个完整的URI进行编码,而 encodeURIComponent 被用作对URI的一个组件进行编码。
对URL编码是常见的事,所以这两个方法应该是实际中要特别注意的。它们都是编码URL,唯一区别就是 编码的字符范围:
- encodeURI 方法不会对下列字符编码:ASCII字母 ,数字 , ~!@#$&*()=:/,;?+’
- encodeURIComponent 方法不会对下列字符编码 :ASCII字母 ,数字 , ~!*()’
所以 encodeURIComponent 比 encodeURI 编码的范围更大。
实际例子来说,encodeURIComponent 会把 http:// 编码成 http%3A%2F%2F ,而encodeURI 却不会。
3.2 总结
总的来说,最重要的是什么场合应该用什么方法:
- 如果只是编码 字符串,和URL没有关系,那么使用 escape;
- 如果需要编码 整个URL,并需要使用这个URL,那么用 encodeURI;
例如:
encodeURI("http://www.cnblogs.com/hl/some other thing");
编码后会变为:
"http://www.cnblogs.com/hl/some%20other%20thing";
其中,空格被编码成了%20。但是如果你用了encodeURIComponent,那么结果变为 “http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing”
看到区别了嘛?连 “/” 都被编码了,整个URL已经没法用了。
- 如果需要编码 URL中的参数,使用 encodeURIComponent 是最好方法。
// param为参数
let param = "http://www.cnblogs.com/season-huang/";
param = encodeURIComponent(param);
let url = "http://www.cnblogs.com?next=" + param;
console.log(url);
// "http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F
看到了吧,参数中的 “/” 可以编码,如果用 encodeURI 肯定要出问题,因为后面的 / 是需要编码的。
二、Base64编码
1. Base64编码规则
Base64是一种将二进制数据用文本表示的编码算法,它只包含64个字符,A - Z,a - z,0 - 9,+ ,/ , 对应索引为 0 - 63。
- base64编码时选取3个字节为一组,进行重新编排,将原来8个bit为一个字节改为每6个bit作为新的字节,3个字节编码形成4个字节;
- 如果字符字节长度不是3的倍数,会使用\x00字节补足,再根据补足的数量添加等量的=标识;
- 如43yW56CB5rWL6K+HUQ==代表,编码时补足两个\x00,编码后增加两个+;
2. Base64编码使用
如果需要将包含中文的utf-8编码字符转换称ASCII码,则需要使用Base64作为中间编码来保证字符数据的稳定。
- 编码,要将utl-8字符使用base64编码,得到结果后将字符转成ASCII编码;
- 解码,将ASCII编码解析为Base64字符串,使用Base64解码方法解析为utf-8的结果数据;
- 除了针对字符串外,Base64还可以对不太大的文件进行编码,使用字符序列表示二进制文件;
3. JavaScript 原生提供两个 Base64 相关的方法
- btoa():任意值转为 Base64 编码;
- atob():Base64 编码转为原来的值;
注意,这两个方法不适合非 ASCII 码的字符,会报错。
要将非 ASCII 码字符转为 Base64 编码,必须中间插入一个转码环节,再使用这两个方法。文章来源:https://www.toymoban.com/news/detail-787880.html
function b64Encode(str) {
return btoa(encodeURIComponent(str));
}
function b64Decode(str) {
return decodeURIComponent(atob(str));
}
b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"
总结
参考链接:
URL编码和Base64编码
Web开发须知:URL编码与解码
escape,encodeURI,encodeURIComponent有什么区别?文章来源地址https://www.toymoban.com/news/detail-787880.html
到了这里,关于URL编码和Base64编码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!