彻底搞懂字符串提取方法 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,意味着返回的字符串包含零个字符, 因而会返回一个空字符串。