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:第二个参数是"结束位置",负数从末尾倒数,参数不交换。
相关推荐
古茗前端团队2 小时前
由 key 引发的思考
前端·javascript·react.js
kyriewen2 小时前
我扫了 422 个仓库,近一半 CI 在裸装依赖
前端·javascript·程序员
鹏多多2 小时前
AI 到底能不能独立做个产品?我拿一个小程序验证了
前端·微信小程序·ai编程
火山引擎开发者社区2 小时前
构建专属的飞书群开发助手,AgentKit Studio 一键部署 DeepSeek Harness Super-Agent
前端
啾咪orJIUMI4 小时前
Vue 3 + 高德地图封装实战:点位、区域、Loca 流光与 Vue 信息窗体
前端·vue.js
掘金者阿豪4 小时前
AI数据库不只是向量检索:从数据语义到库内智能计算的技术演进
前端
梦里寻码4 小时前
我用 NestJS + Vue3 写了一套完整的研发管理系统(58 表 / 229 API / 130 项断言,全开源
前端·后端·算法
FRing034 小时前
vue2干货总结8(路由模块封装、router-link、声明式导航、路由重定向、编程式导航)
开发语言·前端·vue.js·vue2
SameX5 小时前
HarmonyOS ArkUI Dialog 复用 用 @CustomDialog + enum type 做多类型统一管理的做法
前端
AiMan5 小时前
豆包爱学还是不可以导出左侧所有对话,只能单容导出,方法不对吗
前端