JS中slice、substring和substr截取字符串的区别

一、核心区别概览与参数模型

为了理清这三个方法，首先需要明确它们的参数签名与数学区间定义。JavaScript 中字符串索引从 0 开始计算，且原字符串具有不可变性（Immutable），任何截取操作均不会改变原字符串，而是分配并返回一个全新的字符串。

从底层参数设计来看：

• slice(start, end)：提取从 start 索引开始到 end 索引（不包含 end 本身）的字符。当第二个参数缺省时，默认截取到字符串末尾。
• substring(start, end)：同样是基于起止索引提取字符，但它带有极强的“宽容式容错机制”——如果传入的 start > end，底层算法会自动将两者的值调换。
• substr(start, length)：设计初衷是以“起始位置 + 字符个数”的方式工作。由于与其他语言及 JS 自身的 Array.prototype.slice 命名规则易发生混淆，且在处理跨平台负数参数时历史实现不一，已于早年被标准委员会移出核心规范。

二、负数索引的处理逻辑与推导流程

在日常业务中，最常引发意外 bug 的就是负数参数。例如，开发者想要“截取掉末尾的两个字符”或“提取最后四位字符”时，三种方法的反应截然不同。

const str = "ECMAScript"; // str.length = 10

// 1. slice: 遇到负数，自动加上字符串长度 (10 + (-6) = 4, 10 + (-2) = 8)
console.log(str.slice(-6, -2));       // 输出: "aScr" (索引 4 到 8)
console.log(str.slice(-4));           // 输出: "ript" (从末尾倒数 4 个截取到结束)

// 2. substring: 不支持负数，所有负数直接归 0！
console.log(str.substring(-6, 4));    // 等价于 str.substring(0, 4) -> 输出: "ECMA"
console.log(str.substring(-6, -2));   // 等价于 str.substring(0, 0) -> 输出: ""

// 3. substr: 起点支持负数 (10 + (-4) = 6)，但长度参数不能为负数
console.log(str.substr(-4, 3));       // 从倒数第 4 个开始截取 3 个字符 -> 输出: "rip"
console.log(str.substr(2, -1));        // 长度为负数，按 0 处理 -> 输出: ""

ECMAScript 规范（ECMA-262）对参数的标准化执行步骤清晰地解释了这种差异：

1. 类型转换：所有参数均先通过 ToIntegerOrInfinity 转换为整数。如果是 NaN、null 或未提供数值，会被视为 0；
2. 负数归一化：对于 slice，若 index < 0，则将坐标重定为 Math.max(len + index, 0)；而对于 substring，任何 index < 0 的参数直接被置为 0；
3. 边界防溢出：所有计算后的索引均通过 Math.min(index, len) 钳制在字符串长度以内，保证内存安全。

三、起始索引大于结束索引时的特殊行为

另一个显著区别在于当传入的第一个参数数值大于第二个参数数值时，方法如何处理。以下通过一段具体包含标点符号和空格的字符串 "Hello, World!" 进行实测对照：

const message = "Hello, World!"; // length = 13

// 场景：start = 7, end = 2
// 1. slice 严格按照单调递增区间处理，7 > 2，左边界已超过右边界，直接返回空串
console.log(message.slice(7, 2));      // 输出: ""

// 2. substring 发现 start > end 时，内部自动调用 swap 翻转参数为 (2, 7)
console.log(message.substring(7, 2));  // 等价于 message.substring(2, 7) -> 输出: "llo, "

// 3. substr 第二个参数是长度，从 7 开始向后读取 2 个字符
console.log(message.substr(7, 2));     // 输出: "Wo"

substring() 的这一设计来自早期的容错理念：在文本选区或者鼠标拖拽框选等交互场景中，用户可能从右向左选中文字，此时起始坐标可能大于终点坐标，substring 会自动纠正次序，保证一定能截取到两个坐标之间的字符。

然而在严谨的编程与算法逻辑中，slice() 严格不翻转的行为更为安全。如果由于参数计算错误导致起点跑到了终点后面，slice() 返回空字符串能直接暴露预期不符，而 substring() 自动翻转反而会掩盖坐标计算的逻辑 bug。

四、规范现状：为什么应当彻底废弃 substr

在 ECMAScript 规范的发展历程中，String.prototype.substr() 早已被正式列为遗留特性（Legacy Features）。

彻底弃用 substr() 的技术原因包括：

• 历史跨浏览器兼容性缺陷：在早期的 IE 浏览器（IE8 及更早版本）中，substr() 的第一个参数根本不支持负数索引；传递负数会被错误地当作 0 处理。这一历史包袱使得其跨环境表现极其脆弱；
• 概念不一致：现代 JavaScript 集合类（包括 Array、TypedArray 以及 String）均以 (start, end) 作为切片抽象接口，唯独 substr 是 (start, length)，增加了团队协作的心智切换成本；
• TS/ESLint 规则预警：各大主流 ESLint 规则集（例如 eslint-plugin-unicorn 的 prefer-string-slice）均会将 substr 标记为警告或错误，自动化工具会自动提示重构。

无损平滑迁移方案

如果在维护历史存量代码时遇到了 substr，可以用 slice() 按如下数学等价关系进行无痛替换：

// 原写法的基本形式：从 start 开始截取 length 个字符
// 替换公式：str.slice(start, start + length)

// 示例 1：正数索引
str.substr(3, 5);          // 替换为:
str.slice(3, 3 + 5);      // 即 str.slice(3, 8)

// 示例 2：仅有起始位置，截取至末尾
str.substr(4);             // 替换为:
str.slice(4);

// 示例 3：负数起始位置，截取至末尾
str.substr(-4);            // 替换为:
str.slice(-4);

// 示例 4：负数起始位置，且指定长度
str.substr(-6, 4);         // 替换为:
str.slice(-6, -6 + 4);    // 即 str.slice(-6, -2)

五、工程实战场景与选型指南

在实际企业级开发中，应当如何选择最合适的字符串截取方式？结论非常清晰：在 99% 的场景下，统一使用 slice()。

常见业务场景代码模式

// 场景 1：获取文件名扩展名
const getFileExt = (filename) => {
  const dotIdx = filename.lastIndexOf(".");
  return dotIdx === -1 ? "" : filename.slice(dotIdx + 1);
};

// 场景 2：手机号/敏感信息脱敏 (隐藏中间 4 位)
const maskPhone = (phone) => {
  if (!phone || phone.length < 11) return phone;
  return phone.slice(0, 3) + "****" + phone.slice(-4);
};

// 场景 3：裁剪过长文本添加省略号
const truncateText = (text, maxLength) => {
  return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
};

六、避坑自查清单

• 不要把负数传给 substring()：如果代码中有类似 str.substring(str.indexOf(x), -1) 的写法，负数会变成 0 并触发参数翻转，实际执行等同于 str.substring(0, str.indexOf(x))，往往产生与预期完全相反的结果。
• 注意数组与字符串方法的差异：Array 实例有 slice()，但没有 substring() 和 substr()。如果误在数组对象上调用 arr.substring() 会直接抛出 TypeError: arr.substring is not a function。
• 多字节 Emoji 与 Unicode 代理对：无论是 slice 还是 substring，内部都是按 UTF-16 代码单元（Code Units）截取的。如果遇到像 "😀" 这种占用两个代码单元（Surrogate Pairs）的 Emoji，直接截取中间可能产生乱码（孤立代理项）。对于可能包含特殊 Unicode 的场景，应优先将字符串展开为字符数组 [...str].slice(...) 后再进行提取。