js中substr,substring,indexOf,lastIndexOf，split，replace的用法详解

那我就为你介绍一下 Javascript 中几个常用字符串相关的方法。

1. substr

substr() 方法用于截取字符串中的任意部分，并返回截取的结果。substr() 方法有两个参数，第一个参数是起始索引位置，第二个参数是截取的长度。如果不指定第二个参数，则截取到末尾。其语法如下：

str.substr(start[, length])

示例代码：

const str = 'Hello, World!'

const subStr1 = str.substr(0, 5) // 截取 'Hello'
const subStr2 = str.substr(7)    // 截取 'World!'
const subStr3 = str.substr(-6)   // 截取 'World!'

上述代码中，subStr1 截取了字符串 str 中从索引0开始长度为5的部分，即截取了 'Hello'。subStr2 截取了字符串 str 中从索引7开始到末尾的部分，即截取了 'World!'。而 subStr3 截取了字符串 str 中从索引-6开始到末尾的部分，因为负数索引从末尾算起。

2. substring

substring() 方法用于截取字符串中的任意部分，并返回截取的结果。substring() 方法有两个参数，分别表示截取的起始位置和截取的结束位置（不包括该位置）。如果省略第二个参数，则截取到末尾。其语法如下：

str.substring(indexStart[, indexEnd])

示例代码：

const str = 'Hello, World!'

const subStr1 = str.substring(0, 5) // 截取 'Hello'
const subStr2 = str.substring(7)    // 截取 'World!'

上述代码中，subStr1 和 subStr2 与 substr() 的使用方法和结果相同。

3. indexOf

indexOf() 方法用于查找字符串中是否包含指定的子串，并返回该子串在字符串中的第一次出现的位置索引。如果没有找到，则返回 -1。其语法如下：

str.indexOf(searchValue[, fromIndex])

示例代码：

const str = 'Hello, World!'

const index1 = str.indexOf('o')      // 返回 4，第一个出现 'o' 的位置
const index2 = str.indexOf('o', 5)   // 返回 8，从索引 5 开始查找，第一个出现 'o' 的位置
const index3 = str.indexOf('foo')    // 返回 -1，不存在 'foo' 字符串

上述代码中，index1 查找 str 中第一个出现 'o' 的位置，因为第一个 'o' 的位置是索引 4，所以返回 4。index2 从索引 5 开始查找，查找到第一个出现 'o' 的位置是索引 8，因为起始位置大于或等于字符串长度，所以直接返回 -1。index3 查找字符串中有没有 'foo' 这个子串，没有则返回 -1。

4. lastIndexOf

lastIndexOf() 方法与 indexOf() 方法类似，用于查找字符串中是否包含指定的子串，并返回该子串在字符串中最后一次出现的位置索引。如果没有找到，则返回 -1。其语法如下：

str.lastIndexOf(searchValue[, fromIndex])

示例代码：

const str = 'Hello, World!'

const index1 = str.lastIndexOf('o')      // 返回 8，最后一个出现 'o' 的位置
const index2 = str.lastIndexOf('o', 5)   // 返回 4，从索引 5 开始向前查找，最后一个出现 'o' 的位置
const index3 = str.lastIndexOf('foo')    // 返回 -1，不存在 'foo' 字符串

上述代码中，index1 查找 str 中最后一个出现 'o' 的位置，因为最后一个 'o' 的位置是索引 8，所以返回 8。index2 从索引 5 开始向前查找，查找到最后一个出现 'o' 的位置是索引 4，因为起始位置小于或等于零，所以直接返回 -1。index3 查找字符串中有没有 'foo' 这个子串，没有则返回 -1。

5. split

split() 方法用于将字符串按指定的分隔符分割成数组。其语法如下：

str.split(separator[, limit])

该方法有两个参数，separator 表示分隔符，如果省略该参数，则返回的数组仅包含字符串本身。limit 表示返回的数组长度，如果省略该参数，则返回的数组长度不作限制。示例代码：

const str = 'Hello, welcome to HTMl5!'

const arr1 = str.split(' ')     // 分割字符串，使用空格作为分隔符
const arr2 = str.split(' ', 2)  // 分割字符串，使用空格作为分隔符，返回长度为2的数组

上述代码中，arr1 使用空格作为分隔符将字符串 str 分割成了一个数组，即 ["Hello,", "welcome", "to", "HTMl5!"]。arr2 同样使用空格作为分隔符分割字符串 str，但限定了返回的数组长度为2，即 ["Hello,", "welcome"]。

6. replace

replace() 方法用于字符串中的子串进行替换或删除操作，并返回替换后的新字符串。其语法如下：

str.replace(regexp|substr, newSubstr|function)

该方法有两个参数，第一个参数可以是字符串或正则表达式，表示要查找的目标子串；第二个参数可以是字符串或函数，表示替换后的新子串。如果第一个参数是正则表达式，则 replace() 方法只替换第一个匹配到的子串，如果需要替换多个匹配到的子串，需要使用全局匹配 g 模式的正则表达式。示例代码：

const str = 'Hello, welcome to HTMl5!'

const newStr1 = str.replace('HTMl5', 'JavaScript')         // 替换字符串中的 HTMl5 为 JavaScript
const newStr2 = str.replace(/HTMl5/g, 'JavaScript')       // 替换字符串中的多个 HTMl5 为 JavaScript
const newStr3 = str.replace(/(\w+)\s(\w+)/, '$2 $1')      // 将字符串中的单词位置颠倒
const newStr4 = str.replace(/\s/g, '')                    // 删除字符串中的空格

上述代码中，newStr1 将字符串中的 'HTMl5' 替换成了 'JavaScript'，即 'Hello, welcome to JavaScript!'。newStr2 将字符串中的所有 'HTMl5' 替换成了 'JavaScript'，即 'Hello, welcome to JavaScript!'。newStr3 将字符串中的一个单词位置颠倒了，即 'Hello, to welcome HTMl5!'。newStr4 将字符串中的空格全部删除了，即 'Hello,welcometoHTMl5!'。