js slice、substring、substr、indexOf、lastIndexOf、split、join、concat、charAt的用法

Dear 丶 2022-10-02 13:46 114阅读 0赞

### 1，函数说明 ###

slice() 方法可通过指定的开始和结束位置，提取字符串的某个部分，并以新的字符串返回被提取的部分。语法如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>stringObject.slice(start, end)</code> </td> 
 </tr> 
 </tbody> 
</table>

参数说明：

*  start（必需）：规定从何处开始选取。如果是负数，那么它规定从字符串尾部开始算起的位置。也就是说，-1 指最后一个字符，-2 指倒数第二个字符，以此类推。
 *  end（可选）：规定从何处结束选取，即结束处的字符下标。如果没有指定该参数，那么截取的字符串包含从 start 到结束的所有字符。如果这个参数是负数，那么它规定的是从数组尾部开始算起的字符。

### 2，使用样例 ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>var</code>&nbsp;<code>str =&nbsp;</code><code>"0123456789"</code><code>;</code> <code>console.log(</code><code>"原始字符串："</code><code>, str);</code> &nbsp; <code>console.log(</code><code>"从索引为3的字符起一直到结束："</code><code>, str.slice(3));&nbsp;&nbsp;</code><code>//3456789</code> <code>console.log(</code><code>"从倒数第3个字符起一直到结束："</code><code>, str.slice(-3));&nbsp;&nbsp;</code><code>//789</code> &nbsp; <code>console.log(</code><code>"从开始一直到索引为5的前一个字符："</code><code>, str.slice(0,5));&nbsp;&nbsp;</code><code>//01234</code> <code>console.log(</code><code>"从开始一直到倒数第3个字符的前一个字符："</code><code>, str.slice(0,-3));&nbsp;&nbsp;</code><code>//0123456</code> &nbsp; <code>console.log(</code><code>"从索引为3的字符起到索引为5的前一个字符："</code><code>, str.slice(3,5));&nbsp;&nbsp;</code><code>//34</code> <code>console.log(</code><code>"从索引为3的字符起到倒数第3个字符的前一个字符："</code><code>, str.slice(3,-3));&nbsp;&nbsp;</code><code>//3456</code> </td> 
 </tr> 
 </tbody> 
</table>

运行结果如下：

[![原文:JS - 字符串截取方法汇总（slice、substring、substr等）][JS - _slice_substring_substr]][JS - _slice_substring_substr_JS - _slice_substring_substr]

## 二、使用 substring() 截取 ##

### 1，函数说明 ###

（1）substring 方法用于提取字符串中介于两个指定下标之间的字符。语法如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>stringObject.substring(start, stop)</code> </td> 
 </tr> 
 </tbody> 
</table>

参数说明：

*  start（必需）：一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
 *  stop（可选）：一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

返回值说明：  
该方法返回一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。

（2）注意事项：

*  如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
 *  如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。
 *  如果 start 或 end 为负数，那么它将被替换为 0。

### 2，使用样例 ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>var</code>&nbsp;<code>str =&nbsp;</code><code>"0123456789"</code><code>;</code> <code>console.log(</code><code>"原始字符串："</code><code>, str);</code> &nbsp; <code>console.log(</code><code>"从索引为3的字符起一直到结束："</code><code>, str.substring(3));&nbsp;&nbsp;</code><code>//3456789</code> <code>console.log(</code><code>"从索引为20的字符起一直到结束："</code><code>, str.substring(20));&nbsp;&nbsp;</code><code>//</code> &nbsp; <code>console.log(</code><code>"从索引为3的字符起到索引为5的前一个字符结束："</code><code>, str.substring(3,5));&nbsp;&nbsp;</code><code>//34</code> <code>console.log(</code><code>"start比end大会自动交换，结果同上："</code><code>, str.substring(5,3));&nbsp;&nbsp;</code><code>//34</code> <code>console.log(</code><code>"从索引为3的字符起到索引为20的前一个字符结束："</code><code>, str.substring(3,20));&nbsp;&nbsp;</code><code>//3456789</code> </td> 
 </tr> 
 </tbody> 
