js encode 原理

JavaScript 中的 encodeURI 和 encodeURIComponent 函数用于对 URI（统一资源标识符）进行编码，以确保它们在所有浏览器中都能安全传输。这两个函数的主要区别在于它们处理某些特殊字符的方式。

基础概念

URI: 统一资源标识符，用于标识互联网上的资源。
URL: 统一资源定位符，是URI的一种具体形式，用于指定互联网上资源的位置。

编码原理

encodeURI: 该函数将URI中的非字母数字字符转换为UTF-8编码的百分号（%）后跟两位十六进制数的形式。但是，它不会编码保留字符（如 ; , / ? : @ & = + $ #）和一些其他字符（如空格）。
encodeURIComponent: 这个函数更严格，它会编码除了字母、数字、- _ . ! ~ * ' ( ) 之外的所有字符。这使得它更适合用于编码查询参数等。

优势

安全性: 编码可以防止数据在传输过程中被误解或篡改。
兼容性: 确保URI在不同系统和浏览器中都能正确解析。

类型

全局编码: 使用 encodeURI 对整个URI进行编码。
参数编码: 使用 encodeURIComponent 对URI中的特定部分（如查询参数）进行编码。

应用场景

表单提交: 当用户输入的数据需要作为查询参数发送到服务器时。
动态生成链接: 在网页中动态创建包含用户输入的链接时。
AJAX请求: 在发送HTTP请求时，确保请求参数正确编码。

示例代码

// 使用 encodeURI 对整个URL进行编码
let uri = "https://example.com/search?q=JavaScript教程";
let encodedURI = encodeURI(uri);
console.log(encodedURI); // 输出: https://example.com/search?q=JavaScript%E6%95%99%E7%A8%8B

// 使用 encodeURIComponent 对查询参数进行编码
let param = "JavaScript教程";
let encodedParam = encodeURIComponent(param);
console.log(encodedParam); // 输出: JavaScript%E6%95%99%E7%A8%8B

// 构建新的URL
let newUrl = `https://example.com/search?q=${encodedParam}`;
console.log(newUrl); // 输出: https://example.com/search?q=JavaScript%E6%95%99%E7%A8%8B

遇到的问题及解决方法

问题: 使用 encodeURI 编码后的URL中的空格仍然存在。

原因: encodeURI 不会编码空格，而是将其转换为加号（+）。

解决方法: 如果需要将空格也进行编码，应使用 encodeURIComponent，它会将空格转换为 %20。

let urlWithSpaces = "https://example.com/search?q=JavaScript 教程";
let encodedUrl = encodeURI(urlWithSpaces);
console.log(encodedUrl); // 输出可能包含 '+'

// 使用 encodeURIComponent 解决空格问题
let encodedParamWithSpaces = encodeURIComponent("JavaScript 教程");
console.log(encodedParamWithSpaces); // 输出: JavaScript%20%E6%95%99%E7%A8%8B

通过理解这些基础概念和编码函数的工作原理，可以更有效地处理URI编码问题，确保数据的正确传输和处理。