JavaScript中 编码和解码的几种方式

简介: JavaScript中 编码和解码的几种方式

JavaScript中有几个可以对字符串编码的函数,分别是:escape、encodeURI、encodeURIComponent。

1. escape

image.png

const a1 = 'Visit W3School!';
const b1 = '?!=()#%&'
console.log(escape(a1)); // Visit%20W3School%21
console.log(escape(b1)); // %3F%21%3D%28%29%23%25%26
const a2 = 'Visit%20W3School%21';
const b2 = '3F%21%3D%28%29%23%25%26';
console.log(unescape(a2)); // Visit W3School!
console.log(unescape(b2)); // ?!=()#%&   

2. encodeURI

image.png

const a1 = 'http://www.w3school.com.cn/My first/';
const b1 = ',/?:@&=+$#'
console.log(encodeURI(a1)); // http://www.w3school.com.cn/My%20first/
console.log(encodeURI(b1)); // ,/?:@&=+$#
const a2 = 'http://www.w3school.com.cn/My%20first/';
const b2 = ',/?:@&=+$#';
console.log(decodeURI(a2)); // http://www.w3school.com.cn/My first/
console.log(decodeURI(b2)); // ,/?:@&=+$#

3. encodeURIComponent

image.png

const a1 = 'http://www.w3school.com.cn/My first/';
const b1 = ',/?:@&=+$#'
console.log(encodeURIComponent(a1)); // http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
console.log(encodeURIComponent(b1)); // ,%2C%2F%3F%3A%40%26%3D%2B%24%23
const a2 = 'http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F';
const b2 = '%2C%2F%3F%3A%40%26%3D%2B%24%23';
console.log(decodeURIComponent(a2)); // http://www.w3school.com.cn/My first/
console.log(decodeURIComponent(b2)); // ,/?:@&=+$#  

总结:

通过对三个函数的分析,我们知道:escape() 除了 ASCII 字母、数字和特定的符号外,对传进来的字符串全部进行转义编码,因此如果想对 URL 编码,最好不要使用此方法。而 encodeURI() 用于编码整个 URI,因为 URI 中的合法字符都不会被编码转换。encodeURIComponent 方法在编码单个 URIComponent(指请求参数)应当是最常用的,它可以讲参数中的中文、特殊字符进行转义,而不会影响整个URL。



相关文章
|
6月前
|
JavaScript
开发中的编码和解码(js的问题)
开发中的编码和解码(js的问题)
33 0
|
6月前
|
前端开发 JavaScript Java
JavaScript 中有趣的 9 个常用编码套路
JavaScript 中有趣的 9 个常用编码套路
|
3月前
|
JavaScript 前端开发
JS - 如何上传 Base64 编码的图片
本文展示了如何将Base64编码的图片在前端转换为Blob对象,并使用`FormData`上传到服务器端的方法。
179 0
|
4月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
56 1
|
4月前
|
存储 JavaScript 前端开发
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
51 1
|
4月前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
40 1
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
4月前
|
存储 JavaScript 前端开发
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(一)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(一)
36 0
|
4月前
|
JavaScript 前端开发
JavaScript编码之路【ES6新特性之Class类】(二)
JavaScript编码之路【ES6新特性之Class类】(二)
25 0
|
4月前
|
JavaScript 前端开发
JavaScript编码之路【ES6新特性之Class类】(一)
JavaScript编码之路【ES6新特性之Class类】(一)
34 0