【3.5JavaScript】JavaScript字符串对象

news2025/5/20 10:44:52

文章目录

- 1.获取字符串长度
- 2.大小写转换
- 3.获取某一个字符
- 4.截取字符串
- 5.替换字符串
- 6.分割字符串
- 7.检索字符串位置
- 8.例题：统计某一个字符的个数

在 JavaScript 中，对象是非常重要的知识点。对象分为两种：一种是 ”自定义对象“，另一种是 ”内置对象“。

自定义对象，指的是需要我们自己定义的对象，跟 ”自定义函数“ 是一样的道理

内置对象，指的是系统已经定义好的、可以直接使用的对象，跟 ”内置函数“ 也是一样的道理

在初学阶段，我们先来学习内置对象，然后在进阶的时候再去学习自定义对象。在 JavaScript 中，常用的内置对象有四种

字符串对象：String
数组对象：Array
日期对象：Date
数值对象：Math

这一节我们先来学习一下字符串对象的常用属性和方法

1.获取字符串长度

字符串名.length

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = "i love you";
        str.length;
        document.write(str.length);
    </script>
</head>
<body>
</body>
</html>

2.大小写转换

字符串名.toLowerCase()
字符串名.toUpperCase()

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = "I Love You";
        document.write("正常：" + str + "<br>");
        document.write("大写：" +str.toUpperCase() + "<br>");
        document.write("小写：" +str.toLowerCase());
    </script>
</head>
<body>
</body>
</html>

3.获取某一个字符

字符串名.charAt()

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = "I Love You";
        document.write(str.charAt(0) + "<br>");
        document.write(str.charAt(1) + "<br>");
        document.write(str.charAt(2) + "<br>");
    </script>
</head>
<body>
</body>
</html>

4.截取字符串

截取范围为：[ start , end )

字符串的下标是从 0 开始数的

字符串名.substring(start, end)

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = "I Love You";
        var str2 = str.substring(2, 8);
        document.write(str2);
    </script>
</head>
<body>
</body>
</html>

5.替换字符串

字符串名.replace(原字符串, 替换字符串)
字符串名.replace(正则表达式, 替换字符串)

举例：

直接使用字符串替换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = "I Love You";
        var str2 =  str.replace("Love","Hate");
        document.write(str2);
    </script>
</head>
<body>
</body>
</html>

使用正则表达式替换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = "I Love You ， He Love You ， She Love You";
        var str2 =  str.replace("Love","Hate");
        var str3 =  str.replace(/Love/g,"Hate");
        document.write(str2);
        document.write("<br>");
        document.write(str3);
    </script>
</head>
<body>
</body>
</html>

注意：使用 replace 进行替换时，只会替换匹配到的第一个，而正则表达式会将所有匹配到的进行替换

6.分割字符串

字符串名.split("分隔符")

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = "I Love You ，He Love You ，She Love You";
        var arr = str.split("，");
        document.write(arr[0] + "<br>");
        document.write(arr[1] + "<br>");
        document.write(arr[2] + "<br>");
        document.write(arr[3] + "<br>");
    </script>
</head>
<body>
</body>
</html>

7.检索字符串位置

indexOf() 方法找到指定字符串中 “首次出现” 的下标位置

lastIndexOf()方法找到指定字符串中“最后出现”的下标位置

字符串名.indexOf(指定字符串)
字符串名.lastIndexOf(指定字符串)

如果字符串中不包含 “指定字符串” 就会返回 -1

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = "I Love You ，He Love You ，She Love You";
        document.write(str.indexOf("Love")); // 2
        document.write("<br>");
        document.write(str.lastIndexOf("Love")); // 29
        document.write("<br>");
        document.write(str.lastIndexOf("love")); // -1
    </script>
</head>
<body>
</body>
</html>

8.例题：统计某一个字符的个数

找出并计算字符串"Can you can a can as a canner can can a can?"中所有 c 的个数，不区分大小写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = "Can you can a can as a canner can can a can?";
        var n = 0;
        for (var i = 0; i < str.length; i++) {
            if (str.charAt(i).toLowerCase() == "c") {
                n++;
            }
        }
        document.write("字符串中包含 " + n + " 个c");
    </script>
</head>
<body>
</body>
</html>