」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何在 JavaScript 中將字串編碼和解碼為 Base64?

如何在 JavaScript 中將字串編碼和解碼為 Base64?

發佈於2024-11-08
瀏覽:631

How to Encode and Decode Strings to Base64 in JavaScript?

在JavaScript 中將字串編碼和解碼為Base64

處理二進位資料時,通常需要將其編碼為更方便的格式字串表示。 Base64 是一種流行的編碼方案,它將二進位資料表示為一串可列印字元。這使得在 Web 應用程式和其他場景中傳輸和儲存資料變得更加容易。

在 JavaScript 中將字串編碼為 Base64

要在 JavaScript 中將字串編碼為 Base64,您可以使用 btoa() 函數。函數接受一個字串作為參數,並傳回一個 Base64 編碼的字串。

範例:

const encodedString = btoa('This is a string');
console.log(encodedString); // Outputs: VGhpcyBpcyBhIHN0cmluZw==

將Base64 編碼的字串解碼為字串

要將Base64 編碼的字串為字串

要將Base64 編碼的字串字串回字串,您可以使用atob() 函數。函數接受 Base64 編碼的字串作為參數,並傳回原始字串。

const decodedString = atob('VGhpcyBpcyBhIHN0cmluZw==');
console.log(decodedString); // Outputs: This is a string

const demodString = atob('VGhpcyBpcyBhIHN0cmluZw==' ); console.log(decodedString); // 輸出:這是一個字串

理解btoa() 和atob()

需要注意的是,btoa()接受表示8 位元位元組的字串。如果您使用的字元無法以 8 位元表示,則可能需要在套用 btoa() 之前對字串進行編碼。

另一方面,atob() 傳回表示 8 位元位元組的字串,其中可能不適合所有應用。如果您需要處理文字數據,您可能需要考慮進一步解碼。
  • 有關更多資訊和替代方法,您可以探索以下資源:
  • MDN網路文件:atob().
MDN 網路文件: btoa()

.How to Encode and Decode Strings to Base64 in JavaScript?

