本文聚焦前端开发必读：JS 字符串截取方法全解析，slice、substring、substr 的差异与场景应用，帮助开发者在实际编码中快速选择合适的截取方法。通过系统对比与实例演示，读者可以更清晰地理解三者的边界、行为以及在不同场景下的选用原则。
1. 基本概念与差异点
1.1 三个方法的定义
三者都是用于从一个字符串中截取子串的常用方法，但它们的参数含义和返回行为并不完全一致。slice 接受两个下标(like begin 与 end)，substring 接受两个下标(起点与终点)，而 substr 接受起始下标和截取长度。理解参数含义是正确使用的第一步。
const s = "JavaScript 字符串截取";console.log(s.slice(2, 8)); // "vaScri"
console.log(s.substring(2, 8)); // "vaScri"
console.log(s.substr(2, 6)); // "vaScri"
关键点：slice 与 substring 在起点和终点的处理上有细微差异，而 substr 的第二个参数代表长度而非结束位置。
要点回顾：理解这三者的参数含义是正确使用的前提，避免在长度和边界上产生误差。
1.2 返回值与参数基本规则
返回值始终是子字符串，若截取的范围超出原字符串，将自动裁剪到边界。slice 和 substring 在边界处理上存在差异，导致同样的参数有时会得到不同结果。
const t = "abcdef";console.log(t.slice(1, 4)); // "bcd"
console.log(t.substring(1, 4)); // "bcd"
console.log(t.substr(1, 4)); // "bcde"
负数下标在不同方法中的行为不同：slice 支持负数下标，从字符串末尾向前计算；substring 对负数的处理将其视为 0；substr 的起始位置也支持负数但行为较为直观地从末尾计数。
console.log("abcdef".slice(-3)); // "def"
console.log("abcdef".substring(-3, 4)); // "abcd"（等同于 substring(0, 4)）
console.log("abcdef".substr(-3, 2)); // "de"
关键差异点：负数处理、长度含义、以及返回值的边界行为，是在实际实现中最容易出错的地方。
1.3 常见的边界表现差异
末尾越界和空字符串的返回在这三者之间也存在差异。slice 当 begin >= end 时会返回空字符串；substring 则会自动调整两者为较小与较大之间的区间再截取；substr 在 length 为 0 时也返回空字符串。
console.log("abcdef".slice(4, 2)); // ""
console.log("abcdef".substring(4, 2)); // "cd"
console.log("abcdef".substr(4, 2)); // "ef"
兼容性与行为演进：虽然三者在大多数现代浏览器中都能工作，但在写法上要考虑未来的可维护性，尤其是 substr 已被逐步淘汰的趋势。
2. slice 的详细用法与场景
2.1 基本截取场景
最常见的用法是从一个起始位置截取到某个结束位置之前，适用于分段处理、文本裁剪和显示逻辑中的片段获取。
你可以通过指定起点和终点来控制截取的精确范围。该方法的结果总是一个新字符串，不影响原始字符串。
const s = "Frontend Development";console.log(s.slice(0, 8)); // "Frontend"
性能与不可变性：slice 不会修改原字符串，返回的新字符串对 GC 的压力较低，适合在 UI 改变时频繁使用。
2.2 支持负索引的强大能力
负下标让你可以从字符串尾部向前计数截取，这在处理带有固定后缀的文本时非常有用。
const filename = "report_final_v2.pdf";console.log(filename.slice(-7)); // "v2.pdf"
console.log(filename.slice(-3, -1)); // "p."
负数下标的直观优势在于无需计算实际长度，就能从尾部开始定位。
2.3 与数组分割和组合的场景
slice 的多应用性不仅限于字符串，还能与数组结合使用，使得同一思路在文本和数据切片中保持一致性。
在字符串拼接与切片时，slice 让你以最小的语义成本实现片段获取，增加代码的可读性。
const path = "/user/123/profile";console.log(path.slice(0, 5)); // "/user"
console.log(path.slice(6)); // "123/profile"
3. substring 的详细用法与场景
3.1 基本行为与直观边界
substring 关注的是起点与终点之间的文本片段，它会将两个参数中的较小值作为起点、较大值作为终点来截取。
与 slice 的一个关键差别是对负数下标的处理：负数会被强制转换为 0。
const t = "substring example";console.log(t.substring(2, 8)); // "bstring"
console.log(t.substring(8, 2)); // "string"（自动排序）
参数顺序的安全性：如果你不确定谁在前，substring 会自动调整，确保得到一个有意义的区间。
3.2 起点大于终点的特殊处理
当起点大于终点时，substring 会自动纠正顺序，使得截取结果稳定且易于理解。
"abcdef".substring(5, 1); // "bcde"
避免逻辑混乱的惯例：在实现复杂截取逻辑时，使用 substring 可以减少边界错误的机会。
3.3 与 NaN、非整数的处理
传入非数值参数时，substring 会将其转换为 0，这在某些输入不确定时非常有用。
console.log("abcdef".substring("2", "4")); // "cd"
console.log("abcdef".substring(undefined, 4)); // "abcd"
类型转换的可预见性：substring 在面对不确定参数时能给予相对稳定的结果。
4. substr 的详细用法与场景
4.1 基本用法与历史定位
substr 的参数意义与前两者不同，它使用起始位置和长度来控制截取长度，而非结束位置。
在历史阶段，substr 曾被广泛使用，但逐渐被推荐替代，原因包括可预测性与实现的简化。
const s = "substr example";console.log(s.substr(2, 6)); // "str e"
与 slice/substring 的对比：substr 更强调长度而非结束位，适合在你已经知道要截取的长度时使用。
4.2 起始位置与长度的语义
起始位置决定了截取开始的索引，长度决定了要截取多少字符。
"abcdef".substr(2, 3); // "cde"
console.log("abcdef".substr(-4, 2)); // "cd"（从末尾向前计算起点）
负数起点的作用：与 slice 相似，负数起点会从字符串末端向前计算，但长度的限制仍然有效。
4.3 实践中的弃用趋势与兼容性关注
现代开发实践中，substr 的使用越来越少，因为它的语义和其他两者相比不够直观，且未来的浏览器兼容性也在逐步趋向于保留但标记为弃用。
在需要明确行为时，推荐使用 slice 或 substring 来表达意图，保持代码的一致性。
// 推荐改写
const s = "substr example";
console.log(s.slice(2, 5)); // 取代 s.substr(2, 3)
