前端研习录（22）——JavaScript字符串及其方法合集

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入JavaScript字符串部分

一、字符串

1、字符串的定义

字符串即是零个或多个排在一起的字符，放在单引号或双引号之中，如下：

“我是一个字符串”
‘我是一个字符串’

单引号字符串的内部可以使用双引号；双引号字符串的内部可以使用单引号，如下：

“我是一个’字符串’”
‘我是一个“字符串”’

如果要在单引号字符串内部使用单引号，或者在双引号字符串中使用双引号，则需要在前面加上“\”，用于转义，如下：

“我是一个\“字符串\””
‘我是一个\‘字符串\’’

字符串默认只能在一行中，如果需要换行，则需要在第一行最后方加上“\”，用于转义，如下

“我是一个\
字符串”

2、length属性

该属性用于返回字符串的长度，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str = "我是一个字符串";
        console.log("str的长度为："+str.length);
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果如下：
在这里插入图片描述

二、字符串方法

1、charAt()方法

charAt()方法用于返回指定下标的字符，字符从左到右由0开始编号，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str = "我是一个字符串";
        var num = 2;
        console.log("str下标为"+num+"的字符为："+str.charAt(num));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

结果如下：
在这里插入图片描述
可以看到，由于字符串下标是从左到右由0开始编号的，所以取到了第三个字符“一”

注意：如果下标超出了字符串所有下标编号，不管是向左超出还是向右超出，都会返回空字符串

2、concat()方法

concat()方法用于连接两个字符串，并且在不改变原字符串的基础下返回一个新的字符串，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个";
        var str2 = "字符串";
        var str3 = str1.concat(str2);
        console.log("str1："+str1);
        console.log("str2："+str2);
        console.log("str2："+str3);
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

结果如下：
在这里插入图片描述

可支持多个字符串进行拼接，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个";
        var str2 = "字符串";
        var str3 = "字符串";
        var str4 = str1.concat(str2 , str3);
        console.log("str4："+str4);
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

结果如下：
在这里插入图片描述

简便的方法：可以使用“+”直接连接字符串，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个";
        var str2 = "字符串";
        var str3 = "字符串";
        var str4 = str1+str2+str3
        console.log("str4："+str4);
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意：如果使用“+”进行连接，并且相邻两个或多个值存在===数字时，会先将数字相加而后再拼接字符串，而不是直接拼接为字符串

3、substring()方法

substring()方法用于从原字符串截取出一个字符串并返回，不改变原字符串。
第一个参数表示开始截取字符串的下标，第二个位置表示结束位置（返回结果不含该位置）
示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个字符串";
        console.log(str1.substring(0,2));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结果如下：
在这里插入图片描述

如果省略第二个参数，则从开始下标一直截取到字符串末尾，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个字符串";
        console.log(str1.substring(2));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结果如下：
在这里插入图片描述

如果第一个参数值大于第二个参数，则会自动将两个参数调换位置，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个字符串";
        console.log(str1.substring(2,0));
        //等同于
        console.log(str1.substring(0,2));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

结果如下：
在这里插入图片描述
如果存在参数值为负数，则会自动将参数值改为0，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个字符串";
        console.log(str1.substring(2,-2));
        //等同于
        console.log(str1.substring(2,0));
        //等同于
        console.log(str1.substring(0,2));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

结果如下：
在这里插入图片描述

4、substr()方法

substr()方法也是从原字符串截取一个子字符串返回，只是参数值的意义不同
第一个参数表示开始截取的下标，第二个参数是截取的长度
示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个字符串";
        console.log(str1.substr(1,3));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结果如下：
在这里插入图片描述

同样，如果省略第二个参数值，则从开始下标一直截取到字符串末尾，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个字符串";
        console.log(str1.substr(1));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结果如下：
在这里插入图片描述

