基于子字符串创建新字符串的方法：slice()、substr()、substring()

怼烎@ 2022-05-14 12:20 242阅读 0赞

ECMAScript提供了三个基于子字符串创建新字符串的方法：slice()、substr()、substring()。它们都能够截取字符串，并且不影响原始字符串。  
　　首先，用表格看一下它们的基本异同：

<table> 
 <thead> 
  <tr> 
   <th>序号</th> 
   <th>方法</th> 
   <th>slice()</th> 
   <th>substr()</th> 
   <th>substring()</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0</td> 
   <td>功能</td> 
   <td>基于子字符串创建新字符串</td> 
   <td>基于子字符串创建新字符串</td> 
   <td>基于子字符串创建新字符串</td> 
  </tr> 
  <tr> 
   <td>0.1</td> 
   <td>返回值</td> 
   <td>一个基本类型的子字符串值</td> 
   <td>一个基本类型的子字符串值</td> 
   <td>一个基本类型的子字符串值</td> 
  </tr> 
  <tr> 
   <td>0.2</td> 
   <td>对原数组的影响</td> 
   <td>不影响</td> 
   <td>不影响</td> 
   <td>不影响</td> 
  </tr> 
  <tr> 
   <td>0.3</td> 
   <td>参数1</td> 
   <td>起始位置(含)</td> 
   <td>起始位置(含)</td> 
   <td>起始位置(含)或结束位置(不含)</td> 
  </tr> 
  <tr> 
   <td>0.4</td> 
   <td>参数2</td> 
   <td>结束位置(不含)</td> 
   <td>返回的字符个数</td> 
   <td>起始位置(含)或结束位置(不含)</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>有1个参数时输出值</td> 
   <td>起始位置(含)到字符串结束</td> 
   <td>起始位置(含)到字符串结束</td> 
   <td>起始位置(含)到字符串结束</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>有2个参数时输出值</td> 
   <td>根据参数输出</td> 
   <td>根据参数输出</td> 
   <td>根据参数输出</td> 
  </tr> 
  <tr> 
   <td>2.1</td> 
   <td>输出值起始位置</td> 
   <td>参数1</td> 
   <td>参数1</td> 
   <td>参数1和参数2中较小数</td> 
  </tr> 
  <tr> 
   <td>2.2</td> 
   <td>输出值结束位置</td> 
   <td>参数2 - 1</td> 
   <td>参数1 + 参数2 - 1</td> 
   <td>参数1和参数2中较大数 - 1</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>参数1为负数<br> 被转换的值</td> 
   <td>参数1 + str.length</td> 
   <td>参数1 + str.length</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>参数2为负数<br> 被转换的值</td> 
   <td>参数2 + str.length</td> 
   <td>0</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>2个参数都为0</td> 
   <td>空字符串</td> 
   <td>空字符串</td> 
   <td>空字符串</td> 
  </tr> 
 </tbody> 
</table>

根据上面的表格，基于str字符串获取子字符串：

var str = "helloya"; //length = 7

**1. 有1个参数**

str.slice(1);  //elloya 参数：起始位置(含)  输出起始位置到结束
    str.substr(1); //elloya 参数：指定字符串的起始位置(含)  输出起始位置到结束
    str.substring(1); //elloya 参数：指定字符串的起始位置(含)  输出起始位置到结束

**2. 有2个参数**

str.slice(1, 3); //el 参数：起始位置(含)，结束位置(不含)，以第一个参数为开始位置，第二个参数为结束位置
    str.substr(1, 3); //ell 参数：起始位置(含)，返回的字符个数
    str.substring(1, 3); //el 参数：指定字符串的起始位置，结束位置(不含)，以较小数为开始位置，较大数为结束位置

**3. 参数1为负数**

str.slice(-1); //a 参数值被转换为：参数+length，此处即为-1+7=6，输出该位置到结束
    str.substr(-1); //a 第一个参数值被转换为：参数+length，此处即为-1+7=6，输出该位置到结束
    str.substring(-1); //helloya 第一个参数被转换为0，输出该位置到结束，即返回全部字符串

**4. 参数2为负数**

str.slice(1, -3); //ell 第二个参数值被转换为：参数+length，此处即为-3+7=4
    str.substr(1, -3); // 空字符串 第二个参数值被转换为0，即返回包含0个字符的字符串
    str.substring(1, -3); //h 第二个参数值被转换为0，以较小数为开始位置，较大数为结束位置，则等价于(0, 1)

**5. 2个参数都为0**

str.slice(0, 0); // 空字符串
    str.substr(0, 0); // 空字符串
    str.substring(0, 0); // 空字符串

**6. 2个参数都为负数**

str.slice(-1, -3); // 空字符串 被转换为(-1+7, -3+7)=(6, 4)，开始位置大于结束位置，返回空字符串
    str.substr(-1, -3); // 空字符串 第二个参数值被转换为0，即返回包含0个字符的字符串，不用考虑第一个参数
    str.substring(-1, -3); // 空字符串 两个参数都被转换为0，则返回空字符串