JavaScript 的 Substring、Substr 和 Slice 函数使用对比

Question

String#substring() 和 String#substr()函数是一个常见的混淆来源。 即使是经验丰富的 JavaScript 开发人员有时也会混淆它们。 还有第三种获取子字符串的方法， String#slice() function ，您可能会在野外看到。 在本教程中，您将了解这 3 种在 JavaScript 中获取子字符串的方法之间的区别。

String#substring()

这 substring() 函数 是 JavaScript 中获取子字符串的最常用方法。 它需要两个参数： indexStart 和 indexEnd，它返回开始于的字符串部分 indexStart 并结束紧接在前面的字符 indexEnd， 例如：

const str = 'Twas the night before Christmas';

let indexStart = 0;
let indexEnd = 4;
str.substring(indexStart, indexEnd); // 'Twas'

str.substring(5, 14); // 'the night'

如果您不指定 indexEnd， 这 substring() 函数返回字符串的其余部分，从 indexStart.

str.substring(5); // 'the night before Christmas'

这 substring() 函数在极端情况下有一些古怪的行为：

• 如果 indexStart 或者 indexEnd 小于 0，则视为 0。
• 如果 indexEnd < indexStart，两者互换。

例如， substring(4, -1) 相当于 substring(4, 0)，这又等价于 substring(0, 4) 如下所示。

str.substring(4, -1); // 'Twas'

String#substr()

这 substr() 函数 也很常见，但在 Mozilla 的文档 。 在编写新代码时不应该使用它，但你可能会在现有的 JavaScript 项目中看到它。

substring() 和 substr() 之间的关键区别就是它 substr() 有不同的第二个参数。 第一个参数 substr() 是 start，第二个是 length，例如：

const str = 'Twas the night before Christmas';

let start = 0;
let length = 4;
// If `start === 0`, `substr()` and `substring()` are equivalent
str.substr(start, length); // 'Twas'

str.substr(5, 9); // 'the night'
'the night'.length; // 9

不像 substring()，你可以调用 substr() 带负的 start 参数，这将使 substr() 从字符串的末尾开始计数，而不是开头。 例如：

const str = 'Twas the night before Christmas';

let start = -9;
let length = 9;
str.substr(start, length); // 'Christmas'

'Christmas'.length; // 9

String#slice()

这 slice() 功能 不如 substring() 和 substr()，但是，它兼具两者的优点 substring() 和 substr()，喜欢 substring()， 这 slice() 函数将开始和结束索引作为参数，不被视为遗留函数。 喜欢 substr()， 这 slice() 函数支持负索引。 例如：

const str = 'Twas the night before Christmas';

str.slice(0, 4); // Twas
str.slice(5, 14); // the night
str.slice(-16, -10); // before
str.slice(-9); // Christmas

这 slice() 函数似乎是 3 个中的明显赢家：

• 不被视为 遗留功能
• 支持负参数
• 减少名称混淆：没有 String#splice() 这个函数