首頁 > web前端 > js教程 > 如何在 JavaScript 中從字串建立哈希?

如何在 JavaScript 中從字串建立哈希?

WBOY
發布: 2023-08-25 15:49:04
轉載
1456 人瀏覽過

如何在 JavaScript 中从字符串创建哈希?

在開始之前,讓我們先來了解 JavaScript 中的雜湊。哈希值也是一個字串,但它是使用特定演算法加密的。通常,我們出於安全目的使用哈希。

例如,Google 將使用者的電子郵件和密碼儲存在其資料庫中。現在,Google的員工可以出於開發目的存取他們的資料庫。但他們能從資料庫中取得使用者的電子郵件和密碼嗎?不需要,因為密碼以哈希形式存儲,為了解密密碼,員工需要我們在從密碼字串建立雜湊時使用的金鑰。

所以,透過這樣的方式,我們可以將資料轉換為哈希格式。每當我們需要將原始資料與新資料進行比較時,我們可以使用相同的演算法將新資料轉換為雜湊值,並將其與原始資料的雜湊值進行比較。我們將學習如何在 JavaScript 中從字串建立哈希。

建立一個將字串轉換為雜湊的演算法

在這種方法中,我們將建立一個自訂函數來從字串產生雜湊。我們將使用每個字串字元的 ASCII 值,執行一些運算,例如乘法、加法、減法、OR 等,並從中產生雜湊。

文法

使用者可以按照以下語法從字串產生哈希。

for (let character of str) {
   let charCode = character.charCodeAt(0);
   hashString = hashString << 5 – hashString + charCode;
   hashString |= hashString;
}
登入後複製

在上面的語法中,hashstring包含str字串的最終雜湊值。

演算法

  • 第 1 步 - 將 hashString 變數初始化為零。

  • 第 2 步 - 使用 for-of 記憶體遍歷字串。

  • 第 3 步 - 在 for-of 記憶環內,取得每個字元的 ASCII 值。

  • 步驟 4 - 之後,將 hashString 左移 5,乘以 31,然後從中減去 hashString。

  • 第 5 步 - 將字串字元的 ASCII 值加入 hashString 變數。

  • 第 6 步 - 對 hashString 變數值與自己執行 OR 運算。

  • 第 7 步 - 一旦 for 迴圈的所有迭代完成,我們就可以得到 32 位元整數的最終雜湊值。

範例 1

在下面的範例中,我們採用了不同的字串來產生它們的雜湊值。我們創建了convertToHash()函數,它以字串為參數,並實作上述演算法將其轉換為雜湊值。

使用者可以觀察輸出中表示雜湊值的 32 位元整數值。此外,我們可以觀察到它總是會為相同的字串產生相同的雜湊值。

<html>
<body>
   <h2>Creating the <i> custom hash function </i> to convert string to hash</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function convertToHash(str) {
         if (str == "") return 0;
         let hashString = 0;
         for (let character of str) {
            let charCode = character.charCodeAt(0);
            hashString = hashString << 5 - hashString;
            hashString += charCode;
            hashString |= hashString;
         }
         output.innerHTML += "The original string is " + str + "<br/>";
         output.innerHTML += "The hash string related to original string is " + hashString + "<br/>";
         return hashString;
      }
      convertToHash("Hello Users");
      convertToHash("TutorialsPoint");
   </script>
</body>
</html>
登入後複製

範例 2

在下面的範例中,我們實作了上述演算法將字串轉換為哈希,但我們使用了reduce方法而不是for迴圈。我們使用 split() 方法將字串轉換為字元陣列。

之後,我們使用了reduce()方法,並將回呼函數作為第一個參數,將0作為第二個參數,表示雜湊變數的初始值。在回調函數中,我們使用每個字元的 ASCII 值來產生雜湊值。

<html>
<body>
   <h2>Using the <i> reduce() method </i> to convert string to hash</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function hashUsingReduce(string) {
         if (string == "") return 0;
         let charArray = string.split('');
         let hash = charArray.reduce((hash, char) => ((hash << 5 - hash) + char.charCodeAt(0)) | hash, 0);
         output.innerHTML += "The original string is " + string + "<br/>";
         output.innerHTML += "The hash string related to original string is " + hash + "<br/>";
         return hash;
      }
      hashUsingReduce("JavaScript");
      hashUsingReduce("TypeScript");
   </script>
</body>
</html>
登入後複製

使用 crypto-js NPM 套件

Crpyo-js 是一個 Npm 包,其中包含從字串產生哈希的各種方法。它還包含一些解密訊息的演算法。

使用者需要使用以下指令將 crypto-js npm 套件安裝到節點專案中。

npm i crypto-js
登入後複製

文法

使用者可以按照以下語法匯入並使用crypto-js套件進行加密和解密。

var ciphertext = CryptoJS.AES.encrypt('string', 'secret key').toString();
登入後複製

在上面的語法中,我們使用了 cryptoJS 套件的 AES 模組的 encrypt() 方法。

參數

  • String - 它是字串格式的訊息或數據,用於產生哈希。

  • 秘密金鑰是演算法在產生雜湊時將使用的秘密金鑰。與哈希一樣複雜,它將產生更安全的加密文字。

範例 3

我們在下面的範例中的 NodeJs 檔案中導入了 crypto-js 套件。之後,我們存取 CryptoJs 的 AES 模組並使用 encrypt() 方法從字串產生雜湊。

使用者可以在輸出中觀察使用 AES 演算法產生的雜湊值。

var CryptoJS = require("crypto-js");
// Encrypt
var encryptedText = CryptoJS.AES.encrypt('Your Welcome!', 'This is my Secret').toString();
console.log("The hash string is " + encryptedText);
登入後複製

輸出

"The hash string is U2FsdGVkX19br0LjrHteC9+dlP2PS9dVT03IrTc9zwQ="
登入後複製

本教學教我們兩種從字串或資料產生雜湊的方法。第一種方法很簡單,無需任何金鑰即可加密文字。所以,我們不能在實際開發中使用它。

CryptoJs 套件包含用於各種演算法的各種模組。我們可以使用任何演算法的加密方法,該方法也使用加密金鑰。所以,即使知道演算法但不知道金鑰也無法解密密文。

以上是如何在 JavaScript 中從字串建立哈希?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板