JavaScript 中 substr、substring 和 slice 的区别

JavaScript 提供了 substr()、substring() 和 slice() 三种常见的字符串截取方法。它们都能从字符串中取出一部分内容,但参数含义、对负数的处理方式和推荐程度有所不同。

这三种方法都不会修改原字符串,而是返回一个新字符串。

1. substr(start, length)

substr() 从指定位置开始,截取指定长度的字符。

ini 复制代码
const str = "JavaScript";

str.substr(4, 6); // "Script"

参数含义:

  • start:开始位置,支持负数。负数表示从字符串末尾倒数。
  • length:要截取的字符数量,可选。省略时截取到末尾。
rust 复制代码
const str = "JavaScript";

str.substr(4);     // "Script"
str.substr(-6, 6); // "Script"

注意:substr() 已被标记为遗留特性(legacy feature) ,虽然许多环境仍支持它,但新代码通常不建议使用。


2. substring(start, end)

substring() 从 start 开始截取,到 end 之前结束。end 不包含在结果中。

ini 复制代码
const str = "JavaScript";

str.substring(4, 10); // "Script"

参数含义:

  • start:开始位置。
  • end:结束位置,不包含该位置。省略时截取到末尾。
  • 参数为负数时,会按 0 处理。
  • 如果 start 大于 end,两个参数会自动交换。
vbscript 复制代码
const str = "JavaScript";

str.substring(4, 10); // "Script"
str.substring(10, 4); // "Script",参数自动交换
str.substring(-2, 4); // "Java",负数按 0 处理

这种自动交换参数的行为有时会让结果不符合直觉,使用时需要留意。


3. slice(start, end)

slice() 同样从 start 开始,截取到 end 之前结束。

ini 复制代码
const str = "JavaScript";

str.slice(4, 10); // "Script"

它与 substring() 的主要区别在于对负数的处理:

  • 负数表示从字符串末尾倒数。
  • start 大于 end 时,不会交换参数,而是返回空字符串。
  • 省略 end 时,截取到末尾。
python 复制代码
const str = "JavaScript";

str.slice(-6);     // "Script"
str.slice(4, 10);  // "Script"
str.slice(10, 4);  // ""

三者对比

方法 参数含义 负数处理 start > end 时 推荐程度
substr(start, length) 起始位置、截取长度 start 可从末尾倒数 不适用 不建议用于新代码
substring(start, end) 起始位置、结束位置(不包含) 负数按 0 处理 自动交换参数 可用
slice(start, end) 起始位置、结束位置(不包含) 从末尾倒数 返回空字符串 通常优先推荐

一个例子看清区别

vbscript 复制代码
const str = "JavaScript";

console.log(str.substr(4, 3));    // "Scr"
console.log(str.substring(4, 7)); // "Scr"
console.log(str.slice(4, 7));     // "Scr"

这个例子中三者结果相同,但参数含义不同:

  • substr(4, 3):从位置 4 开始,取 3 个字符。
  • substring(4, 7):从位置 4 取到位置 7 之前。
  • slice(4, 7):同样从位置 4 取到位置 7 之前。

如何选择?

大多数情况下,优先使用 slice():

ini 复制代码
const text = "JavaScript";
const result = text.slice(4, 10);

它的参数含义清晰,并且支持负数索引,适合从字符串末尾截取内容。substring() 在某些场景下也很有用,尤其是你明确希望负数按 0 处理时。对于旧代码中的 substr(),可以继续理解和维护,但编写新代码时通常应避免使用。

记忆口诀:

  • substr:第二个参数是"长度"。
  • substring:第二个参数是"结束位置",负数按 0 处理,参数会交换。
  • slice:第二个参数是"结束位置",负数从末尾倒数,参数不交换。
相关推荐
范同学~1 小时前
固定表头+第一列+最后一列
java·服务器·前端
zttbee2 小时前
npm install卡顿
前端·npm·node.js
Amos_Web2 小时前
Rspack 源码解析(二十七):AsyncWasmParserAndGenerator 如何把二进制变成异步模块
前端·rust
西红柿炖牛腩3542 小时前
机房电脑不能联网,怎么离线把课件里的 3D 模型压小?Draco / Meshopt 参数清单
前端·javascript·3d·性能优化·大屏端
爱喝水的小周2 小时前
实验十三 Vue 过渡与动画—电商后台消息中心实现
前端·javascript·vue.js
hunterandroid2 小时前
Navigation Component 工程落地:从单 Activity 架构到深度链接配置
android·前端
无责任此方_修行中2 小时前
如何不用括号调用 JS 的函数?
前端·javascript·node.js
kyriewen2 小时前
我数了 647 条大厂前端 JD:AI 不再只是加分项
前端·程序员·ai编程
无责任此方_修行中2 小时前
Deno 的八年:一场没逃出 Node 引力的运行时起义
前端·javascript·node.js