javascript - 在不推荐使用 'Escape' 调用的情况下在 JavaScript 中转换为 Base64

Question

我的名字是费斯图斯。

我需要通过 JavaScript 在浏览器中将字符串与 Base64 相互转换。这个主题在这个网站和 Mozilla 上得到了很好的介绍，建议的解决方案似乎是这样的:

function toBase64(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}

function fromBase64(str) {
    return decodeURIComponent(escape(window.atob(str)));
}

我做了更多研究，发现 escape()和 unescape()已弃用，不应再使用。考虑到这一点，我尝试删除对已弃用函数的调用，这些函数会产生:

function toBase64(str) {
    return window.btoa(encodeURIComponent(str));
}

function fromBase64(str) {
    return decodeURIComponent(window.atob(str));
}

这似乎有效，但它引出了以下问题:

(1) 为什么最初提出的解决方案包括对 escape() 的调用和 unescape() ?该解决方案是在弃用之前提出的，但大概这些功能在当时增加了某种值(value)。

(2) 在某些极端情况下，我删除这些不推荐使用的调用会导致我的包装函数失败？

注意:StackOverflow 上还有其他更冗长和复杂的解决方案来解决 string=>Base64 转换的问题。我确信它们工作得很好，但我的问题与这个特别流行的解决方案特别相关。

谢谢，

非斯都

Answer 1

TL;DR 原则上 escape()/unescape()没有必要，并且没有弃用功能的第二个版本是安全的，但它会生成更长的 base64 编码输出:

console.log(decodeURIComponent(atob(btoa(encodeURIComponent("€uro")))))

console.log(decodeURIComponent(escape(atob(btoa(unescape(encodeURIComponent("€uro")))))))

两者都创建输出 "€uro"但是没有 escape() 的版本/ unescape()具有更长的 base64 表示

btoa(encodeURIComponent("€uro")).length // = 16

btoa(unescape(encodeURIComponent("€uro"))).length // = 8

escape()/ unescape()仅当对应方(例如，期望 base64 以特定方式完成的不可调整的 php 脚本)时，步骤才变得必要。

长版:

首先，为了更好地理解 toBase64() 两个版本之间的区别和 fromBase64()你上面的建议，让我们看看 btoa()这是问题的核心。文档说， btoa 的命名是助记符，所以

"b" can be considered to stand for "binary", and the "a" for "ASCII".

这有点误导，因为文档赶紧补充说，

in practice, though, for primarily historical reasons, both the input and output of these functions are Unicode strings.

更不完美， btoa()确实只接受

characters in the range U+0000 to U+00FF

明确地说，只有英文字母数字文本才能与 btoa() 一起使用。

encodeURIComponent()的目的| ，您在两个版本中都有，用于帮助处理具有 U+0000 到 U+00FF 范围之外的字符的字符串。
一个例子是具有三个字符的字符串“uü€”

a (U+0061)

ä (U+00E4)

€ (U+20AC)

这里只有前两个字符在范围内。
第三个字符，欧元符号，在外面， window.btoa("€")引发超出范围的错误。
为了避免这样的错误，需要在 U+0000 到 U+00FF 的集合中表示“€”。这就是 window.encodeURIComponent 所做的:
window.encodeURIComponent("uü€")创建以下字符串: "a%C3%A4%E2%82%AC"其中一些字符已被编码

a = a (保持不变)

ä = %C3%A4 (更改为 utf8 表示)

€ = %E2%82%AC (更改为 utf8 表示)

(更改为其 utf8 表示)通过使用字符“%”和字符的 utf8 表示的每个字节的两位数来工作。 "%"是 U+0025，因此允许在 btoa() 内-范围。的结果 window.encodeURIComponent("uü€")然后可以喂给 btoa()因为它不再有超出范围的字符:
btoa("a%C3%A4%E2%82%AC") \\ = "YSVDMyVBNCVFMiU4MiVBQw=="
使用 unescape() 的关键在 btoa() 之间和 encodeURIComponent()是 utf8 表示的所有字节都用完 3 个字符 %xx存储字节 0x00 到 0xFF 的所有潜在值。这里是 unescape() 可以扮演可选 Angular 色 .这是因为 unescape()接受所有这些 %xx字节并在其位置创建一个允许的 U+0000 到 0+00FF 范围内的单个 Unicode 字符。

去检查 :

btoa(encodeURIComponent("uü€"))).length // = 24

btoa(unescape(encodeURIComponent("uü€"))).length // = 8

主要区别在于减少了文本的 base64 表示的长度，代价是通过可选的 escape() 进行额外的解析。/ unescape() ，在主要是 ASCII 字符集文本的情况下，无论如何都是最小的。

要理解的主要教训是 btoa()名称有误导性，需要 Unicode U+0000 到 U+00FF 字符， encodeURIComponent()自己生成。已弃用的 escape()/ unescape()仅具有节省空间的功能，这可能是可取的，但不是必需的。 Unicode 符号 > U+00FF 的问题在这里解决为 btoa/atob Unicode problem ，其中甚至提到了在现代浏览器中将“所有 UTF8 Unicode”改进为 base64 编码的方法。