草庐IT

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

coder 2025-02-22 原文

我的名字是费斯图斯。

我需要通过 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 转换的问题。我确信它们工作得很好，但我的问题与这个特别流行的解决方案特别相关。

谢谢，

非斯都

最佳答案

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 编码的方法。

    关于javascript - 在不推荐使用 'Escape' 调用的情况下在 JavaScript 中转换为 Base64，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30631927/

    javascriptcodeencodeURIComponentbrencodingbase64

    有关javascript - 在不推荐使用 'Escape' 调用的情况下在 JavaScript 中转换为 Base64的更多相关文章

    1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

      我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

    2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

      我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

    3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

      类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

    4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

      很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

    5. ruby - 在 Ruby 中使用匿名模块 - 2

      假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

    6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

      我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

    7. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

      关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

    8. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

      我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

    9. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

      我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

    10. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

      我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

    随机推荐