JS提取字符串子串的三种方法，slice、substring、substr

在字符串的方法当中，JavaScript提供了三种方法用来提取字符串的子串的内置函数，分别是slice()函数、substring()函数和substr()函数，这三个函数的参数和用法如下：

---

slice()函数的参数和用法

slice ( start , end )

slice()函数中的第一个参数start为子串在原字符串中的起始索引位置，为闭区间，可以被获取，end为结束的索引位置，为开区间，无法被获取（索引值从0开始）。参数值可以为负，当值为负时提取的方向为倒序。除此之外，end参数可以省略。slice()函数返回被提取出来的字符串，在python和go语言当中，slice被称为切片。

slice()函数实例代码，及在线编辑器

<p>参数值为正：<span id='e1'></span></p>
<p>参数值为负：<span id='e2'></span></p>
<p>当第二个参数被忽略时：<span id='e3'></span></p>
<script>
  var str = "笨鸟工具，x1y1z1.com";
  document.getElementById("e1").innerHTML = str.slice(0,2)
  document.getElementById("e2").innerHTML = str.slice(-2,-1)
  document.getElementById("e3").innerHTML = str.slice(2)
</script>

试一试

substring()函数的参数和用法

substring ( start , end )

substring()函数的start和end两个参数同slice的用法类似，不同的地方是，substring()函数的参数不接收负值：

substring()函数实例代码，和在线编辑器

<p>参数值为正：<span id='e5'></span></p>
<p>参数值为负：<span id='e6'></span></p>
<p>当第二个参数被忽略时：<span id='e7'></span></p>
<script>
  var str = "笨鸟工具，x1y1z1.com";
  document.getElementById("e5").innerHTML = str.substring(0,2)
  document.getElementById("e6").innerHTML = str.substring(-2,-1)
  document.getElementById("e7").innerHTML = str.substring(2)
</script>

试一试

代码解析

如上代码，通过上述实例的代码运行可以发现，当传递负值参数给substring()函数时，substring()并不能像slice()函数那样提取子串。

---

substr()函数提取子串的参数和用法

substr ( start , length )

substr的第一个参数如上面的两个参数，都表示提取的子串在原字符串中的起始索引位置，与上面两个函数不同的是，substr()函数的第二个参数length值得是函数所要提取的字符串长度。如果length参数省略，substr()函数则提出从start开始到原字符串结束的部分。如果start值为负，则以倒序计算原字符串的索引位置。

substr()函数实例，及在线编辑器

<p>参数值为正：<span id='e8'></span></p>
<p>省略第二个参数length：<span id='e9'></span></p>
<p>start值为负：<span id='e10'></span></p>
<script>
  var str = "笨鸟工具，x1y1z1.com";
  document.getElementById("e8").innerHTML = str.substr(0,3)
  document.getElementById("e9").innerHTML = str.substr(2)
  document.getElementById("e10").innerHTML = str.substr(-5,2)
</script>

试一试