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 童童"

转载于:https://www.cnblogs.com/shytong/p/5102256.html

encodeURI、encodeURIComponent、btoa及其应用场景相关推荐

encodeURI encodeURIComponent 的区别，和使用场景
encodeURI encodeURIComponent 的区别,和使用场景一. ncodeURI 和 encodeURIComponent 之前一直不了解这两个的区别,现在知道了: encodeU ...
[转]js escape,encodeURI,encodeURIComponent
js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...
url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介
转载地址:http://www.haorooms.com/post/js_escape_encodeURIComponent 引子浏览器URl地址,上网一定会用到,但是浏览器地址有中文或者浏览器ur ...
url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介【转】
引子浏览器URl地址,上网一定会用到,但是浏览器地址有中文或者浏览器url参数操作的时候,经常会用到encodeURIComponent()和decodeURIComponent()以及encode ...
JS中URL中的特殊字符问题:escape,encodeURI,encodeURIComponent(转)
在使用url进行参数传递时,经常会传递一些中文名(或含有特殊字符)的参数或URL地址,在后台处理时会发生转换错误.在有些传递页面使用GB2312,而在接收页面使用UTF8,这样接收到的参数就可能会与原 ...
URL转码escape() encodeURI() encodeURIComponent()
转:http://deony2jacob1314.iteye.com/blog/1753068 js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent, ...
js 编码解码 escape,encodeURI,encodeURIComponent
js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...
javascript URIError: malformed URI sequence 谈谈url编码 encodeURI encodeURIComponent和escape
一.案例描述第一个页面,url传参数给第二个页面 <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
escape,encodeURI,encodeURIComponent有什么区别？
一.escape escape是对字符串进行编码,使得可以在所有的电脑上可读,但是encodeURI和encodeURIComponent是对URL进行编码的.escape和后两者几乎没关系. esc ...
JS拼接字符串的过程中将JSON对象存到某个标签的属性中,encodeURIComponent(),btoa()用法介绍
JS拼接字符串的过程中将JSON对象存到某个标签的属性中 JS拼接字符串的过程中将JSON对象存到某个标签的属性中,encodeURIComponent(),btoa()用法介绍案例描述实现方法 ...

encodeURI、encodeURIComponent、btoa及其应用场景

encodeURI、encodeURIComponent、btoa及其应用场景相关推荐

最新文章

热门文章