内容：

在JavaScript中，URI（统一资源标识符）的编码与解码是确保数据在网络上传输时不被误解或损坏的关键步骤。为了实现这一目标，JavaScript提供了四个核心函数：encodeURI()、encodeURIComponent()、decodeURI()和decodeURIComponent()。这些函数各有侧重，正确使用它们能够有效避免URI解析错误，保障数据的完整性与安全性。

一、encodeURI()与decodeURI()

encodeURI()函数用于对整个URI进行编码，它不会对URI中的特殊字符进行编码，只对非标准字符进行编码。这使得它非常适合用于编码整个URL，确保URL的结构不被破坏。例如：

const url = "http://example.com/path?name=张三&age=20";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // 输出: "http://example.com/path?name=%E5%BC%A0%E4%B8%89&age=20"

在这个例子中，encodeURI()函数成功地将中文字符“张三”编码为“%E5%BC%A0%E4%B8%89”，同时保留了URL中的其他特殊字符不变。

相对地，decodeURI()函数则用于解码由encodeURI()编码的URI，它仅还原非保留字符的编码，保留保留字符的编码。例如：

const encodedUrl = "http://example.com/path%20to%25file?q=%25test";
const decodedUrl = decodeURI(encodedUrl);
console.log(decodedUrl); // 输出: "http://example.com/path to%file?q=%25test"

在这个例子中，decodeURI()函数成功地将编码后的URL解码回原始形式，保留了URL的结构和特殊字符。

二、encodeURIComponent()与decodeURIComponent()

encodeURIComponent()函数则更为严格，它不仅对非标准字符进行编码，还对保留字符进行编码。这使得它非常适合用于编码URI的组成部分，如查询参数的值。例如：

const param = "name=张三&city=北京";
const encodedParam = encodeURIComponent(param);
console.log(encodedParam); // 输出: "name%3D%E5%BC%A0%E4%B8%89%26city%3D%E5%8C%97%E4%BA%AC"

在这个例子中，encodeURIComponent()函数成功地将中文字符“张三”和“北京”编码为“%E5%BC%A0%E4%B8%89%26city%3D%E5%8C%97%E4%BA%AC”，同时保留了URL中的其他特殊字符不变。

相对地，decodeURIComponent()函数则用于解码由encodeURIComponent()编码的字符串，它会还原所有字符的编码，包括保留字符。例如：

const encodedParam = "name%3D%E5%BC%A0%E4%B8%89%26city%3D%E5%8C%97%E4%BA%AC";
const decodedParam = decodeURIComponent(encodedParam);
console.log(decodedParam); // 输出: "name=张三&city=北京"

在这个例子中，decodeURIComponent()函数成功地将编码后的查询参数解码回原始形式，保留了查询参数的结构和特殊字符。

三、实际应用与注意事项

在实际应用中，正确使用这些函数能够有效避免URI解析错误，保障数据的完整性与安全性。例如，在构造带参数的URL时，可以使用encodeURIComponent()对参数值进行编码，然后使用encodeURI()对整个URL进行编码，最后将它们拼接起来形成完整的URL。

const baseURL = "http://example.com/search";
const query = encodeURIComponent("q=测试&page=1");
const finalURL = `${baseURL}?${query}`;
console.log(finalURL); // 输出: "http://example.com/search?q=%E6%B5%8B%E8%AF%95&page=1"

在这个例子中，encodeURIComponent()函数成功地将查询参数“q=测试”和“page=1”编码为“%E6%B5%8B%E8%AF%95&page=1”，然后encodeURI()函数将这些编码后的参数值拼接成完整的URL，确保URL的结构不被破坏。

四、总结

在JavaScript中，encodeURI()和decodeURI()用于对整个URI进行编码和解码，而encodeURIComponent()和decodeURIComponent()则用于对URI的组成部分进行编码和解码。正确使用这些函数能够有效避免URI解析错误，保障数据的完整性与安全性。在实际开发中，根据具体需求选择合适的函数进行编码和解码是非常重要的。