JavaScript中String的slice()，substr()，substring()三者区别

￡神魔★判官ぃ 2022-12-20 15:54 156阅读 0赞

# JavaScript中String的slice()，substr()，substring()三者区别 #

## 共同之处 ##

从给定的字符串中截取片段，并返回全新的这片段的字符串对象，且不会改动原字符串。

## 具体不同之处 ##

### slice() ###

str.slice(beginIndex[, endIndex])

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beginIndex</td> 
   <td>从该索引（以 0 为基数）处开始提取原字符串中的字符（包含）。如果值为负数，会被当做 strLength + beginIndex 看待，这里的strLength 是字符串的长度（例如， 如果 beginIndex 是 -3 则看作是：strLength - 3）</td> 
  </tr> 
  <tr> 
   <td>endIndex</td> 
   <td>可选。在该索引（以 0 为基数）处（该索引下有字符，不包含）结束提取字符串。如果省略该参数，slice() 会一直提取到字符串末尾。如果该参数为负数，则被看作是 strLength + endIndex，这里的 strLength 就是字符串的长度(例如，如果 endIndex 是 -3，则是, strLength - 3)。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

**描述**：

slice() 从一个字符串中提取字符串并返回新字符串。在一个字符串中的改变不会影响另一个字符串。也就是说，slice 不会修改原字符串（只会返回一个包含了原字符串中部分字符的新字符串）。

slice() 提取的新字符串包括beginIndex但不包括 endIndex。下面有两个例子。

例 1：str.slice(1, 4) 提取第二个字符到第四个字符（被提取字符的索引值（index）依次为 1、2，和 3）。

例 2：str.slice(2, -1) 提取第三个字符到倒数第一个字符。

--------------------

**例子**：

var str1 = 'The morning is upon us.', // str1 的长度 length 是 23。
        str2 = str1.slice(1, 8),
        str3 = str1.slice(4, -2),
        str4 = str1.slice(12),
        str5 = str1.slice(30);
    console.log(str2); // 输出：he morn
    console.log(str3); // 输出：morning is upon u
    console.log(str4); // 输出：is upon us.
    console.log(str5); // 输出：""
    
    //传入了负值作为索引
    var str = 'The morning is upon us.';
    str.slice(-3);     // 返回 'us.'
    str.slice(-3, -1); // 返回 'us'
    str.slice(0, -1);  // 返回 'The morning is upon us'

### substr() ###

str.substr(start[, length])

> **警告**： 尽管 String.prototype.substr(…) 没有严格被废弃 (as in “removed from the Web standards”), 但它被认作是遗留的函数并且可以的话应该避免使用。它并非JavaScript核心语言的一部分，未来将可能会被移除掉。如果可以的话，使用 substring() 替代它.

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>start</td> 
   <td>开始提取字符的位置。如果为负值，则被看作 strLength + start，其中 strLength 为字符串的长度（例如，如果 start 为 -3，则被看作 strLength + (-3)）。</td> 
  </tr> 
  <tr> 
   <td>length</td> 
   <td>可选。提取的字符数。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

**描述**：

start 是一个字符的索引。首字符的索引为 0，最后一个字符的索引为 字符串的长度减去1。substr 从 start 位置开始提取字符，提取 length 个字符（或直到字符串的末尾）。

1.  如果 start 为正值，且大于或等于字符串的长度，则 substr 返回一个空字符串。
2.  如果 start 为负值，则 substr 把它作为从字符串末尾开始的一个字符索引。如果 start 为负值且 abs(start) 大于字符串的长度，则 substr 使用 0 作为开始提取的索引。
3.  如果 length 为 0 或负值，则 substr 返回一个空字符串。如果忽略 length，则 substr 提取字符，直到字符串末尾。

--------------------

**例子**：

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):

### substring() ###

str.substring(indexStart[, indexEnd])

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>indexStart</td> 
   <td>需要截取的第一个字符的索引，该索引位置的字符作为返回的字符串的首字母。</td> 
  </tr> 
  <tr> 
   <td>indexEnd</td> 
   <td>可选。一个 0 到字符串长度之间的整数，以该数字为索引的字符不包含在截取的字符串内。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

**描述**：  
substring 提取从 indexStart 到 indexEnd（不包括）之间的字符。特别地：

*  如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
 *  如果省略 indexEnd，substring 提取字符一直到字符串末尾。
 *  如果任一参数小于 0 或为 NaN，则被当作 0。
 *  如果任一参数大于 stringName.length，则被当作 stringName.length。
 *  如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。见下面的例子。

--------------------

**例子**：

var anyString = "Mozilla";
    
    // 输出 "Moz"
    console.log(anyString.substring(0,3));
    console.log(anyString.substring(3,0));
    console.log(anyString.substring(3,-3));
    console.log(anyString.substring(3,NaN));
    console.log(anyString.substring(-2,3));
    console.log(anyString.substring(NaN,3));
    
    // 输出 "lla"
    console.log(anyString.substring(4,7));
    console.log(anyString.substring(7,4));
    
    // 输出 ""
    console.log(anyString.substring(4,4));
    
    // 输出 "Mozill"
    console.log(anyString.substring(0,6));
    
    // 输出 "Mozilla"
    console.log(anyString.substring(0,7));
    console.log(anyString.substring(0,10));
    
    //下面一个例子运用了 String.length 属性去获取指定字符串的倒数元素。
    //显然这个办法更容易记住，因为你不再像上面那个例子那样去记住起始位置和最终位置。
    
    // Displays 'illa' the last 4 characters
    var anyString = 'Mozilla';
    var anyString4 = anyString.substring(anyString.length - 4);
    console.log(anyString4);
    
    // Displays 'zilla' the last 5 characters
    var anyString = 'Mozilla';
    var anyString5 = anyString.substring(anyString.length - 5);
    console.log(anyString5);

## 参考资料 ##

1.  [String.prototype.slice() - JavaScript | MDN][String.prototype.slice_ - JavaScript _ MDN]
2.  [String.prototype.substr() - JavaScript | MDN][String.prototype.substr_ - JavaScript _ MDN]
3.  [String.prototype.substring() - JavaScript | MDN][String.prototype.substring_ - JavaScript _ MDN]
4.  [JavaScript中substr()，substring()，slice()区别][JavaScript_substr_substring_slice]

[String.prototype.slice_ - JavaScript _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice
[String.prototype.substr_ - JavaScript _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substr
[String.prototype.substring_ - JavaScript _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substring
[JavaScript_substr_substring_slice]: https://www.cnblogs.com/yungiu/p/11491195.html