</table>

运行结果如下：

[![原文:JS - 字符串截取方法汇总（slice、substring、substr等）][JS - _slice_substring_substr 1]][JS - _slice_substring_substr_JS - _slice_substring_substr]

## 三、使用 substr() 截取 ##

### 1，函数说明 ###

substr 方法用于返回一个从指定位置开始的指定长度的子字符串。语法如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>stringObject.substr(start, length)</code> </td> 
 </tr> 
 </tbody> 
</table>

start（必需）：所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。  
length（可选）：在返回的子字符串中应包括的字符个数。

（2）注意事项：

*  如果 length 为 0 或负数，将返回一个空字符串。 
 *  如果没有指定 length，则子字符串将延续到 stringObject 的最后。
 *  如果 start 或 length 为负数，那么它将被替换为 0。

### 2，使用样例 ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>var</code>&nbsp;<code>str =&nbsp;</code><code>"0123456789"</code><code>;</code> <code>console.log(</code><code>"原始字符串："</code><code>, str);</code> &nbsp; <code>console.log(</code><code>"从索引为3的字符起一直到结束："</code><code>, str.substr(3));&nbsp;&nbsp;</code><code>//3456789</code> <code>console.log(</code><code>"从索引为20的字符起一直到结束："</code><code>, str.substr(20));&nbsp;&nbsp;</code><code>//</code> &nbsp; <code>console.log(</code><code>"从索引为3的字符起截取长度为5的字符串："</code><code>, str.substr(3,5));&nbsp;&nbsp;</code><code>//34567</code> <code>console.log(</code><code>"从索引为3的字符起截取长度为20的字符串："</code><code>, str.substr(3,20));&nbsp;&nbsp;</code><code>//3456789</code> </td> 
 </tr> 
 </tbody> 
</table>

运行结果如下：

[![原文:JS - 字符串截取方法汇总（slice、substring、substr等）][JS - _slice_substring_substr 2]][JS - _slice_substring_substr_JS - _slice_substring_substr]

## 附：其他一些常用的方法 ##

下面这些函数可以辅助我们进行字符串的截取工作。

### 1，indexOf() ###

返回字符串中匹配子串的第一个字符的下标。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>var</code>&nbsp;<code>str =&nbsp;</code><code>"JavaScript"</code><code>;</code> <code>var</code>&nbsp;<code>i1 = str.indexOf(</code><code>"a"</code><code>);&nbsp;</code><code>//1</code> <code>var</code>&nbsp;<code>i2 = str.indexOf(</code><code>"S"</code><code>);&nbsp;</code><code>//4</code> <code>var</code>&nbsp;<code>i3 = str.indexOf(</code><code>"Script"</code><code>);&nbsp;</code><code>//4</code> <code>var</code>&nbsp;<code>i4 = str.indexOf(</code><code>"k"</code><code>);&nbsp;</code><code>//-1</code> &nbsp; <code>console.log(</code><code>"原始字符串："</code><code>, str);</code> <code>console.log(</code><code>"a的索引："</code><code>, i1);</code> <code>console.log(</code><code>"S的索引："</code><code>,i2);</code> <code>console.log(</code><code>"Script的索引："</code><code>,i3);</code> <code>console.log(</code><code>"k的索引："</code><code>,i4);</code> </td> 
 </tr> 
 </tbody> 
</table>

运行结果如下：

[![原文:JS - 字符串截取方法汇总（slice、substring、substr等）][JS - _slice_substring_substr 3]][JS - _slice_substring_substr_JS - _slice_substring_substr]

### 2，lastIndexOf() ###

该方法返回从右向左出现某个字符或字符串的首个字符索引值（与 indexOf 相反）

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>var</code>&nbsp;<code>str =&nbsp;</code><code>"JavaScript"</code><code>;</code> <code>var</code>&nbsp;<code>i1 = str.lastIndexOf(</code><code>"a"</code><code>);&nbsp;</code><code>//3</code> <code>var</code>&nbsp;<code>i2 = str.lastIndexOf(</code><code>"S"</code><code>);&nbsp;</code><code>//4</code> <code>var</code>&nbsp;<code>i3 = str.lastIndexOf(</code><code>"Script"</code><code>);&nbsp;</code><code>//4</code> <code>var</code>&nbsp;<code>i4 = str.lastIndexOf(</code><code>"k"</code><code>);&nbsp;</code><code>//-1</code> </td> 
 </tr> 
 </tbody> 
