js编码、解码函数介绍及其使用示例

在Web开发中，我们常常需要将数据进行编码或解码。比如将URL中的中文字符进行编码，或者将Base64编码后的数据进行解码成普通的数据等。下面介绍JS中的编码、解码函数及其使用示例。

URI编码、解码函数

URI编码使用encodeURIComponent()函数，该函数将字符串中的中文字符、特殊字符以及保留字符进行编码，同时保留字母、数字、下划线等常用字符。使用方式如下：

var str = "你好，world!";
var enc_str = encodeURIComponent(str); // %E4%BD%A0%E5%A5%BD%EF%BC%8Cworld%21

URI解码使用decodeURIComponent()函数，该函数将已经编码的字符串进行解码，还原成原始数据。使用方式如下：

var enc_str = "%E4%BD%A0%E5%A5%BD%EF%BC%8Cworld%21";
var str = decodeURIComponent(enc_str); // 你好，world!

Base64编码、解码函数

Base64编码采用一种方式将二进制数据编码成字符串，由于其简单、快捷，并且可以避免数据中包含特殊字符而导致传输问题，因此常被用于数据传输中。JS中Base64的编码、解码使用方式如下：

// Base64编码函数
function btoa(str) {
    return window.btoa(str);
}

// Base64解码函数
function atob(str) {
    return window.atob(str);
}

使用方式如下：

var str = "Hello，world!";
var enc_str = btoa(str); // SGVsbG8sZm9ybSE=
var dec_str = atob(enc_str); // Hello，world!

示例1：URI编码

假设有一个表单中有一项输入框，用户可以在该输入框内输入一个字符串，然后提交表单进行处理。如果用户输入了中文字符或其他特殊字符，那么这些字符需要进行编码。可以将表单数据进行如下处理：

<input type="text" id="input-data" name="input-data">
<button onclick="submitData()">提交</button>
<script>
function submitData() {
    var inputData = document.getElementById("input-data").value;
    var encData = encodeURIComponent(inputData); // 对数据进行URI编码
    // 提交表单数据
    // ...
}
</script>

示例2：Base64编码

假设我们需要将jQuery获取到的Json数据进行Base64编码，并输出到控制台中。可以将代码编写如下：

$.getJSON('url', function(data) {
    var jsonData = JSON.stringify(data); // 将Json数据转换为字符串
    var base64Data = btoa(jsonData); // 对数据进行Base64编码
    console.log(base64Data); // 输出Base64编码后的数据到控制台中
});