【JavaScript中三个截取字符串函数用法和区别比较实例详解】在JavaScript中，处理字符串时经常需要用到截取字符串的功能。常见的三个截取字符串的函数分别是 `substring()`、`slice()` 和 `substr()`。虽然它们都能实现字符串的截取功能，但它们在参数使用、行为逻辑上存在一些差异。下面将通过实例对这三者进行详细对比。
一、函数简介
| 函数名 | 功能说明 | 是否支持负数参数 | 是否改变原字符串 |
| `substring()` | 根据起始索引和结束索引来截取字符串 | 否 | 否 |
| `slice()` | 类似于 `substring()`，但支持负数 | 是 | 否 |
| `substr()` | 根据起始索引和长度来截取字符串 | 否 | 否 |
二、函数用法详解
1. `substring(startIndex, endIndex)`
- 作用：从 `startIndex` 开始，到 `endIndex` 结束（不包括 `endIndex`）。
- 注意：
- 如果 `startIndex > endIndex`，会自动交换位置。
- 不支持负数索引。
示例：
```javascript
let str = "Hello World";
console.log(str.substring(0, 5)); // 输出 "Hello"
console.log(str.substring(6, 11)); // 输出 "World"
console.log(str.substring(5, 0)); // 输出 "Hello"（自动交换）
```
2. `slice(startIndex, endIndex)`
- 作用：与 `substring()` 类似，但可以接受负数索引。
- 注意：
- 负数表示从字符串末尾开始计算（如 `-1` 表示最后一个字符）。
- 不改变原字符串，返回新字符串。
示例：
```javascript
let str = "Hello World";
console.log(str.slice(0, 5)); // 输出 "Hello"
console.log(str.slice(6)); // 输出 "World"
console.log(str.slice(-5)); // 输出 "World"
console.log(str.slice(1, -1)); // 输出 "ello Worl"
```
3. `substr(startIndex, length)`
- 作用：从 `startIndex` 开始，截取指定长度的子字符串。
- 注意：
- 不支持负数作为结束索引，但可以接受负数作为起始位置。
- 不改变原字符串。
示例：
```javascript
let str = "Hello World";
console.log(str.substr(0, 5)); // 输出 "Hello"
console.log(str.substr(6, 5)); // 输出 "World"
console.log(str.substr(-5, 5)); // 输出 "World"
```
三、总结对比
| 特性 | substring() | slice() | substr() |
| 参数类型 | 起始、结束索引 | 起始、结束索引 | 起始、长度 |
| 支持负数 | ❌ | ✅ | ❌ |
| 自动交换位置 | ✅ | ❌ | ❌ |
| 返回值 | 新字符串 | 新字符串 | 新字符串 |
| 原字符串是否改变 | ❌ | ❌ | ❌ |
| 适用场景 | 简单截取 | 复杂索引处理 | 按长度截取 |
四、实际应用建议
- 简单截取：使用 `substring()`，适合不需要复杂索引的情况。
- 灵活索引处理：使用 `slice()`，特别是需要处理负数索引时。
- 按长度截取：使用 `substr()`，当已知要截取的字符数量时更方便。
通过合理选择这三个函数，可以更高效地处理字符串数据，提升代码可读性和维护性。希望本文能帮助你更好地理解 JavaScript 中字符串截取函数的区别与使用方法。
