【JavaScript中三个截取字符串函数用法和区别比较实例详解】在JavaScript中，处理字符串时，经常会用到一些用于截取字符串的函数。其中最常用的是`substring()`、`slice()`和`substr()`这三个方法。虽然它们都可以用来从一个字符串中提取子字符串，但它们在参数使用、行为方式以及兼容性上存在一些差异。以下是对这三个函数的详细比较与总结。
一、函数简介
| 函数名称 | 描述 |
| `substring(start, end)` | 从指定的开始位置到结束位置（不包含结束位置）提取字符串。 |
| `slice(start, end)` | 从指定的开始位置到结束位置（不包含结束位置）提取字符串，支持负数索引。 |
| `substr(start, length)` | 从指定的位置开始，提取指定长度的字符串。 |
二、参数对比
| 函数名称 | 参数1（起始位置） | 参数2（结束位置或长度） | 是否支持负数索引 | 是否包含结束位置 |
| `substring()` | 必须为非负整数 | 可选，表示结束位置（不包含） | ❌ 不支持 | ✅ 包含 |
| `slice()` | 可为负数 | 可选，表示结束位置（不包含） | ✅ 支持 | ✅ 包含 |
| `substr()` | 必须为非负整数 | 表示要提取的字符数 | ❌ 不支持 | ❌ 不包含 |
三、使用示例
示例字符串：
```javascript
let str = "Hello, world!";
```
| 函数名称 | 示例代码 | 输出结果 | 说明 |
| `substring(0, 5)` | `str.substring(0, 5)` | `"Hello"` | 从索引0开始，到索引5（不包括） |
| `slice(0, 5)` | `str.slice(0, 5)` | `"Hello"` | 同`substring()`，但支持负数 |
| `substr(0, 5)` | `str.substr(0, 5)` | `"Hello"` | 从索引0开始，提取5个字符 |
| `substring(7)` | `str.substring(7)` | `"world!"` | 只提供起始位置，提取到结尾 |
| `slice(-6)` | `str.slice(-6)` | `"world!"` | 负数表示从末尾开始计算 |
| `substr(7, 5)` | `str.substr(7, 5)` | `"world"` | 从索引7开始，提取5个字符 |
| `substring(5, 0)` | `str.substring(5, 0)` | `"Hello"` | 起始位置大于结束位置时自动交换 |
| `slice(5, 0)` | `str.slice(5, 0)` | `""` | 若起始位置大于结束位置，返回空字符串 |
| `substr(5, 0)` | `str.substr(5, 0)` | `""` | 提取长度为0，返回空字符串 |
四、总结
- `substring()` 是最基础的方法，适合简单的字符串截取，但不支持负数索引。
- `slice()` 功能更强大，支持负数索引，并且在处理数组和字符串时更为灵活。
- `substr()` 更加直观，直接通过起始位置和长度来提取字符串，但在现代开发中使用频率逐渐降低。
在实际项目中，推荐优先使用 `slice()`，因为它功能全面且兼容性好。如果需要处理负数索引或复杂场景，`slice()` 是更优选择；而 `substr()` 则适用于特定需求下的简单提取操作。
五、表格总结
| 特性 | substring() | slice() | substr() |
| 支持负数索引 | ❌ | ✅ | ❌ |
| 参数含义 | start, end（end不包含） | start, end（end不包含） | start, length |
| 是否可省略第二个参数 | ✅ | ✅ | ❌ |
| 起始位置大于结束位置时 | 自动交换 | 返回空字符串 | 返回空字符串 |
| 推荐使用场景 | 简单截取 | 复杂场景、支持负数 | 旧代码或特定需求 |
通过以上对比可以看出，虽然这三种方法都能实现字符串截取的功能，但它们在使用方式和适用场景上有明显区别。合理选择合适的函数，可以提升代码的可读性和运行效率。