与substring()方法不同的是，如果第一个参数值为负数，则表示倒数计算的字符位置，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个字符串";
        //开始截取的位置为 从右往左第五个字符   截取长度为4
        console.log(str1.substr(-5,4));
        //开始截取的位置为 从右往左第五个字符   截取长度为：直到末尾
        console.log(str1.substr(-5));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

结果如下：

在这里插入图片描述

如果第二个参数值为负数，则自动转为0，将返回空字符串，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个字符串";
        console.log(str1.substr(5,-1));
        console.log(str1.substr(-5,-1));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

结果如下：
在这里插入图片描述

5、indexOf()方法

indexOf()方法用于确定一个字符串在另一个字符串中第一次出现的位置，如果不存在则返回-1，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个字符串";
        var str2 = "字";
        console.log(str2+" 在 "+str1+" 中出现的下标为："+str1.indexOf(str2));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

结果如下：
在这里插入图片描述

如果方法中存在第二个字符，则表示从该位置向后匹配，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是一个字符串";
        var str2 = "是";
        var num = 2;
        if (str1.indexOf(str2 , num) != -1){
            console.log("在下标"+num+"后：");
            console.log(str2+" 在 "+str1+" 中出现的下标为："+str1.indexOf(str2));
        }else{
            console.log("在下标"+num+"后：");
            console.log(str1+" 中不存在字符："+str2);
        }
        
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

结果如下：
在这里插入图片描述

6、trim()方法

trim()方法用于在不影响原字符串的前提下，去除字符串两端的空格，返回一个新的字符串，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = " 我是一个字符串 ";
        console.log(str1);
        console.log(str1.trim());
        
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

结果如下：
在这里插入图片描述

注意：该方法去除的不只是空格，还包括两端的制表符（‘\t’，‘\v’），换行符（‘\n’），以及回车符’\r’

示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "\r\n我是一个字符串\t";
        console.log(str1);
        console.log(str1.trim());
        
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

结果如下，可以看到第一行中的换行、回车、制表符都被去除了：
在这里插入图片描述

在ES6中，新增了trimStart()和trimEnd()两个方法，分别为去除头部空格和去除尾部空格，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "     我是一个字符串     ";
        console.log(str1);
        console.log(str1.trimStart());
        console.log(str1.trimEnd());
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

结果如下：
在这里插入图片描述

7、split()方法

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是，一个，字符串";
        var str2 = "，";
        console.log(str1);
        console.log(str1.split(str2));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

结果如下：
在这里插入图片描述

如果分割规则为空字符串，则返回数组中的成员是原字符串的每一个字符，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是，一个，字符串";
        var str2 = "";
        console.log(str1);
        console.log(str1.split(str2));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

结果如下：
在这里插入图片描述

如果省略参数，则返回的数组只有一个成员，就是原字符串，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是，一个，字符串";
        var str2 = "";
        console.log(str1);
        console.log(str1.split());
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

结果如下：
在这里插入图片描述

如果指定了第二个参数，则第二个参数值意思为返回数组的最大成员数，示例如下：

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>清风不渡title>
head>
<body>
    <script>
        var str1 = "我是，一个，字符串";
        var str2 = "，";
        console.log(str1);
        console.log(str1.split(str2,1));
        console.log(str1.split(str2,2));
        console.log(str1.split(str2,3));
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

结果如下：
在这里插入图片描述

以上就是字符串及其常用方法说明

相关阅读:
[python]pytest运行报错pytest: error: unrecognized arguments: --reruns
RocketMQ消息生产者是如何选择Broker的
 算法简单笔记2
迅为RK3588开发板Android12双摄同时显示
 django3.2.14之docker下主从分离【亲测可用】
Lua语法结构
 【nlp】天池学习赛-新闻文本分类-机器学习
 Collections.synchronizedMap() 和 ConcurrentHashMap 区别
 C高级day3（shell指令）
软考中级-软件设计师-第1章软件设计师考试介绍
原文地址：https://blog.csdn.net/WXKKang/article/details/126235935