【JavaScript】内置对象 - 字符串对象 ③ ( 字符串常用方法 | 查找字符串子串第一次出现的位置 - indexOf | 代码示例 )

Dear 丶 2024-05-28 10:07 59阅读 0赞

#### 文章目录 ####

*  一、字符串常用方法
 *   *  1、字符串类型不可变性回顾
     *  2、查找字符串子串第一次出现的位置 - indexOf
 *  二、代码示例
 *   *  1、查找子字符串
     *  2、查找子字符串 - 指定起始查找范围
     *  3、查找子字符串出现次数及索引

**String 字符串对象参考文档 :** [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/String][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_String]

## 一、字符串常用方法 ##

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

### 1、字符串类型不可变性回顾 ###

在上一篇博客 [【JavaScript】内置对象 - 字符串对象 ② ( 字符串类型不可变性 | 字符串不可变的好处 | 字符串不可变 - 示例分析 )][JavaScript_ - _ _ _ _ _ _ _ _ - _] 中介绍了 字符串 有 " 不可变性 " ,

因此 , 所有 涉及 字符串 的方法 , 都不会改变 被操作的 字符串本身 , 而是 申请新的内存空间 , 创建新的字符串 替换原来的字符串 , 原来的字符串仍然保持不变 ;

### 2、查找字符串子串第一次出现的位置 - indexOf ###

调用 String 对象的 indexOf 方法 , 可以查找 字符串中 的 指定 子字符串 第一次出现的位置索引 ;

**indexOf 函数语法如下 :**

indexOf(searchString)
    indexOf(searchString, position)

*  searchString 参数 是 要查找的 子字符串 ;
 *  position 参数 是 在 大于 或 等于 position 位置 查找 子字符串 , 默认值是 0 ;
 *  返回值 : 返回 查找到的 searchString 字符串第一次出现的索引 , 如果没有查找到指定的子字符串 , 则返回 -1 ;

**参考文档 :** [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/String/indexOf][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_String_indexOf]

## 二、代码示例 ##

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

### 1、查找子字符串 ###

**完整代码示例 :**

**执行结果 :**

![在这里插入图片描述][89b666eb6969472ca6b4dfc6406f3a86.png]

### 2、查找子字符串 - 指定起始查找范围 ###

如果设置 查找的起始索引 , 从索引 5 开始查找 子字符串 ‘o’ , 得到的结果是 7 ;

// 创建字符串
            var str = 'Hello World';
    
            // 输出 : 7
            console.log(str.indexOf('o', 5));

**完整代码示例 :**

**执行结果 :**

![在这里插入图片描述][eaac1c2ec4de438d9cce9fdbb0da62b8.png]

### 3、查找子字符串出现次数及索引 ###

给定一个字符串 ‘Hello World’ , 查找该字符串中国年字母 o 出现的次数 , 以及出现的索引 ;

使用 indexOf 方法找到第一个 o 字符的位置 ;

如果没有找到字符 o , 则返回 -1 , 说明没有改字符 ;

如果找到了字符 o , 返回位置 index , 那么继续 在 index + 1 及之后的位置继续查找 , 直到查找不到 返回 -1 为止 ;

**完整代码示例 :**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>JavaScript</title>
        <style></style>
        <script>
            // 创建字符串
            var str = 'Hello World';
    
            // 查找第一个 o 元素
            var index = str.indexOf('o');
    
            // 存储索引的数组
            var array = [];
    
            // 将索引放到数组中
            if (index != -1) {
          
                array.push(index);
            }
    
            // 只要返回的结果不是 -1 则继续查找
            while (index != -1) {
          
                index = str.indexOf('o', index + 1);
                // 将索引放到数组中
                if (index != -1) {
          
                    array.push(index);
                }
            }
    
            // 输出 : 7
            console.log("'o' 字符串出现的次数 : " + array.length + " 次 , 索引值 : " + array);
        </script>
    </head>
    
    <body>
    </body>
    
    </html>

**执行结果 :**

![在这里插入图片描述][841818f371c74f998546a96a31247144.png]

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_String]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String
[JavaScript_ - _ _ _ _ _ _ _ _ - _]: https://blog.csdn.net/shulianghan/article/details/139048340
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_String_indexOf]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
[89b666eb6969472ca6b4dfc6406f3a86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/91445d07811e41c492f55a5a313be999.png
[eaac1c2ec4de438d9cce9fdbb0da62b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/162068e240834899aa571ae6f92432b6.png
[841818f371c74f998546a96a31247144.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/58b6452287154b35b6bcf7f62e4831ee.png