详解JS截取字符串的三个方法substring,substr,slice
本文详细解析JavaScript中三种字符串截取方法substring、substr和slice的用法与区别。重点对比参数含义、负数处理机制及边界行为，通过控制台示例说明各方法在正负索引、小数转换及字符串参数下的具体表现，帮助开发者准确选择合适的方法。
JavaScript提供了三种用于截取字符串的方法，分别是substring()、substr()和slice()。尽管这些方法在日常开发中频繁使用，但开发者往往容易混淆它们的具体行为，尤其是substring()与substr()之间，由于名称相似，更需仔细辨析其差异。
相同点
这三种方法均能对字符串执行截取操作，并返回一个全新的字符串对象。关键特性在于，它们都不会修改原始字符串的内容，符合不可变字符串的设计原则。
以下示例中，符号 > 代表控制台输入命令，< 代表控制台输出结果，后续内容沿用此标识方式。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(1,5)
< "12345"
> a
< "0123456789" //没有发生改变不同点
这三种方法的核心差异主要体现在参数定义及其解释逻辑上。
substring
substring() 方法旨在提取字符串中位于两个指定索引位置之间的字符序列。
语法
string.substring(start,stop)参数
| 参数 | 描述 |
|---|---|
| start | 必需。一个 非负的整数 ，规定要提取的子串的第一个字符在string中的位置。 |
| stop | 可选。一个 非负的整数 ，比要提取的子串的最后一个字符在string中的位置多 1。 如果省略该参数，那么返回的子串会一直到字符串的结尾。 |
说明
1.substring() 返回的子字符串包含 start 索引处的字符，但不包含 stop 索引处的字符。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(1,5)
< "1234"2.若参数 start 与 stop 的值相等，该方法将返回一个空字符串（即长度为 0）。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(1,1)
< ""3.如果 start 的值大于 stop，该方法会在提取子串前自动交换这两个参数的位置。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(5,1)
//=>a.substring(1,5)
< "1234"4.若 start 或 stop 为负数，该方法会将其自动转换为 0，随后继续执行上述规则。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(5,-1)
//=> a.substring(5,0)
//=> a.substring(0,5)
< "1234"5.若 start 或 stop 为正小数（负数已按第4条处理），该方法会对参数执行向下取整操作，随后继续执行上述规则。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(5,2.5)
//=> a.substring(5,2)
//=> a.substring(2,5)
< "234"6.若 start 或 stop 为字符串，该方法会先调用 parseInt() 进行转换；若转换结果为 NaN，则将其视为 0，其余情况继续执行上述规则。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(5,'2.5')
//=> a.substring(5,2)
//=> a.substring(2,5)
< "234"
> a.substring(5,'ss')
//=> a.substring(5,NaN)
//=> a.substring(5,0)
//=> a.substring(0,5)
< "01234"其他边缘情况未逐一测试，但在正常开发中应避免此类用法，因为语法规范已明确参数应为整数。
substr
substr() 方法用于从字符串中指定起始索引 start 开始，抽取指定数量 length 的字符。
语法
string.substr(start,length)参数
| 参数 | 描述 |
|---|---|
| start | 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。 |
| length | 可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从string的开始位置到结尾的字串。 |
说明
该方法与 substring() 最大的区别在于第二个参数代表截取的长度，而非结束位置。
1.substr() 返回的子串从 start 索引处的字符开始（包含该字符），向后截取 length 长度的字符；若超出字符串末尾，则截取至末尾为止。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(1,5)
< "12345"
> a.substr(1,15)
// 只会到最末端，多了没用
< "123456789"2.start 参数支持负值，表示从字符串尾部向前计数（从右向左，注意计数从1开始，例如 -1 指代字符串的最后一个字符）；但截取方向始终从左向右，若超出末尾则截至末尾。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(-4,2)
// -4表示从右开始数第4个，就是'6'，然后取2个长度的字符串，就是'67'
< "67"3.如果 length 为负值，该方法会将其视为 0 处理，最终返回空字符串 ""。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(4,-2)
//=> a.substr(4,0)
< ""4.如果 start 或 length 为小数，该方法会截取其整数部分。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(1.2,5.2)
//=> a.substr(1,5)
< "12345"5.如果 start 或 length 为字符串，该方法会先调用 parseInt() 进行转换；若转换结果为 NaN，则将其视为 0，其余情况继续执行上述规则。
//chrome控制台
> var a = '0123456789'
< undefined
> a.substr('aa','5')
//=> a.substr(0,5)
< "01234"slice
slice() 方法用于提取字符串的指定部分，并返回一个新的字符串，包含从 start 到 end（不包括 end）的所有字符。
语法
string.slice(start,end)参数
| 参数 | 描述 |
|---|---|
| start | 必须。要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。 |
| end | 可选。紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括start到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。 |
说明
该方法的两个参数均表示位置坐标，与 substring 类似，但主要区别在于支持负数索引，且不会交换参数位置，始终严格按照从 start 到 end 的顺序提取；若该区间无效（即 start 在 end 之后），则返回空字符串 ''。
1.slice() 返回的子串包含 start 索引处的字符，但不包含 end 索引处的字符。
//chrome控制台
> var a = '0123456789'
< undefined
> a.slice(1,5)
< "1234"2.当 start 或 end 为负值时，定位方式与 substr 相同，即从右向左计数，从1开始。
//chrome控制台
> var a = '0123456789'
< undefined
> a.slice(1,-1)
//起始点从第1（包括）开始，结束点为从右往左数第1个（不包括）
< "12345678"3.start 到 end 的提取方向始终是从左向右；如果最终计算出的 start 位置在 end 位置的右侧，则返回空字符串 ''。
//chrome控制台
> var a = '0123456789'
< undefined
> a.slice(2,1)
//2所在的位置是'2'，1所在的位置是'1'，从2=>1，方向相反，返回为空
< ""
> a.slice(-2,1)
//-2所在的位置是'8'，1所在的位置是'1'，从8=>1，方向相反，返回为空
< ""
> a.slice(-2,-1)
//-2所在的位置是'8'，-1所在的位置是'9'，从8=>9，方向正常，返回为'8'
< "8"4.其他类型转换情况（如小数、字符串）的处理方式与 substring 一致。
//chrome控制台
> var a = '0123456789'
< undefined
> a.slice('xx','5.5')
// => a.slice(0,5)
< "01234"总结一下
根据上述测试得出结论：substring 不支持负值索引，而 substr 和 slice 均支持负数表示，且负数均从字符串右侧第一位开始计数。
substr 的第二个参数表示截取长度，这是与其他两种方法最大的不同之处。
slice 的方向性较强，始终严格按照从 start 到 end（对应从左到右）的顺序进行提取。
以上结论均在最新谷歌浏览器环境下测试得出，IE 和火狐浏览器未进行额外测试。
到此这篇关于详解JS截取字符串的三个方法substring,substr,slice的文章就介绍到这了,更多相关JS截取字符串内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式：声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23