JS字符串对象笔记（五）

最新推荐文章于 2023-04-25 21:30:30 发布

忧郁火龙果

最新推荐文章于 2023-04-25 21:30:30 发布

阅读量175

点赞数

分类专栏： JS基础文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/LQlove1/article/details/125055136

版权

JS基础专栏收录该内容

48 篇文章 0 订阅

订阅专栏

一、什么是字符串对象

字符串对象就是提供了一系列的方法，可以来操作它，字符串跟字符串对象是不同的概念

二、基本包装类型

在js引擎中你声明的简单数据类型它会自动给你包装成复杂数据类型
包装成复杂数据类型过后就可以使用对象里面的一些方法

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 简单数据类型
        var str0 = '我是简单数据类型'
        console.log(str0.length);
        // 复炸数据类型
        var str = new String('我是复杂数据类型');
        console.log(str.length);
    </script>
</body>
</html>

展示结果（简单的数据类型被包装了，一样的可以使用对象里面的方法）：

请添加图片描述

三、字符串对象常用的方法（一）（根据字符查找位置）

indexOf（’ 被查找的参数 ’ ， ’ 从那个索引开始查找 '）---- 根据字符返回位置，从头开始
lastIndexOf（’ 被查找的参数 ’ ， ’ 从那个索引开始查找 '）---- 根据字符返回位置，从最后开始
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str = '0123456789';
        // 从头开始
        var gps = str.indexOf('6');
        console.log(gps);
        // 从尾开始
        var gps1 = str.lastIndexOf('6');
        console.log(gps1);
    </script>
</body>
</html>

展示结果：
在这里插入图片描述

四、字符串对象常用的方法（二）（根据位置查找字符）

charAt（索引）---- 返回字符
charCodeAt（索引）---- 返回该索引处的ascll码
str[ 索引 ] ---- 返回字符

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str = 'e是被返回的那个字符';
        var backWord = str.charAt(0);
        var backWord1 = str.charCodeAt(0);
        var backWord2 = str['0'];
        console.log(backWord);
        console.log(backWord1);
        console.log(backWord2);
    </script>
</body>
</html>

展示结果： 请添加图片描述

五、字符串对象常用的操作方法（三）（拼接摘取字符串重点）

concat（str，str…）---- 链接两个或者多个字符串
substr（index，length）---- 从索引号开始，取length个个数
slice（index1，index2）---- 取索引1到索引2 的值，但是取不到他们本身
substring（index1，index2）---- 跟slice差不多

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str0 = '刘备';
        var str1 = '关羽';
        var str2 = '张飞';
        // concat结拜三个人，拼接到一起
        var threeSenses = str0.concat(str1,str2);
        console.log(threeSenses);
        // subStr摘取除了刘备的其他两个人
        var twoSenses = threeSenses.substr(2,4);
        console.log(twoSenses);
        // slice摘取关羽出来战斗
        var gy = threeSenses.slice('2','4');
        console.log(gy);
        // substring让张飞出战
        var zf = threeSenses.substring('4','6');
        console.log(zf);
    </script>
</body>
</html>

展示结果：
请添加图片描述

六、字符串对象常用的操作方法（四）（替换）（重点）

replace（’ 被替换的字符’,‘替换的内容’）---- 替换字符串的内容

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var threeSenses = '刘备 , 诸葛亮 , 张飞';
        // replace把诸葛亮替换为关羽
        var result = threeSenses.replace('诸葛亮','关羽');
        console.log(result);
    </script>
</body>
</html>

展示结果： 请添加图片描述

七、字符串对象常用的操作方法（四）（字符串转换为数组）（重点）

split（’ 分隔符 '） ---- 字符串转换为数组的方法

代码演示：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var threeSenses = '刘备 , 关羽 , 张飞';
        // replace把诸葛亮替换为关羽
        var result = threeSenses.split(',');
        console.log(result);
    </script>
</body>
</html>

展示结果

请添加图片描述

八、总结方法

1.indexOf（’ 被查找的参数 ’ ， ’ 从那个索引开始查找 ‘）---- 根据字符返回位置，从头开始
2. lastIndexOf（’ 被查找的参数 ’ ， ’ 从那个索引开始查找 ‘）---- 根据字符返回位置，从最后开始
3. charAt（索引）---- 返回字符
4. charCodeAt（索引）---- 返回该索引处的ascll码
5. str[ 索引 ] ---- 返回字符
6. concat（str，str…）---- 链接两个或者多个字符串
7. substr（index，length）---- 从索引号开始，取length个个数
8. slice（index1，index2）---- 取索引1到索引2 的值，但是取不到他们本身
9. substring（index1，index2）---- 跟slice差不多
10. replace（’ 被替换的字符’,‘替换的内容’）---- 替换字符串的内容
11. split（’ 分隔符 '） ---- 字符串转换为数组的方法