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

韩曙亮

发布于 2024-05-24 10:22:50

520

发布于 2024-05-24 10:22:50

文章被收录于专栏：韩曙亮的移动开发专栏

一、字符串常用方法

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

在上一篇博客【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

二、代码示例

1、查找子字符串

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <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';

        // 输出 : 
        console.log(str.indexOf('o'));
    </script>
</head>

<body>
</body>

</html>

执行结果 :

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

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

        // 创建字符串
        var str = 'Hello World';

        // 输出 : 7
        console.log(str.indexOf('o', 5));

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <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';

        // 输出 : 7
        console.log(str.indexOf('o', 5));
    </script>
</head>

<body>
</body>

</html>

执行结果 :

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

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

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

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

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

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <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>

执行结果 :