JavaScript 中的各种编码解码函数">JavaScript 中的各种编码解码函数

最近做的项目中,在给客户端发送的数据中有一个值为 url 链接的字段。 因为这个 url 中包含了个 json 字段的查询,有双引号,所以前端得将数据经过编码,发给客户端才不会出错。然后发现自己突然对这个操作有点生疏,索性在这里就总结下 JavaScript 中的那些编码解码问题。

let data = http://www.tuicool.com/articles/{
 something:'something',
 url: 'http://server.com/page/index.html?type=1&to={"target":"product_detail","uid":123456}'
};

URL 相关

  • encodeURI(URI): 该函数会编码所有的字符,但不包括以下字符:
类型 包含 保留字符 ; , / ? : @ & = + $ 非转义的字符 字母 数字 - _ . ! ~ * ‘ ( ) 数字符号 #

请注意,encodeURI 自身无法产生能适用于HTTP GET 或 POST 请求的URI,例如对于 XMLHTTPRequests, 因为 “&”, “+”, 和 “=” 不会被编码,然而在 GET 和 POST 请求中它们是特殊字符。然而encodeURIComponent这个方法会对这些字符编码。

  • decodeURI(URI): 解码一个由 encodeURI 编码过的 URI
let str = 'https://example.com/关于我.html?type=about';

let encodeStr = encodeURI(str);
// https://example.com/%E5%85%B3%E4%BA%8E%E6%88%91.html?type=about

decodeURI(encodeStr);
// https://example.com/关于我.html?type=about
  • encodeURIComponent(str): 该函数会编码所有的字符,但不包括以下字符:
类型 包含 非转义的字符 字母 数字 - _ . ! ~ * ‘ ( )

可以看出,与 encodeURI相比,该函数会编码一些链接中的特殊字符(比如:&、= 等)。

  • decodeURIComponent(str): 解码一个由 encodeURIComponent 编码过的字符串
let str = 'https://example.com/关于我.html?type=about';

let encodeStr = encodeURIComponent(str);
// https%3A%2F%2Fexample.com%2F%E5%85%B3%E4%BA%8E%E6%88%91.html%3Ftype%3Dabout

decodeURIComponent(encodeStr);
// https://example.com/关于我.html?type=about

虽然 escape() 函数也可以进行相关编码,但是这个 js 的全局函数已经从 Web 标准中删除,不再建议使用。

base64 相关

在众多的 Web API 接口中,有一个 WindowBase64 接口 定义了两个分别用来进行编码和解码 base64 的工具函数。

WindowBase64 并不是一个全局对象,没有直接访问 WindowBase64 接口的方式。不过 Window 以及 WorkerGlobalScope 等接口实现了该接口,你可以在它们身上访问到 WindowBase64 的方法。

  • WindowBase64.btoa(str): 将一个只有 ASCII 字符的字符串或二进制数据转换成一个 base64 编码过的字符串。
    • 注意:该方法不能直接作用于 Unicode 字符串
    • 如果对一个非 ASCII 字符串进行编码,会报错

如果想对一个 Unicode 字符串进行编码,可以使用 encodeURIComponent 先对其进行编码,然后再进行 base64 编码。

let str = 'https://example.com/关于我.html?type=about';

let encodeStr = encodeURIComponent(str);
// https%3A%2F%2Fexample.com%2F%E5%85%B3%E4%BA%8E%E6%88%91.html%3Ftype%3Dabout

window.btoa(encodeStr);
// aHR0cHMlM0ElMkYlMkZleGFtcGxlLmNvbSUyRiVFNSU4NSVCMyVFNCVCQSU4RSVFNiU4OCU5MS5odG1sJTNGdHlwZSUzRGFib3V0
  • WindowBase64.atob(str): 用来解码被 base64 编码过的数据
    • 直接对 ASCII 字符串进行 base64 解码会出现乱码。
let str = 'hello world'; // ASCII 字符串

let base64Str = window.btoa(str);
// aGVsbG8gd29ybGQ=

window.atob(base64Str);
// hello world
赞 (0) 评论 分享 ()