js中escape,encodeURI,encodeURIComponent三个函数的区别

封面图 • 2025-09-17 • JavaScript

在 JavaScript 中，`escape()`, `encodeURI()`, 和 `encodeURIComponent()` 都是用于对字符串进行编码的函数，但它们的用途和行为有所不同。下面是它们的区别：

---

### 1. `escape()`

**功能**：  
将字符串转换为 URI 编码（即用 `%xx` 的形式表示非 ASCII 字符），但**不适用于整个 URI**。

**特点**：
- 不推荐使用（已过时）。
- 对空格、特殊字符（如 `+`, `#`, `?`, `&` 等）进行编码。
- 编码方式与 `encodeURIComponent()` 不同。

**示例**：

```javascript
escape("Hello World!") // "Hello%20World%21"
escape("http://example.com") // "http%3A%2F%2Fexample.com"
```

⚠️ **注意**：`escape()` 已被弃用，建议使用 `encodeURIComponent()` 或 `encodeURI()` 替代。

---

### 2. `encodeURI()`

**功能**：  
对整个 URI 进行编码，**不会对 URI 中已经存在的保留字符（如 `:`, `/`, `?`, `&`, `=`, `#` 等）进行编码**。

**适用场景**：  
当你需要对一个完整的 URI（比如 `http://example.com/path?query=1`）进行编码时使用。

**示例**：

```javascript
encodeURI("http://example.com?name=John Doe") 
// 输出: "http://example.com?name=John%20Doe"
```

✅ **优点**：适合对整个 URI 编码，不会破坏 URI 的结构。

---

### 3. `encodeURIComponent()`

**功能**：  
对 URI 的**某个部分**（如参数值）进行编码，**会对所有保留字符（包括 `:`, `/`, `?`, `&`, `=`, `#` 等）进行编码**。

**适用场景**：  
当你需要对 URI 的某一部分（例如查询参数）进行编码时使用。

**示例**：

```javascript
encodeURIComponent("John Doe") // "John%20Doe"
encodeURIComponent("http://example.com") // "http%3A%2F%2Fexample.com"
```

✅ **优点**：适合对 URL 参数等进行编码，确保安全传输。

---

### 总结对比表

| 函数             | 是否推荐 | 是否对保留字符编码 | 适用场景                     |
|------------------|----------|---------------------|------------------------------|
| `escape()`       | ❌ 过时   | 是                  | 不推荐使用                   |
| `encodeURI()`    | ✅ 推荐   | 否                  | 对整个 URI 编码              |
| `encodeURIComponent()` | ✅ 推荐   | 是                  | 对 URI 的某一部分（如参数）编码 |

---

### 使用建议：

- 如果你要构建一个完整的 URI（如拼接 URL），使用 `encodeURI()`。
- 如果你要对 URL 的某一部分（如参数）进行编码，使用 `encodeURIComponent()`。
- 不要使用 `escape()`，它已被废弃。

---

如果你有具体应用场景，我可以帮你选择最合适的函数。