最新教學 更多>
  • 如何在Python中為共享模組創建命名空間包?
    如何在Python中為共享模組創建命名空間包?
    在Python 中創建命名空間包以進行共享模組分發簡介在Python 中,命名空間包是分發相關模組的便捷方法。它們使多個 Python 產品能夠在同一命名空間中定義模組,從而允許最終用戶無縫導入它們。 實作命名空間包Python 3.3 中的隱式命名空間包從Python 3.3開始,引入了隱式命名空...
    程式設計 發佈於2024-11-08
  • 資料庫設計中「n:m」和「1:n」關係有什麼不同?
    資料庫設計中「n:m」和「1:n」關係有什麼不同?
    資料庫設計:闡明「n:m」與「1:n」關係的意義在資料庫設計領域,實體之間的關係是根本性的。理解用於描述這些關係的符號對於創建健壯且高效的資料庫結構至關重要。兩個常見的符號是「n:m」和「1:n」。 n:m 關係:多對多連結An "n :m」關係表示兩個表之間的多對多關係。這意味著一個表中...
    程式設計 發佈於2024-11-08
  • 如何在 CSS 中縮排後續換行標籤行?
    如何在 CSS 中縮排後續換行標籤行?
    縮排換行標籤文字的後續行當面臨表單寬度的限制時,標籤文字可以換行到多行,從而美觀的擔憂。雖然第一行由於輸入元素的存在而縮進,但後續行可能不會縮進,從而產生不均勻的外觀。 要僅使用CSS 實現縮排的第二行和後續行,請考慮使用以下方法:要僅使用CSS 實現縮排的第二行和後續行,請考慮使用以下方法:將輸入...
    程式設計 發佈於2024-11-08
  • 掌握 CSS 中的 box-shadow:快速指南
    掌握 CSS 中的 box-shadow:快速指南
    CSS 中的 box-shadow 屬性是開發人員向 HTML 元素引入深度和維度的有效機制。透過將陰影合併到元素中,可以增強使用者介面的真實感和視覺吸引力。本文將深入探討 box-shadow 的基礎知識,並提供範例來幫助您掌握其應用程式。 了解基礎 box-shadow 屬性...
    程式設計 發佈於2024-11-08
  • 冒煙測試:快速且有效率的品質檢查
    冒煙測試:快速且有效率的品質檢查
    冒煙測試是軟體測試中至關重要的初始階段,旨在快速識別可能阻止進一步測試或開發的關鍵缺陷。它充當安全網,確保軟體在投入大量資源進行更全面的測試工作之前處於穩定狀態。 了解冒煙測試 冒煙測試是一種高級測試套件,用於驗證軟體應用程式的基本功能。它專注於核心功能,並確保應用程式可以啟動、導航和使用,而不...
    程式設計 發佈於2024-11-08
  • 避免程式碼中的錯誤:Moment.js 中的變異方法與非變異方法
    避免程式碼中的錯誤:Moment.js 中的變異方法與非變異方法
    使用 Moment.js 時,必須了解哪些方法變更原始日期物件以及哪些方法傳回新值。這可以幫助您避免程式碼中出現意外的副作用。這是一個快速指南: ?改變原始日期物件的方法: startOf(unit) — 將日期設定為指定單位的開始日期(例如,「年」、「月」、「日」)。 endOf(unit) —...
    程式設計 發佈於2024-11-08
  • SQL 中的反引號與單引號:主要區別是什麼以及何時應該使用它們?
    SQL 中的反引號與單引號:主要區別是什麼以及何時應該使用它們?
    SQL 查詢中的反引號與單引號在CodeIgniter 手冊摘錄中,提到$this->db->select ( ) 方法接受可選的第二個參數以停用欄位和表格名稱的反引號保護。這就提出了三個問題:1。反引號(`)和單引號(')有什麼不同? MySQL中反引號引用名稱,而單引號括住字串。使用不帶...
    程式設計 發佈於2024-11-08
  • MLP-混合器(理論)
    MLP-混合器(理論)
    TL;DR - This is the first article I am writing to report on my journey studying the MPL-Mixer architecture. It will cover the basics up to an intermed...
    程式設計 發佈於2024-11-08
  • 為什麼需要類型保護?探索不同類型及其用例
    為什麼需要類型保護?探索不同類型及其用例
    為什麼需要型別保護?探索不同類型及其用例 在 TypeScript 中,類型保護在使程式碼庫更加可靠、對開發人員更友善方面發揮著重要作用。它們透過允許開發人員縮小類型來幫助確保類型安全,這有助於減少運行時錯誤並使程式碼更易於理解和維護。 什麼是型別保護? 類型保護是對類型執行運行時檢查的函數表達...
    程式設計 發佈於2024-11-08
  • 如何在 CSS 中將 Div 置中
    如何在 CSS 中將 Div 置中
    彈性盒: .container { display: flex; justify-content: center; align-items: center; height: 300px; } 網格 .container { display: gr...
    程式設計 發佈於2024-11-08
  • z-index如何控制網頁上的元素堆疊?
    z-index如何控制網頁上的元素堆疊?
    揭開z-index 的神秘面紗:綜合指南z-index 屬性在確定z-index 的堆疊順序方面起著關鍵作用網頁上的元素。然而,其複雜性可能會引起疑問。讓我們深入研究 z-index 的真正運作方式並解決一些關鍵查詢。 z-index 的功能每個網頁都包含一堆稱為堆疊上下文的元素。 z-Index ...
    程式設計 發佈於2024-11-08
  • Flex 專案是區塊級還是 Flex 級?深入研究 CSS 佈局
    Flex 專案是區塊級還是 Flex 級?深入研究 CSS 佈局
    Flex 專案令人困惑的本質:區塊級還是 Flex 等級? Flex 專案是否是區塊級的問題一直是CSS 開發者之間的爭論。 CSS 靈活框佈局模組等級 1 規定 Flex 項目位於 Flex 級別,而不是區塊級別。然而,後面的部分顯示彈性項目的顯示值是「塊化」的。這就提出了一個問題:Flex 專案...
    程式設計 發佈於2024-11-08
  • 如何在 PHP 中防止「通知:會話已啟動」?
    如何在 PHP 中防止「通知:會話已啟動」?
    避免通知:會話已經開始在PHP 中使用會話時,必須意識到以下潛在錯誤:如果會話在啟動後嘗試再次啟動,則會發生此情況。當程式碼中的會話管理不當時,可能會出現此錯誤「注意:會話已啟動 - 忽略 session_start()」。 為了避免此通知,檢查會話是否已啟動至關重要。在嘗試啟動新的之前已初始化。這...
    程式設計 發佈於2024-11-08
  • Python 3.3 中 Yield from Syntax 的實際應用和功能是什麼?
    Python 3.3 中 Yield from Syntax 的實際應用和功能是什麼?
    Yield From 語法在Python 3.3 中的實際應用建立透明的資料交換yield from 語法在呼叫者和被呼叫者之透明的資料交換yield from 語法在呼叫者和被呼叫者之透明的資料交換def reader(): "Simulates reading data fro...
    程式設計 發佈於2024-11-08
  • 在 Python 中使用標準化剪切 (NCut) 進行無監督影像分割的指南
    在 Python 中使用標準化剪切 (NCut) 進行無監督影像分割的指南
    介绍 图像分割在理解和分析视觉数据方面起着至关重要的作用,而归一化剪切(NCut)是一种广泛使用的基于图的分割方法。在本文中,我们将探索如何使用 Microsoft Research 的数据集在 Python 中应用 NCut 进行无监督图像分割,重点是使用超像素提高分割质量。 数...
    程式設計 發佈於2024-11-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3