encodeURI、encodeURIComponent、btoa及其应用场景
escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z
encodeURI不编码字符有82个:!,#,$,&,’,(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z
encodeURIComponent不编码字符有71个:!, ‘,(,),*,-,.,_,~,0-9,a-z,A-Z
1.encodeURI
encodeURI是用来编码URI的,最常见的就是编码一个URL。 encodeURI
会将需要编码的字符转换为UTF-8的格式。decodeURI方法可以恢复到原有字符串。
encodeURI方法不会编码下列字符:":", "/", ";", and "?",不过我们可以通过下面的encodeURIComponent方法来编码这些字符。
例如URL中包含中文:
encodeURI('http://www.我.com') // => "http://www.%E6%88%91.com"
由于encodeURI
不转义&
, +
, 和 =
。所以URL参数的值是无法转义的,比如我们想把a=?
传给服务器:
encodeURI('http://www.我.com?a=?') // => "http://www.%E6%88%91.com?a=?"
服务器收到的a
值为空,因为?
是URL保留字符。此时我们需要用encodeURIComponent
来编码!
2.encodeURIComponent
encodeURIComponent是用来编码URI参数的。decodeURIComponent方法可以恢复到原有字符串。
它只会跳过非转义字符(字母数字以及-_.!~*'()
), URL保留字符(;,/?:@&=+$#
)均会被转义。
由于encodeURIComponent能够编码差不多所有字符,当我们把编码过的/folder1/folder2/default.html发送到服务器时时,由于‘/’也将被编码,服务器将无法正确识别。
比如上面的例子:
// => "http://www.我.com?a=%3F"
encodeURI('http://www.我.com') + '?a=' + encodeURIComponent('?');
因为encodeURIComponent
会编码所有的URL保留字,所以不适合编码URL,例如:
encodeURIComponent('http://www.我.com')
"http%3A%2F%2Fwww.%E6%88%91.com"
3.btoa
btoa:将ascii字符串或二进制数据转换成一个base64编码过的字符串,该方法不能直接作用于Unicode字符串。
atob:将已经被base64编码过的数据进行解码。
注意:因为btoa仅将ascii字符串或二进制数据进行编码,不能作用于unicode字符串,所以对中文的base64编码会报错:
btoa("hello 童童");
// InvalidCharacterError: 'btoa' failed: The string to be encoded contains characters outside of the Latin1 range.
如果要对中文进行base64编码,只需要将中文进行 encodeURIComponent 进行编码之后再进行 base64编码即可。
btoa(encodeURIComponent("hello 童童"));
// "aGVsbG8lMjAlNDAlRTQlQkElOTElRTYlQjclQTElRTclODQlQjY="
完整的utf8编码字符串进行base64编码示例:
// 完整的utf8字符串base64编码与解码
function uft8ToBase64(utf8) {
return btoa(encodeURIComponent(utf8));
}
function base64ToUtf8(base64) {
return decodeURIComponent(atob(base64));
}
var base64 = uft8ToBase64("hello 童童");
// "aGVsbG8lMjAlNDAlRTQlQkElOTElRTYlQjclQTElRTclODQlQjY="
base64ToUtf8(base64);
// "hello 童童"
encodeURI、encodeURIComponent、btoa及其应用场景的更多相关文章
- url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介
url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介 2014年10月12日 16806次浏览 引子 浏览器URl地址,上网一定会用到,但是浏 ...
- escape,encodeURI,encodeURIComponent函数比较
escape,encodeURI,encodeURIComponent函数比较 js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数 ...
- escape,encodeURI,encodeURIComponent
JavaScript/js中,有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,d ...
- Flex中escape/encodeURI/encodeURIComponent的区别
Flex中提供了三种转码函数,各有各的区别, escape,encodeURI,encodeURIComponent 这三个函数不仅在flex中有道运用在javascript中同样的含义 ,今天我仔细 ...
- URI 方法 encodeURI() encodeURIComponent() docodeURI() decodeURIComponent()
URI 方法 encodeURI() encodeURIComponent() docodeURI() decodeURIComponent() var sUri = “http://ww ...
- url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介【转】
引子 浏览器URl地址,上网一定会用到,但是浏览器地址有中文或者浏览器url参数操作的时候,经常会用到encodeURIComponent()和decodeURIComponent()以及encode ...
- encodeURI & encodeURIComponent
[encodeURI & encodeURIComponent] 区别在于,"&", "+", 和 "=" 不会被enco ...
- JavaScript中有三个可以对字符串编码的函数,分别是: escape(),encodeURI(),encodeURIComponent()
JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...
- JavaScript中有对字符串编码的三个函数:escape,encodeURI,encodeURIComponent
JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...
随机推荐
- POJ1789 Truck History 2017-04-13 12:02 33人阅读 评论(0) 收藏
Truck History Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 27335 Accepted: 10634 D ...
- OpenGL中的像素包装理解
OpenGL中的像素包装理解 像素包装 位图和像素图很少会被紧密包装到内存中.在许多硬件平台上,考虑到性能的原因位图和像素图的每一行的数据会从特殊的字节对齐地址开始.绝大多数编译 器会自动把变量和缓冲 ...
- Python学习-12.Python的输入输出
在Python中,输出使用print函数,之前用过了. 输入的话,则使用input函数. var = input() print('you input is' + var) 输入haha则将输出you ...
- 第六章:shiro Realm相关对象
Shiro 中的 AuthenticationToken AuthenticationToken 用于收集用户提交的身份(如用户名)及凭据(如密码).Shiro会调用CredentialsMatche ...
- Azure静态公网ip自助反解
Linux下安装az工具,并登陆 az login 执行 az network public-ip update --resource-group ip所在资源组名称 --name ip对应资源名称 ...
- Python2.4+ 与 Python3.0+ 主要变化与新增内容
Python2 Python3print是内置命令 print变为函数print >> f,x,y ...
- JS控制输入框,输入正确的价格
在HTML中,验证输入内容的正确性是提高用户体验的一方面,同时也是初步保证了数据的来源的正确性. 下面是一个常用的控制输入正确的价格的JS代码 function clearNoNum(obj) { o ...
- 纸壳CMS3.0中的规则引擎,表达式计算
纸壳CMS3.0中的规则引擎,用于计算通用表达试结果.通常业务逻辑总是复杂多变的,使用这个规则引擎可以灵活的修改计算表达式. IRuleManager IRuleManager,是使用规则引擎的主要接 ...
- how to trace the error log
Executed as user: WTC\Ebw.Admin. Transaction (Process ID 95) was deadlocked on lock resources with a ...
- ANE-如何加入ane,调试时又不报错
有时候我们加入ane,即使没有调用ane的功能,debug的时候也会报错无法调试,这是为什么呢?因为我们的ane没有把default包含进去. 首先我们的extension.xml要把default节 ...