在 JavaScript 里处理字符串时，经常需要提取开头的一部分内容，比如截取手机号前三位判断运营商、截取日期字符串的年月部分、或者生成短标题预览。String 对象提供了多个用于截取的方法，其中 substring、slice 和 substr 是最常用的三个。它们都能实现取前几位字符的功能，但参数含义和边界处理方式并不相同，如果混淆使用，很容易得到空字符串或者意料之外的结果。
一、substring 方法截取前几位
substring 是 String 原型上的方法，语法为str.substring(start, end)。它从 start 位置开始截取，一直到 end 位置结束，但不包含 end 对应的字符。如果只传入一个参数，则从该位置一直截取到字符串末尾。要截取前几位，通常写成str.substring(0, n)，这里的 n 就是需要保留的字符个数。例如要截取字符串前 5 位，可以这样写：
const str = "Hello World"; const result = str.substring(0, 5); console.log(result); // "Hello"
substring 有一个比较特殊的规则：当 start 大于 end 时，方法会自动交换两个参数的位置。比如str.substring(5, 0)与str.substring(0, 5)的结果完全一样，都会返回前 5 个字符。另外，如果传入负数或者 NaN，substring 会把这些值当作 0 处理。因此str.substring(-3, 5)等价于str.substring(0, 5)。这种宽容的处理方式虽然不会报错，但也容易掩盖参数传递错误，调试时需要格外注意。
在实际项目中，substring 常用于从固定格式字符串中提取前缀。比如截取身份证号前 6 位来获取行政区划代码，或者从商品编号中提取类别前缀。由于 substring 在所有主流浏览器以及 Node.js 中都有稳定支持，兼容性非常好。不过它不支持负数索引，无法直接从字符串末尾反向截取，这是它的一个明显局限。
二、slice 方法截取前几位
slice 的语法与 substring 非常相似，也是str.slice(start, end)，返回从 start 到 end（不含 end）的子字符串。要截取前几位，同样使用str.slice(0, n)。下面的代码从字符串 JavaScript 中提取前 4 个字符，得到 Java：
const str = "JavaScript"; const prefix = str.slice(0, 4); console.log(prefix); // "Java"
slice 与 substring 最大的不同在于对负数参数的处理。slice 会把负数转换为字符串长度加上该负数。例如str.slice(-3)表示从倒数第 3 个字符开始截取到末尾。如果传入str.slice(-5, 2)，第一个参数 -5 转换为 11 + (-5) = 6（假设字符串长度为 11），此时 start 为 6，end 为 2，由于 start 大于 end，slice 不会交换参数，而是直接返回空字符串。因此使用 slice 截取前几位时，参数顺序必须正确。
由于 slice 支持负数索引且不会自动交换参数，它的行为比 substring 更加可预测，也更符合大多数开发者的直觉。此外，数组的 slice 方法也遵循同样的参数规则，掌握一个方法可以同时应对字符串和数组的截取需求。在现代 JavaScript 开发中，slice 通常是截取字符串的首选方案，除非需要依赖 substring 的自动交换特性。
三、substr 方法截取前几位
substr 是一个比较早期的方法，语法为str.substr(start, length)。与前面两个方法不同，它的第二个参数表示要截取的字符长度，而不是结束位置索引。截取前几位时调用str.substr(0, n)即可，其中 n 就是需要的位数。示例代码：
const str = "Hello World"; const first5 = str.substr(0, 5); console.log(first5); // "Hello"
substr 的第一个参数也支持负数，表示从字符串末尾开始计数。例如str.substr(-5, 3)会从倒数第 5 个字符开始，截取 3 个字符。但如果第二个参数是负数，则会返回空字符串。这种长度语义在阅读代码时比较直观，可以一眼看出要截取多少个字符，而不需要手动计算 end 位置。
需要注意的是，substr 已经被 ECMAScript 规范标记为废弃特性。虽然现代浏览器和 Node.js 仍然保留了对它的实现，但未来可能会被移除，并且在严格模式或某些打包工具中可能出现警告。因此不建议在新项目中使用 substr，维护旧代码时如果遇到它，也建议逐步替换为 slice 或 substring。
四、三种方法对比与选择建议
下面通过一个表格直观对比 substring、slice 和 substr 在关键特性上的差异：
| 方法 | 第二个参数含义 | 负数参数处理 | 是否自动交换参数 | 当前状态 |
|---|---|---|---|---|
| substring | 结束位置索引（不含） | 当作 0 | 是 | 稳定 |
| slice | 结束位置索引（不含） | 支持反向计数 | 否 | 推荐使用 |
| substr | 截取字符长度 | 第一个参数支持负数，第二个负数返回空 | 否 | 已废弃 |
如果只是截取字符串前几位，三个方法都能完成任务，但推荐优先使用 slice。slice 的语义清晰，参数行为一致，且与数组的 slice 用法相同，学习和维护成本更低。substring 虽然兼容性好，但自动交换参数和负数归零的规则可能掩盖错误，适合对参数顺序要求不高的场景。substr 由于已经废弃，除非必须兼容非常老旧的浏览器，否则尽量不要使用。
从性能角度看，这三个方法的时间复杂度都与截取长度成正比，对于普通业务中的短字符串来说差异可以忽略不计。真正影响代码质量的是可读性和可维护性。明确每个方法的参数含义，并在团队内部统一使用 slice 作为主要截取手段，可以有效减少因参数错误导致的字符串结果异常。处理用户输入或接口返回的字符串时，建议先做类型判断，确保目标值是字符串类型，再调用截取方法，避免出现 TypeError。
JavaScript字符串截取substringslice修改时间：2026-09-25 21:08:42