</table>

### 3，split() ###

使用一个指定的分隔符把一个字符串分割存储到数组。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>var</code>&nbsp;<code>str =&nbsp;</code><code>"jpg|bmp|gif|ico|png"</code><code>;</code> <code>var</code>&nbsp;<code>arr= str.split(</code><code>"|"</code><code>);</code> <code>console.log(arr);</code> </td> 
 </tr> 
 </tbody> 
</table>

运行结果如下：

[![原文:JS - 字符串截取方法汇总（slice、substring、substr等）][JS - _slice_substring_substr 4]][JS - _slice_substring_substr_JS - _slice_substring_substr]

### 4，join() ###

使用一个指定的分隔符将一个数组合并为一个字符串。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>var</code>&nbsp;<code>arr=&nbsp;</code><code>new</code>&nbsp;<code>Array</code><code>(</code><code>"jpg"</code><code>,</code><code>"bmp"</code><code>,</code><code>"gif"</code><code>,</code><code>"ico"</code><code>,</code><code>"png"</code><code>);</code> <code>var</code>&nbsp;<code>str = arr.</code><code>join</code><code>(</code><code>"|"</code><code>);</code> <code>console.log(str);</code> </td> 
 </tr> 
 </tbody> 
</table>

运行结果如下：

[![原文:JS - 字符串截取方法汇总（slice、substring、substr等）][JS - _slice_substring_substr 5]][JS - _slice_substring_substr_JS - _slice_substring_substr]

### 5，concat() ###

将两个数组连接在一起。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>var</code>&nbsp;<code>arr1 = [1, 2, 3];</code> <code>var</code>&nbsp;<code>arr2 = [4, 5, 6];</code> <code>var</code>&nbsp;<code>arr3 = arr1.concat(arr2);</code> <code>console.log(arr3);</code> </td> 
 </tr> 
 </tbody> 
</table>

运行结果如下：

[![原文:JS - 字符串截取方法汇总（slice、substring、substr等）][JS - _slice_substring_substr 6]][JS - _slice_substring_substr_JS - _slice_substring_substr]

### 6，charAt() ###

返回指定位置的字符。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>var</code>&nbsp;<code>str =&nbsp;</code><code>"abcdefg"</code><code>;</code> <code>var</code>&nbsp;<code>char = str.charAt(2);&nbsp;&nbsp;</code><code>//c</code> <code>console.log(char);</code> </td> 
 </tr> 
 </tbody> 
</table>

运行结果如下：

[![原文:JS - 字符串截取方法汇总（slice、substring、substr等）][JS - _slice_substring_substr 7]][JS - _slice_substring_substr_JS - _slice_substring_substr]

[JS - _slice_substring_substr]: http://www.hangge.com/blog_uploads/201712/2017121414011812260.png
[JS - _slice_substring_substr_JS - _slice_substring_substr]: /images/20220112/333eec1b33a942639cec739924a93cc7.png
[JS - _slice_substring_substr 1]: http://www.hangge.com/blog_uploads/201712/2017121410362412100.png
[JS - _slice_substring_substr 2]: http://www.hangge.com/blog_uploads/201712/2017121411204061192.png
[JS - _slice_substring_substr 3]: http://www.hangge.com/blog_uploads/201712/2017121415170867078.png
[JS - _slice_substring_substr 4]: http://www.hangge.com/blog_uploads/201712/2017121414125181861.png
[JS - _slice_substring_substr 5]: http://www.hangge.com/blog_uploads/201712/2017121414162354733.png
[JS - _slice_substring_substr 6]: http://www.hangge.com/blog_uploads/201712/2017121414203573184.png
[JS - _slice_substring_substr 7]: http://www.hangge.com/blog_uploads/201712/2017121414235422432.png