【JavaScript中三个截取字符串函数用法和区别比较实例详解】在JavaScript中，处理字符串时经常需要用到截取字符串的功能。常见的三个字符串截取方法是 `substring()`、`slice()` 和 `substr()`。虽然它们都能实现字符串的截取功能，但使用方式和行为存在一些差异。以下是对这三者的详细讲解和对比。
一、
1. `substring(start, end)`
- 从 `start` 开始，到 `end` 结束（不包含 `end`）截取字符串。
- 参数不能为负数，如果传入负数则会被视为0。
- 如果 `start > end`，会自动交换位置。
2. `slice(start, end)`
- 与 `substring` 类似，但从 `start` 到 `end`（不包含 `end`）截取字符串。
- 支持负数参数，表示从字符串末尾倒数。
- 语法更灵活，适用于复杂场景。
3. `substr(start, length)`
- 从 `start` 开始，截取长度为 `length` 的字符串。
- 第二个参数是“长度”，而不是“结束位置”。
- 不支持负数参数，若传入负数会报错或行为不可预测。
二、表格对比
| 方法 | 参数说明 | 是否支持负数 | 是否可交换 start 和 end | 截取方式 | 示例 |
| `substring()` | `start`, `end` | ❌ | ✅ | 从 start 到 end | `str.substring(2, 5)` → 截取第3~4位字符 |
| `slice()` | `start`, `end` | ✅ | ✅ | 从 start 到 end | `str.slice(2, 5)` → 截取第3~4位字符 |
| `substr()` | `start`, `length` | ❌ | ❌ | 从 start 截取 length 位 | `str.substr(2, 3)` → 截取第3~5位字符 |
三、实例说明
```javascript
let str = "Hello, world!";
console.log(str.substring(2, 5)); // "llo"
console.log(str.slice(2, 5)); // "llo"
console.log(str.substr(2, 3));// "llo"
console.log(str.substring(5, 2)); // "llo"（自动交换）
console.log(str.slice(5, 2)); // ""（不交换）
console.log(str.substr(-3, 2)); // 报错或行为不确定
```
四、使用建议
- 优先选择 `slice()`：因其支持负数、兼容性好，适合大多数情况。
- 避免使用 `substr()`：因为其参数是“长度”而非“结束位置”，容易混淆。
- 谨慎使用 `substring()`：虽然简单，但在 `start > end` 时会有意想不到的行为。
通过合理选择这些字符串截取方法，可以更高效地处理字符串内容，提升代码的可读性和健壮性。
