JavaScript的編碼解碼

JavaScript是一種非常常見且重要的編程語言。編碼和解碼是JavaScript中經常使用的技術。當然,我們也可以使用其他編程語言實現這些功能,但是在本文中,我們將把JavaScript作為中心,從不同的角度來講解編碼和解碼的技術。

一、Base64編碼和解碼

Base64編碼是一種將二進制數據轉換成ASCII字符串的編碼方式。在實際應用中,Base64編碼被廣泛使用,尤其是在傳輸二進制數據或在傳統的郵件系統中。

在JavaScript中可以使用原生方法btoa進行Base64編碼,使用atob進行Base64解碼。

let str = "Hello World!";
let encoded = btoa(str);
let decoded = atob(encoded);

上述例子中,將字符串”Hello World!”進行Base64編碼後,得到的結果為”SGVsbG8gV29ybGQh”,在進行Base64解碼後,結果會恢復成原來的字符串。

二、URL編碼和解碼

如果我們需要在URL中傳遞特殊字符或非ASCII字符的話,我們就需要對其進行URL編碼。在JavaScript中,可以使用原生方法encodeURIComponent進行URL編碼,使用decodeURIComponent進行URL解碼。

let str = "https://www.example.com?$param=value";
let encoded = encodeURIComponent(str);
let decoded = decodeURIComponent(encoded);

上述例子中,將字符串”https://www.example.com?$param=value”進行URL編碼後,得到的結果為”https%3A%2F%2Fwww.example.com%3F%24param%3Dvalue”。在進行URL解碼後,結果會恢復成原來的字符串。

三、Unicode編碼和解碼

Unicode是一種字符集,它包含了全世界範圍內所有需要的字符。在JavaScript中,我們可以使用字符編碼和解碼函數實現對Unicode編碼和解碼的操作。

Unicode編碼是將字符轉換成數字表示,而Unicode解碼則是將數字表示轉換成相應的字符。

let str = "我愛編程";
let encoded = "";
let decoded = "";

for (let i = 0; i < str.length; i++) {
  encoded += "\\u" + str.charCodeAt(i).toString(16);
}

decoded = unescape(encoded.replace(/\\u/g, "%u"));

console.log(encoded);
console.log(decoded);

上述例子中,將字符串”我愛編程”進行Unicode編碼後,得到的結果為”\u6211\u7231\u7f16\u7a0b”,在進行Unicode解碼後,結果會恢復成原來的字符串。

四、JSON編碼和解碼

JSON是JavaScript Object Notation的縮寫,它是一種輕量級的數據交換格式。在JavaScript中,我們可以使用JSON.stringify將對象轉換成JSON字符串,使用JSON.parse將JSON字符串轉換成對象。

let data = {
  name: "Tom",
  age: 18,
  address: {
    city: "Beijing",
    street: "123 Main St"
  }
};

let encoded = JSON.stringify(data);
let decoded = JSON.parse(encoded);

上述例子中,將一個對象進行JSON編碼後,得到的結果為”{“name”:”Tom”,”age”:18,”address”:{“city”:”Beijing”,”street”:”123 Main St”}}”,在進行JSON解碼後,結果會恢復成原來的對象。

五、加密和解密

加密和解密是一種常見的編碼和解碼技術。在JavaScript中,我們可以使用原生方法crypto.subtle進行這些操作。

下面是一個使用AES-CBC加密和解密的例子:

async function encrypt(str, key) {
  let encoder = new TextEncoder();
  let data = encoder.encode(str);

  let iv = crypto.getRandomValues(new Uint8Array(16));

  let algorithm = {
    name: "AES-CBC",
    iv: iv
  };

  let cryptoKey = await crypto.subtle.importKey("raw", key, algorithm, false, ["encrypt"]);

  let encrypted = await crypto.subtle.encrypt(algorithm, cryptoKey, data);

  return iv.toString() + new Uint8Array(encrypted).toString();
}

