JavaScript中slice、substring与substr截取字符串的区别详解

基本语法与共性

这三个函数都需要传入至少一个开始位置（start/index）的索引参数，以及可选的第二个参数。以下是它们的典型调用示例：

// slice: [start, stop]
"Good news, everyone!".slice(5, 9); // 'news'

// substring: [indexA, indexB]
"Good news, everyone!".substring(5, 9); // 'news'

// substr: [start, length]
"Good news, everyone!".substr(5, 4); // 'news'

1. substr：基于位置的长度提取

substr() 是从指定位置提取指定数量的字符。
参数说明：
- start：开始提取的字符索引位置。
- length：提取的字符数量（非结束索引）。

重要注意：
substr 是 ECMAScript 规范中的遗留特性（Non-standard），且在历史上对不同浏览器的兼容性处理不一致。现代浏览器允许 start 为负数（表示从尾部倒数），但在 IE8 及以下版本中，负数会被视为 0。因此，不建议在生产环境中依赖 substr 进行负数索引操作。

第1步：验证substr的行为与边界

通过以下代码观察其处理负数和越界参数的表现：

var str = "abcdefghij";
console.log(str.substr(1));       // (1): bcdefghij
console.log(str.substr(1, 2));    // (1,2): bc
console.log(str.substr(-3));      // (-3): hij (现代浏览器)
console.log(str.substr(-3, 2));   // (-3,2): hi
console.log(str.substr(20, 2));   // (20, 2): 空字符串
console.log(str.substr(-20, 2));  // (-20, 2): ab

2. substring：自动修正索引

substring() 用于提取从 indexA 到 indexB 之间的子串。
参数说明：
- indexA, indexB：均为 0 到字符串长度之间的整数。

核心特性：
- **索引自动交换**：如果 indexA > indexB，这两个参数会自动交换位置。
- **负数处理**：任何小于 0 或 NaN 的参数都会被当作 0 处理。
- **越界处理**：大于字符串长度的参数被视为字符串长度值。

第2步：测试substring的参数交换与归零规则

通过反向输入参数或无效数值来验证其容错机制：

var anyString = "Mozilla";

// 参数自动交换，结果相同
console.log(anyString.substring(0, 3));   // "Moz"
console.log(anyString.substring(3, 0));   // "Moz"

// 越界处理
console.log(anyString.substring(7, 4));   // "lla" (等价于 substring(4, 7))
console.log(anyString.substring(0, 10));  // "Mozilla" (10被截断为7)

3. slice：支持负数索引的标准方法

slice() 是提取字符串一部分的首选标准方法。
参数说明：
- beginSlice：开始提取的位置。
- endSlice（可选）：结束提取的位置（不包含该位置字符）。

核心特性：
- **支持负数**：负数索引表示从字符串末尾倒数。例如，-1 代表最后一个字符。
- **计算公式**：
- 若 beginSlice < 0，实际起始索引 = sourceLength + beginSlice。
- 若 endSlice < 0，实际结束索引 = sourceLength + endSlice。

第3步：利用slice进行相对位置截取

利用负数索引可以更灵活地截取字符串片段，无需手动计算长度：

var str = "The morning is upon us.";
console.log(str.slice(4, -2));    // "morning is upon u" (排除最后2个字符)
console.log(str.slice(-3));       // "us." (最后3个字符)
console.log(str.slice(-3, -1));   // "us" (最后第3个到第2个字符)
console.log(str.slice(0, -1));    // "The morning is upon us" (排除最后1个字符)

总结与最佳实践

• 首选 slice：在现代 JavaScript 开发中，slice() 是最推荐的方法。它行为符合直觉，且原生支持负数索引，兼容性好。
• 慎用 substr：由于其在旧版 IE 中的不标准实现及作为遗留特性的地位，应尽量避免使用，尤其是涉及负数索引时。
• 理解 substring：当需要忽略参数大小顺序或使用绝对正索引时可用，但其将负数强制转为 0 的行为容易导致难以排查的逻辑错误。

以上就是JavaScript中slice、substring与substr截取字符串的详细对比内容，更多关于JavaScript字符串处理的资料请关注本站其它相关文章！