如何正确地使用encodeURI()对 URL 进行编码

encodeURI() 方法详解

在 Web 开发中，处理 URL 时经常需要对 URL 进行编码，以确保 URL 的有效性和安全性。JavaScript 提供了 encodeURI() 方法来实现这一功能。本文将详细介绍 encodeURI() 方法，包括其语法、使用场景以及代码示例。

encodeURI() 方法概述

encodeURI() 方法用于对整个 URI 进行编码。它会对 URI 中的特殊字符进行编码，以便在网络上传输时不产生歧义。与 encodeURIComponent() 方法不同的是，encodeURI() 不会对 URI 中的特殊字符（如 :, /, ?, # 等）进行编码，因为这些字符在 URI 中有特定的语法意义。

语法：

encodeURI(uri)

• 参数：

  • uri：要进行编码的 URI 字符串。

• 返回值：

  • 编码后的 URI 字符串。

encodeURI() 的使用场景

1. 构建查询字符串

   场景： 你需要将用户输入的查询字符串添加到 URL 中，并确保 URL 是有效的。

   示例代码：

   const baseUrl = 'https://example.com/search';
   const query = 'JavaScript 编码示例';
   const encodedQuery = encodeURI(query);
   const fullUrl = `${baseUrl}?query=${encodedQuery}`;
   console.log(fullUrl); // 输出: "https://example.com/search?query=JavaScript%20%E7%BC%96%E7%A0%81%E7%A4%BA%E4%BE%8B"
   

   在这个示例中，encodeURI() 用于编码查询字符串部分，以便它可以安全地附加到 URL 中。

2. 在动态 URL 中包含特殊字符

   场景： 你需要将包含特殊字符的动态数据（如路径参数）插入到 URL 中。

   示例代码：

   const baseUrl = 'https://example.com/profile';
   const userId = '用户123';
   const profileUrl = `${baseUrl}/${encodeURI(userId)}`;
   console.log(profileUrl); // 输出: "https://example.com/profile/%E7%94%A8%E6%88%B7123"
   

   这里，encodeURI() 将 userId 中的特殊字符编码为百分号编码格式，以确保它可以正确地作为 URL 的一部分。

3. 处理包含非 ASCII 字符的 URL

   场景： 你需要将非 ASCII 字符（如中文字符）包含在 URL 中。

   示例代码：

   const baseUrl = 'https://example.com/商品';
   const item = '中文商品';
   const itemUrl = `${baseUrl}/${encodeURI(item)}`;
   console.log(itemUrl); // 输出: "https://example.com/%E4%B8%AD%E6%96%87%E5%95%86%E5%93%81"
   

   在这个例子中，encodeURI() 将中文字符编码为百分号编码，以便它能够正确地嵌入到 URL 中。

encodeURI() 与 encodeURIComponent() 的区别

• encodeURI() : 用于编码整个 URI。它不会对 :、/、?、# 等 URI 特殊字符进行编码，因为这些字符具有特定的语法意义。
• encodeURIComponent() : 用于编码 URI 的某一部分（如查询字符串）。它会对所有非字母数字字符进行编码，包括 URI 特殊字符。

注: encodeURI 会替换所有的字符，但不包括以下字符

示例对比：

const uri = 'https://example.com/path?name=John Doe&age=25';

// 使用 encodeURI()
const encodedURI = encodeURI(uri);
console.log(encodedURI); // 输出: "https://example.com/path?name=John%20Doe&age=25"

// 使用 encodeURIComponent()
const encodedURIComponent = encodeURIComponent(uri);
console.log(encodedURIComponent); // 输出: "https%3A%2F%2Fexample.com%2Fpath%3Fname%3DJohn%20Doe%26age%3D25"

如上所示，encodeURIComponent() 对所有的特殊字符进行编码，而 encodeURI() 则保持了 URI 的结构和语法。

总结

encodeURI() 是一个在构建和处理 URL 时非常有用的方法。它确保整个 URI 的有效性，尤其是在处理包含特殊字符或非 ASCII 字符的 URL 时。了解如何正确使用 encodeURI() 和 encodeURIComponent() 可以帮助你创建更安全、有效的 Web 应用程序。