深夜调试代码时，你是否盯着屏幕反复修改substring和slice的参数，却总得不到想要的子串？字符串截取看似简单，但不同方法的参数规则、边界条件常常让人头疼。今天，我们从实际开发场景出发，用通俗易懂的案例拆解JS字符串截取的6种核心方法，帮你彻底告别“截取焦虑”。
一、基础方法：substring、substr、slice对比
这三种方法最常用，但参数逻辑差异极大，稍不留神就会踩坑。
1. substring(startIndex, endIndex)
- 功能：截取从
startIndex到endIndex（不含）的字符。 - 特性：
- 参数为负数时自动转为0。
- 若
startIndex > endIndex，会自动交换位置。
- 示例：
javascript
let str = "Hello, World!"; console.log(str.substring(0, 5)); // 输出 "Hello"
2. substr(startIndex, length)
- 功能：从
startIndex开始截取指定长度的字符。 - 特性：
- 第二个参数为截取长度，若省略则截取到末尾。
- 负的
startIndex表示从末尾倒数。
- 示例：
javascript
console.log(str.substr(7, 5)); // 输出 "World"
3. slice(startIndex, endIndex)
- 功能：与
substring类似，但支持负数参数。 - 特性：
- 参数为负数时，从字符串末尾倒数。
- 不会自动交换参数位置。
- 示例：
javascript
console.log(str.slice(-6, -1)); // 输出 "World"
对比表格：
| 方法 | 参数规则 | 负数处理 | 是否自动调序 |
|---|---|---|---|
| substring | 起始索引, 结束索引 | 转为0 | 是 |
| substr | 起始索引, 截取长度 | 支持倒数 | 否 |
| slice | 起始索引, 结束索引 | 支持倒数 | 否 |
二、进阶技巧：split、正则与ES6新特性
1. split(separator) + 索引组合
通过分割字符串获取特定部分：
javascript
let dateStr = "2025-02-13";
let year = dateStr.split("-")[0]; // 输出 "2025"
2. 正则表达式截取
灵活匹配复杂规则，例如提取URL中的域名：
javascript
let url = "https://www.example.com/page";
let domain = url.match(/https?://([^/]+)/)[1]; // 输出 "www.example.com"
3. ES6的padStart/padEnd
严格来说不是截取方法，但可辅助格式化字符串：
javascript
let num = "5";
console.log(num.padStart(2, "0")); // 输出 "05"
三、避坑指南：开发中的高频问题
- 参数越界怎么办？
slice(-100, 100)会自动修正到有效范围，避免报错。
- 中文字符截取乱码？
- 使用
Array.from(str).slice(0,5).join("")处理Unicode字符。
- 使用
- 性能优化建议：
- 频繁截取时，优先使用
slice（性能优于substring）。
- 频繁截取时，优先使用
四、实战场景：如何选择合适的方法？
- 简单截取：用
slice（参数灵活）。 - 按长度截取：用
substr。 - 格式化处理：结合
split和正则。
结尾：你的代码可以更优雅
字符串截取就像切蛋糕——选对工具才能干净利落。下次再遇到类似需求时，不妨先画个参数逻辑图，再根据场景选择方法。如果你发现本文漏掉了某个实用技巧，欢迎在评论区分享你的“独门秘籍”！
