字符串截取的三剑客：substring, slice, substr

大家好，欢迎来到今天的编程讲座！今天我们来聊聊 JavaScript 中字符串截取的三大神器：substring, slice, 和 substr。这三位“剑客”各有千秋，擅长不同的场景。让我们一起揭开它们的神秘面纱，看看它们是如何在代码世界中大显身手的！

1. substring: 从 A 到 B

首先出场的是 substring，它是一个非常经典的字符串截取方法。substring 的工作原理是根据你提供的两个索引（起始位置和结束位置）来截取字符串。它的语法非常简单：

string.substring(start, end);

• start：表示从哪个位置开始截取（包含该位置的字符）。
• end：表示到哪个位置停止截取（不包含该位置的字符）。

关键点：

• 如果只提供一个参数，substring 会从该位置开始截取，直到字符串的末尾。
• 如果 start 大于 end，substring 会自动交换这两个参数的位置，确保从较小的索引开始截取。
• 如果提供了负数或非数字，substring 会将其视为 0。

示例代码：

let str = "Hello, World!";
console.log(str.substring(0, 5));  // 输出: "Hello"
console.log(str.substring(7));     // 输出: "World!"
console.log(str.substring(10, 5)); // 输出: "World" (自动交换了 10 和 5)
console.log(str.substring(-3, 5)); // 输出: "Hello" (-3 被视为 0)

表格对比：

参数	描述
start	必需，表示起始位置（包含）。
end	可选，表示结束位置（不包含）。

2. slice: 灵活的切片大师

接下来是 slice，它和 substring 非常相似，但有一个重要的区别：slice 支持负数索引！这意味着你可以从字符串的末尾开始截取，而不仅仅是从开头。

slice 的语法如下：

string.slice(start, end);

• start：表示从哪个位置开始截取（包含该位置的字符）。可以是正数或负数。
• end：表示到哪个位置停止截取（不包含该位置的字符）。也可以是正数或负数。

关键点：

• 如果 start 是负数，slice 会从字符串的末尾开始计算。
• 如果 end 是负数，slice 也会从字符串的末尾开始计算。
• 如果 start 大于 end，slice 不会自动交换它们，而是返回空字符串。
• 如果 end 超过了字符串的长度，slice 会截取到字符串的末尾。

示例代码：

let str = "Hello, World!";
console.log(str.slice(0, 5));    // 输出: "Hello"
console.log(str.slice(7));       // 输出: "World!"
console.log(str.slice(-6, -1));  // 输出: "Worl" (从倒数第 6 个字符开始，到倒数第 2 个字符结束)
console.log(str.slice(-3, 5));   // 输出: "" (因为 -3 > 5，返回空字符串)

表格对比：

参数	描述
start	必需，表示起始位置（包含）。可以是正数或负数。
end	可选，表示结束位置（不包含）。可以是正数或负数。

3. substr: 长度为王

最后登场的是 substr，它与前两者略有不同。substr 不是通过指定结束位置来截取字符串，而是通过指定长度来截取。它的语法如下：

string.substr(start, length);

• start：表示从哪个位置开始截取（包含该位置的字符）。
• length：表示要截取的字符数量。

关键点：

• 如果 length 是负数，substr 会将其视为 0，即不截取任何字符。
• 如果 start 是负数，substr 会从字符串的末尾开始计算。
• 如果 start 加上 length 超过了字符串的长度，substr 会截取到字符串的末尾。

示例代码：

let str = "Hello, World!";
console.log(str.substr(0, 5));   // 输出: "Hello"
console.log(str.substr(7, 5));   // 输出: "World"
console.log(str.substr(-6, 4));  // 输出: "Worl" (从倒数第 6 个字符开始，截取 4 个字符)
console.log(str.substr(10, -2)); // 输出: "" (因为长度为负数，返回空字符串)

表格对比：

参数	描述
start	必需，表示起始位置（包含）。可以是正数或负数。
length	可选，表示要截取的字符数量。如果为负数，则视为 0。

三剑客的对决：谁更胜一筹？

现在我们已经了解了 substring, slice, 和 substr 的基本用法，那么问题来了：在实际开发中，我们应该选择哪一个呢？其实，这取决于你的具体需求：

• 如果你只需要从某个位置开始截取到字符串的末尾，substring 和 slice 都可以胜任，但 slice 更灵活，因为它支持负数索引。
• 如果你需要从字符串的末尾开始截取，slice 是最佳选择，因为它可以直接使用负数索引。
• 如果你需要根据长度来截取字符串，substr 是最直观的选择，但它已经被标记为不推荐使用，因为未来的浏览器可能会不再支持它。

官方建议：

根据 MDN 文档，substr 已经被标记为非标准，并且可能在未来被移除。因此，虽然 substr 在某些场景下非常方便，但我们还是建议尽量使用 substring 或 slice 来替代它。

总结

今天我们一起探讨了 JavaScript 中字符串截取的三大方法：substring, slice, 和 substr。每种方法都有其独特的特点和适用场景：

• substring：适合从某个位置开始截取到字符串的末尾，或者从一个位置截取到另一个位置。
• slice：更加灵活，支持负数索引，可以从字符串的任意位置截取，甚至可以从末尾开始。
• substr：基于长度的截取方式，虽然方便，但已经被标记为非标准，建议谨慎使用。

希望今天的讲座能帮助你在未来的开发中更好地选择合适的字符串截取方法。如果你有任何问题，欢迎随时提问！编码愉快，我们下次再见！ 😄