彻底搞懂字符串提取方法 slice，substr，substring

ECMAScript提供了3个从字符串中提取子字符串的方法：slice()，substr()，substring()；为什么要出三个方法呢，下面就来分析这三个方法的共同点与区别。

对于两个参数都是正整数的情况下：

相同点：

• 这三个方法都返回调用他们的字符串的一个子字符串，也就是不会改变原字符串
• 都接收一到两个参数，第一个参数表示子字符串开始的位置，第二个参数表示子字符串结束的位置
• 省略第二个参数都表示提取到末尾

不同点：

• 对 slice()和 substring()而言，第二个参数是提取结 束的位置(即该位置之前的字符会被提取出来)。对 substr()而言，第二个参数表示返回的子字符串数量

let str = 'hello word';

console.log(str.slice(3)); // "lo word"
console.log(str.substr(3));  // "lo word"
console.log(str.substring(3));  // "lo word"

console.log(str.slice(3, 7));  // "lo w"
console.log(str.substring(3, 7));  // "lo w"
console.log(str.substr(3, 7));  // "lo worl"

在这个例子中，slice()、substr()和 substring()是以相同方式被调用的，而且多数情况下返 回的值也相同。如果只传一个参数 3，则所有方法都将返回"lo world"，因为"hello"中"l"位置为 3。 如果传入两个参数 3 和 7，则 slice()和 substring()返回"lo w"(因为"world"中"o"在位置 7， 不包含)，而 substr()返回"lo worl"，因为第二个参数对它而言表示返回的字符数。

当某个参数是负值的情况下：

• slice()方法将所有负值参数都当成字 符串长度加上负参数值。
• substr()方法将第一个负参数值当成字符串长度加上该值，将第二个负参数值转换为 0
• substring()方法会将所有负参数值都转换为 0

let stringValue = "hello world";

console.log(stringValue.slice(-3)); // "rld"
console.log(stringValue.substring(-3)); // "hello world"
console.log(stringValue.substr(-3)); // "rld"

console.log(stringValue.slice(3, -4)); // "lo w"
console.log(stringValue.substring(3, -4));  // "hel"
console.log(stringValue.substr(3, -4));     // "" (empty string)

这个例子明确演示了 3 个方法的差异。在给 slice()和 substr()传入负参数时，它们的返回结果 相同。这是因为-3 会被转换为 8(长度加上负参数)，实际上调用的是 slice(8)和 substr(8)。而 substring()方法返回整个字符串，因为-3 会转换为 0。

在第二个参数是负值时，这 3 个方法各不相同。slice()方法将第二个参数转换为 7，实际上相当 于调用 slice(3, 7)，因此返回"lo w"。而 substring()方法会将第二个参数转换为 0，相当于调用 substring(3, 0)，等价于 substring(0, 3)，这是因为这个方法会将较小的参数作为起点，将较 大的参数作为终点。对 substr()来说，第二个参数会被转换为 0，意味着返回的字符串包含零个字符， 因而会返回一个空字符串。