JavaScript中的各种编码
文章目录
- 1 encodeURIComponent() 和 decodeURIComponent()
- 1.1 encodeURIComponent是什么
- 1.2 转义规则
- 1.3 转义报错
- 1.4 用途
- 2 decodeURI() 和 encodeURI()
- 3 Base64编码, atob 和btoa
- 4 FileReader将任意文件转换为Base64
1 encodeURIComponent() 和 decodeURIComponent()
1.1 encodeURIComponent是什么
encodeURIComponent() 是对统一资源标识符(URI)的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码(只有由两个Unicode代理区字符组成的字符才用四个转义字符编码)。
1.2 转义规则
encodeURIComponent 转义除了字母、数字、(、)、.、!、~、*、’、-和_之外的所有字符。
1.3 转义报错
// 正常
encodeURIComponent('\uD800\uDFFF')// 只有高位,将抛出"URIError: malformed URI sequence"
encodeURIComponent('\uD800')// 只有低位,将抛出"URIError: malformed URI sequence"
encodeURIComponent('\uDFFF')
1.4 用途
为了避免服务器收到不可预知的请求,对任何用户输入的作为URI部分的内容你都需要用encodeURIComponent进行转义。比如,一个用户可能会输入"Thyme &time=again"作为comment变量的一部分。如果不使用encodeURIComponent对此内容进行转义,服务器得到的将是comment=Thyme%20&time=again。请注意,"&“符号和”="符号产生了一个新的键值对,所以服务器得到两个键值对(一个键值对是comment=Thyme,另一个则是time=again),而不是一个键值对。
对于 application/x-www-form-urlencoded (POST) 这种数据方式,空格需要被替换成 ‘+’,所以通常使用 encodeURIComponent 的时候还会把 “%20” 替换为 “+”。
2 decodeURI() 和 encodeURI()
ECMAScript v3 已从标准中删除了 unescape() / escape() 函数,并反对使用它,因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。
encodeURI已经被encodeURIComponent取代
其中encodeURI()主要用于整个URI(例如,http://www.jxbh.cn/illegal value.htm),而encode-URIComponent()主要用于对URI中的某一段(例如前面URI中的illegal value.htm)进行编码。它们的主要区别在于,encodeURI()不会对本身属于URI的特殊字符进行编码,例如冒号、正斜杠、问号和井字号;而encodeURIComponent()则会对它发现的任何非标准字符进行编码。来看下面的例子:
var uri="http://www.jxbh.cn/illegal value.htm#start";// http: //www.jxbh.cn/illegal%20value .htm#s tart
console.log( encodeURI (uri) )// http% 3A%2F%2Fwww.jxbh.cn%2 Fillegal%2 0value. htm%23 start
console.log( encodaURIComponent (uri))
3 Base64编码, atob 和btoa
var encodedData = window.btoa('Hello, world'); // encode a string
var decodedData = window.atob(encodedData); // decode the string
Base64编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。Base64也被一些应用(包括使用MIME的电子邮件)和在XML中储存复杂的数据时使用。
在JavaScript中,有2个函数分别用来处理解码和编码base64 字符串:
- atob()
- btoa()
atob() 函数能够解码通过base-64编码的字符串数据。如果传入字符串的长度不是4的倍数,则抛出DOMException。
相反地,btoa() 函数能够从二进制数据“字符串”创建一个base-64编码的ASCII字符串。
4 FileReader将任意文件转换为Base64
let fileReader = document.getElementsByClassName('fileReader')[0]
let file = fileReader.files[0]
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = (data) => {base64_con = e.target.result;// 可以赋值给 img.src实现预览
}
- nodejs解析
// 解码base64数据
var bitmap = new Buffer(base64str, 'base64');
// 存储文件
fs.writeFileSync(file, bitmap);
JavaScript中的各种编码相关推荐
- Javascript中的url编码与解码(详解)
摘要 本文主要针对URI编解码的相关问题做了介绍,对url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript中和编解码相关的几对函数escape / unescap ...
- javascript中的字符串编码、字符串方法详解
js中的字符串是一种类数组,采用UTF-16编码的Unicode字符集,意味字符串的每个字符可用下标方式获取,而每个字符串在内存中都是一个16位值组成的序列.js对字符串的各项操作均是在对16位值进行 ...
- 解析JavaScript中的字符串类型与字符编码支持
JavaScript中的字符串也像Python那样支持反斜杠的转移,并且字符集方面默认为Unicode,下面就来详细解析JavaScript中的字符串类型与字符编码支持 定义 字符串就是零个或多个排在 ...
- vj节点_创意编码—如何在JavaScript中创建VJ引擎
vj节点 by George Gally 通过乔治·加利 创意编码-如何在JavaScript中创建VJ引擎 (Creative Coding - How to create a VJ engine ...
- javascript面试_在编码面试中需要注意的3个JavaScript问题
javascript面试 JavaScript is the official language of all modern web browsers. As such, JavaScript que ...
- javascript中的Base64.UTF8编码与解码详解
javascript中的Base64.UTF8编码与解码详解 本文给大家介绍的是javascript中的Base64.UTF8编码与解码的函数源码分享以及使用范例,十分实用,推荐给小伙伴们,希望大家能 ...
- Javascript中Base64编码解码的使用实例
Javascript为我们提供了一个简单的方法来实现字符串的Base64编码和解码,分别是window.btoa()函数和window.atob()函数. 1 var encodedStr = win ...
- 字符编码 unicode 及其在javascript 中的使用
一.javascript 使用 unicode16 字符集,可以使用中文变量名和函数名 计算机使用 8 位(bit)二进制表示一个字节(Byte),计算机内存最小寻址单位就是 1 字节. 早期为了在计 ...
- 编码 unicode 及其在 javascript 中的使用
编码 unicode 及其在 javascript 中的使用 一.javascript 使用 unicode16 字符集,可以使用中文变量名和函数名 计算机使用 8 位(bit)二进制表示一个字节(B ...
- javaScript中URL编码转换
在使用url进行参数传递时,经常会传递一些中文名的参数或带特殊字符的参数或URL地址,在后台处理时会发生转换错误.在有些传递页面使用GB2312,而在接收页面使用UTF8,这样接收到的参数就可能会与原 ...
最新文章
- as3通信AMF3协议的框架
- GetModuleHandle,AfxGetInstanceHandle使用区别
- Spring boot整合Mongodb
- Spring MVC 4快速入门Maven原型已改进
- swift面向对象之多态与继承
- 8年了,这几个时间API你用过吗?
- hihocoder217周 树形DP
- C++标准库:bitset 用法整理 (来自网易 happyboy200032的博客)
- LVS部分调度算法的适应场景分析
- [译] 五个小技巧让你写出更好的 JavaScript 条件语句
- 机器学习| 面试题:11、LDA算法原理
- 安卓阅读器开发_全球首个彩屏阅读器 掌阅这一脚油门“彩”的够深
- python 读取png图片 透明度
- 上传本地文件到服务器:not a regular file
- 学校选课系统服务器繁忙,大学选课没选到怎么办
- 织梦dedecms TAG标签调用汇总(史上最全)
- miui11开发版升级Android10,小米10 手机 MIUI 11 开发版升级 DXOMARK 相机版本
- oracle异地容灾备份 英文6,异地容灾备份的方案.doc
- 计算器 android报告,bmi计算器android开放实验项目总结报告.pdf
- 使用VeraCrypt进行整盘加密介绍