2017-10-02

JavaScript 中的各种编码解码函数

最后更新： 2018-01-05

阅读次数：次

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

let data = {
  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

md5 相关

JavaScript 中没有内建的用于进行 md5 处理的函数，但是网上有各种库可以用于生成 md5 值。

JavaScript MD5：生成字符串的 md5 值（可用于浏览器端）。