async function decrypt(str, key) {
  let iv = new Uint8Array(str.substr(0, 16));
  let data = new Uint8Array(str.substr(16));

  let algorithm = {
    name: "AES-CBC",
    iv: iv
  };

  let cryptoKey = await crypto.subtle.importKey("raw", key, algorithm, false, ["decrypt"]);

  let decrypted = await crypto.subtle.decrypt(algorithm, cryptoKey, data);

  let decoder = new TextDecoder();
  return decoder.decode(decrypted);
}

let str = "Hello World!";
let key = crypto.getRandomValues(new Uint8Array(16));

encrypt(str, key).then((encrypted) => {
  console.log(encrypted);

  decrypt(encrypted, key).then((decrypted) => {
    console.log(decrypted);
  });
});

上述例子中,我們使用AES-CBC進行加密和解密,使用crypto.getRandomValues生成一個隨機秘鑰,將字符串”Hello World!”加密後,得到的結果為一個包含IV和密文的字符串,使用相同的秘鑰進行解密後,結果會恢復成原來的字符串。

六、總結

在JavaScript中,我們有很多種方法用於編碼和解碼。以上所提到的僅僅是其中的一部分。我們需要根據實際的需求來選擇合適的編碼和解碼技術,以實現我們所需要的功能。

原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/245931.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-12 13:12
下一篇 2024-12-12 13:12

相關推薦

  • 使用JavaScript日期函數掌握時間

    在本文中,我們將深入探討JavaScript日期函數,並且從多個視角介紹其應用方法和重要性。 一、日期的基本表示與獲取 在JavaScript中,使用Date對象來表示日期和時間,…

    編程 2025-04-28
  • JavaScript中使用new Date轉換為YYYYMMDD格式

    在JavaScript中,我們通常會使用Date對象來表示日期和時間。當我們需要在網站上顯示日期時,很多情況下需要將Date對象轉換成YYYYMMDD格式的字符串。下面我們來詳細了…

    編程 2025-04-27
  • JavaScript中修改style屬性的方法和技巧

    一、基本概念和方法 style屬性是JavaScript中一個非常重要的屬性,它可以用來控制HTML元素的樣式,包括顏色、大小、字體等等。這裡介紹一些常用的方法: 1、通過Java…

    編程 2025-04-25
  • CloneDeep函數在Javascript開發中的應用

    一、CloneDeep的概念 CloneDeep函數在Javascript中是一種深層克隆對象的方法,可以在拷貝對象時避免出現引用關係。使用者可以在函數中設置可選參數使其滿足多種拷…

    編程 2025-04-25
  • JavaScript中的Object.getOwnPropertyDescriptors()

    一、簡介 Object.getOwnPropertyDescriptors()是JavaScript中一個非常有用的工具。簡單來說,這個方法可以獲取一個對象上所有自有屬性的屬性描述…

    編程 2025-04-25
  • JavaScript保留整數的完整指南

    JavaScript是一種通用腳本語言,非常適合Web應用程序開發。在處理數字時,JavaScript可以處理整數和浮點數。在本文中,我們將重點關注JavaScript如何保留整數…

    編程 2025-04-25
  • JavaScript點擊事件全方位指南

    一、click事件基礎 click事件是最常用的鼠標事件之一,當元素被單擊時觸發。click事件適用於大多數HTML元素(<a>、<button>)和SVG…

    編程 2025-04-25
  • 詳解JavaScript onclick事件

    一、onclick的基礎知識 onclick事件是JavaScript中最常用的事件之一,它在用戶點擊某個HTML元素時觸發。通常我們可以通過給元素添加一個onclick屬性來綁定…

    編程 2025-04-25
  • JavaScript淺拷貝

    一、什麼是淺拷貝 在JavaScript中,淺拷貝是一種將源對象的屬性複製到目標對象中的方法。淺拷貝的實現方式有多種,包括直接賦值、Object.assign()、展開運算符、co…

    編程 2025-04-25
  • JavaScript 數組轉成字符串

    一、數組轉成字符串的基本操作 在 JS 中,將數組轉成字符串是一項最基本但也最常見的操作之一。我們可以使用 Array 類型內置的 join() 方法實現。它將數組的元素連接成一個…

    編程 2025-04-25

發表回復

登錄後才能評論