【JavaScript中三个截取字符串函数用法和区别比较实例详解】在 JavaScript 中，处理字符串时经常需要用到截取字符串的函数。其中最常用的三个函数是 `substring()`、`substr()` 和 `slice()`。虽然它们都能实现字符串的截取功能，但它们的参数含义、行为逻辑以及使用场景都有所不同。以下是对这三个函数的详细对比与总结。
一、函数概述
| 函数名 | 功能描述 | 是否支持负数参数 | 是否修改原字符串 |
| `substring()` | 从起始索引到结束索引（不包含）截取字符串 | 否 | 否 |
| `substr()` | 从起始索引开始，截取指定长度的字符串 | 是 | 否 |
| `slice()` | 从起始索引到结束索引（不包含）截取字符串 | 是 | 否 |
二、函数用法详解
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(7, 12)); // 输出 "world"
```
2. `substr(startIndex, length)`
- 功能：从 `startIndex` 开始，截取长度为 `length` 的字符串。
- 特点：
- 支持负数参数，表示从末尾倒数。
- 如果 `length` 为负数，会被忽略。
- 示例：
```javascript
let str = "JavaScript is fun";
console.log(str.substr(0, 4)); // 输出 "Java"
console.log(str.substr(-3, 3)); // 输出 "fun"
```
3. `slice(startIndex, endIndex)`
- 功能：从 `startIndex` 开始，截取到 `endIndex`（不包括 `endIndex`）的子字符串。
- 特点：
- 支持负数参数，表示从末尾倒数。
- 如果 `startIndex > endIndex`，结果为空字符串。
- 示例：
```javascript
let str = "Programming";
console.log(str.slice(0, 3)); // 输出 "Pro"
console.log(str.slice(-3)); // 输出 "ing"
```
三、函数对比总结表
| 特性 | `substring()` | `substr()` | `slice()` |
| 参数个数 | 2个（start, end） | 2个（start, length） | 2个（start, end） |
| 是否支持负数 | 不支持 | 支持 | 支持 |
| 结果是否包含 end | 不包含 | 不包含 | 不包含 |
| 起始索引大于 end | 自动交换 | 返回空字符串 | 返回空字符串 |
| 是否修改原字符串 | 否 | 否 | 否 |
| 更适合哪种场景 | 简单的字符串截取 | 需要指定长度的截取 | 多种复杂情况的截取 |
四、使用建议
- 如果你只需要简单地根据起始和结束索引截取字符串，推荐使用 `slice()`，因为它更灵活且支持负数参数。
- 若你需要根据起始索引和长度来截取字符串，可以使用 `substr()`，但要注意其兼容性问题（部分旧浏览器可能不支持）。
- `substring()` 适用于不需要负数参数的场景，语法简单明了，适合初学者使用。
五、结语
在实际开发中，选择合适的字符串截取方法可以提升代码的可读性和效率。虽然 `substring()`、`substr()` 和 `slice()` 都能完成字符串截取任务，但它们的行为差异较大，理解这些差异有助于避免常见错误，提高编程质量。