js substring 用法详解:截取字符串的正确姿势

2026-11-11 0 2

js substring 是什么

substring() 是 JavaScript 字符串原型上的方法,用于按索引截取两个位置之间的字符,返回一个新字符串,不修改原字符串。

const str = “abcdefg”;

str.substring(1, 4); // “bcd”

起始索引包含,结束索引不包含,这与数组 slice 的区间习惯一致。

参数规则要记牢

省略第二个参数

只传一个参数时,从该索引截到字符串末尾:

“abcdefg”.substring(3); // “defg”

自动交换位置

这是 js substring 最容易被忽视的特性:当第一个参数大于第二个参数时,方法会自动交换两者,而不是返回空字符串。

“abcdefg”.substring(4, 1); // “bcd”

负数与超界处理

负数参数会被当作 0 处理,超过长度的参数会被截到 length:

“abcdefg”.substring(-2, 3); // “abc”

“abcdefg”.substring(2, 99); // “cdefg”

这意味着 substring 不会因为负数而报错,也不会返回空串。若需要负数从末尾计算,应该改用 slice。

与 slice、substr 的区别

| 方法 | 负数参数 | 参数顺序 | 第二个参数含义 |

| — | — | — | — |

| substring | 视为 0 | 自动交换 | 结束索引 |

| slice | 从末尾计算 | 不交换 | 结束索引 |

| substr | 从末尾计算 | 不交换 | 截取长度 |

实际选择时:需要“从末尾倒着取”用 slice;需要明确“取几个字符”用 substr;只是按两个索引区间截取,substring 足够直观。注意 substr 在部分规范讨论中被标记为遗留方法,新代码中更推荐 slice 和 substring。

常见使用场景

截取固定前缀或后缀

const code = “USER_10086”;

code.substring(0, 4); // “USER”

code.substring(5); // “10086”

配合 indexOf 取片段

const url = “https://example.com/path”;

const start = url.indexOf(“//”) + 2;

url.substring(start); // “example.com/path”

先判断 indexOf 是否为 -1,可以避免无匹配时得到意外结果。

容易踩的坑

第一,参数顺序写反时 substring 会“悄悄纠正”,看似友好,实则掩盖了逻辑错误,排查时反而更费劲。第二,索引基于 UTF-16 编码单元,遇到 emoji 等代理对字符时,一个字符可能占两个索引,直接按索引截取可能把字符截断。处理用户输入的文本时,可考虑 Array.from(str) 或 Intl.Segmenter 按字形切分。

小结

js substring 规则简单但细节不少:省略参数截到末尾、参数倒序自动交换、负数按 0 处理。理解这些行为,再结合 slice 和 substr 的差异按需选用,就能在字符串截取时少踩坑。

看过这篇文章的人,推荐看以下内容

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

版权声明:所有的源码、软件和资料,不得使用于非法商业用途,不得违反国家法律,一切关于该资源商业行为与本站无关。

免费cms模板 建站百科 js substring 用法详解:截取字符串的正确姿势 https://www.mianfeicms.com/12466.html

我是签名

下一篇:

已经没有下一篇了!

相关文章

猜你喜欢
发表评论
暂无评论