JS中 slice、substring、substr 的区别

wanger 2017-10-15 收录于前端

一、substring()

substring()方法返回一个索引和另一个索引之间的字符串，语法如下：

str.substring(indexStart, [indexEnd])

下面有六点需要注意：

substring()从提取的字符 indexStart 可达但不包括 indexEnd

如果 indexStart 等于 indexEnd，substring()返回一个空字符串。

如果 indexEnd 省略，则将 substring()字符提取到字符串的末尾。

如果任一参数小于 0 或是 NaN，它被视为为 0。

如果任何一个参数都大于 stringName.length，则被视为是 stringName.length。

如果 indexStart 大于 indexEnd，那么效果 substring()就好像这两个论点被交换了一样；例如，str.substring(1, 0) == str.substring(0, 1)

以下是一些示例代码：

1
2
3
4
5
6
7
8
9


var str = "abcdefghij";
console.log("(1, 2): " + str.substring(1, 2)); // '(1, 2): b'
console.log("(1, 1): " + str.substring(1, 1)); // '(1, 1): '
console.log("(-3, 2): " + str.substring(-3, 2)); // '(-3, 2): ab'
console.log("(-3): " + str.substring(-3)); // '(-3): abcdefghij'
console.log("(1): " + str.substring(1)); // '(1): bcdefghij'
console.log("(-20, 2): " + str.substring(-20, 2)); // '(-20, 2): ab'
console.log("(2, 20): " + str.substring(2, 20)); // '(2, 20): cdefghij'
console.log("(20, 2): " + str.substring(20, 2)); // '(20, 2): cdefghij'

二、substr()

substr()方法返回从指定位置开始的字符串中指定字符数的字符，语法如下：

str.substr(start, [length])

下面有四点需要注意：

substr()会从start获取长度为length字符（如果截取到字符串的末尾，则会停止截取）。

如果start是正的并且大于或等于字符串的长度，则substr()返回一个空字符串。

若start为负数,则将该值加上字符串长度后再进行计算（如果加上字符串的长度后还是负数，则从 0 开始截取）。

如果length为 0 或为负数，substr()返回一个空字符串。如果length省略，则将substr()字符提取到字符串的末尾。

以下是一些示例代码：

1
2
3
4
5
6
7


var str = "abcdefghij";
console.log("(1, 2): " + str.substr(1, 2)); // '(1, 2): bc'
console.log("(-3, 2): " + str.substr(-3, 2)); // '(-3, 2): hi'
console.log("(-3): " + str.substr(-3)); // '(-3): hij'
console.log("(1): " + str.substr(1)); // '(1): bcdefghij'
console.log("(-20, 2): " + str.substr(-20, 2)); // '(-20, 2): ab'
console.log("(20, 2): " + str.substr(20, 2)); // '(20, 2): '

需要注意的是，Microsoft 的 JScript 不支持起始索引的负值。如果要使用此功能，可以使用以下兼容性代码来解决此错误：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


// only run when the substr() function is broken
if ("ab".substr(-1) != "b") {
  /**
   *  Get the substring of a string
   *  @param  {integer}  start   where to start the substring
   *  @param  {integer}  length  how many characters to return
   *  @return {string}
   */
  String.prototype.substr = (function (substr) {
    return function (start, length) {
      // call the original method
      return substr.call(
        this,
        // did we get a negative start, calculate how much it is from the beginning of the string
        // adjust the start parameter for negative value
        start < 0 ? this.length + start : start,
        length
      );
    };
  })(String.prototype.substr);
}

三、substring()与 substr()的主要区别

substring()方法的参数表示起始和结束索引，substr()方法的参数表示起始索引和要包含在生成的字符串中的字符的长度,示例如下：

1
2
3


var text = "Mozilla";
console.log(text.substring(2, 5)); // => "zil"
console.log(text.substr(2, 3)); // => "zil"

四、slice()

slice()方法返回一个索引和另一个索引之间的字符串，语法如下：

str.slice(beginIndex[, endIndex])

下面有三点需要注意：

若beginIndex为负数,则将该值加上字符串长度后再进行计算（如果加上字符串的长度后还是负数，则从 0 开始截取）。

如果beginIndex大于或等于字符串的长度，则slice()返回一个空字符串。

如果endIndex省略，则将slice()字符提取到字符串的末尾。如果为负，它被视为strLength + endIndex其中strLength是字符串的长度。

以下是一些示例代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var str = 'abcdefghij';
console.log('(1, 2): '   + str.slice(1, 2));   // '(1, 2): b'
console.log('(-3, 2): '  + str.slice(-3, 2));  // '(-3, 2): '
console.log('(-3, 9): '  + str.slice(-3, 9));  // '(-3, 9): hi'
console.log('(-3): '     + str.slice(-3));     // '(-3): hij'
console.log('(-3，-1): ' + str.slice(-3，-1));     // '(-3，-1): hi'
console.log('(0，-1): '  + str.slice(0，-1));     // '(0，-1): abcdefghi'
console.log('(1): '      + str.slice(1));      // '(1): bcdefghij'
console.log('(-20, 2): ' + str.slice(-20, 2)); // '(-20, 2): ab'
console.log('(20): '     + str.slice(20));  // '(20): '
console.log('(20, 2): '  + str.slice(20, 2));  // '(20, 2): '

参考文档 MDN web docs

目录

JS中 slice、substring、substr 的区别

一、substring()

二、substr()

三、substring()与 substr()的主要区别

四、slice()