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

最新推荐文章于 2024-07-12 16:55:56 发布
最新推荐文章于 2024-07-12 16:55:56 发布
阅读量136 收藏 1
点赞数
分类专栏： 前端研习录 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WXKKang/article/details/126235935
版权

前端研习录（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、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>

  结果如下：
在这里插入图片描述
  可以看到，由于字符串下标是从左到右由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>

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

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

<!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>

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

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

<!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>

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

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>

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

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

<!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>

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

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

<!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>

  结果如下：
在这里插入图片描述
  如果存在参数值为负数，则会自动将参数值改为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>

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

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>

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

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

<!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>

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

  与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>

  结果如下：

在这里插入图片描述

  如果第二个参数值为负数，则自动转为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>

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

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>

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

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

<!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>

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

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>

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

注意：该方法去除的不只是空格，还包括两端的制表符（‘\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>

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

  在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>

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

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>

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

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

<!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>

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

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

<!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>

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

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

<!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>

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

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

清风不渡
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DevOps研习社:品质决定成败——漫谈非功能性需求
02-24
在互联网的世界里，“用户就是上帝”这句话只体现在支付环节。而在日常生活中，几乎每一个人都清楚的知道，不论是产品还是服务，品质决定竞争力，而对于一个软件、应用或者App来说，功能是生命线，确定能否安身立命...
陈安之研习会记录
12-17
《陈安之研习会记录》是一份珍贵的资料，主要涵盖了知名成功学导师陈安之在研习会上分享的智慧与经验。这份文档详细记录了陈安之的讲授内容，旨在帮助读者理解并应用他的成功理念，提升个人的成长与事业发展。 ...
前端研习录（36）——ES6 字符串扩展及新增方法讲解及示例分析
清风不渡
08-19 276
重拾前端记忆，记录学习笔记，现在进入ES6 字符串扩展及新增方法部分
前端研习录（28）——JavaScript Element对象及其属性讲解及示例分析
清风不渡
08-14 257
重拾前端记忆，记录学习笔记，现在进入JavaScript Element对象及其属性部分
前端研习录（30）——JavaScript 事件讲解及示例分析
清风不渡
08-15 263
重拾前端记忆，记录学习笔记，现在进入JavaScript 事件部分
前端研习录（17）——JavaScript数据类型讲解及示例分析
清风不渡
08-03 198
JavaScript语言中的每一个值都属于某一种数据类型，ES5中的数据类型共有六种，分别是：数值、字符串、布尔值、对象、null以及undefined。对象：由多个原始类型的值组成，可以理解为一个存放各种值的容器。重拾前端记忆，记录学习笔记，现在进入JavaScript数据类型部分。原始类型的数据类型共有三种，分别为数值、字符串以及布尔值。...
前端研习录（16）——JavaScript引入、注释及输出方式讲解及示例说明
清风不渡
08-03 303
重拾前端记忆，记录学习笔记，现在进入JavaScript引入、注释及输出方式部分。
Vue研习录（02）——模板语法详解及示例分析
清风不渡
10-27 698
重拾前端记忆，记录学习笔记，现在进入模板语法部分
前端性能优化 -- 从 10 多秒到 1.05 秒
AI研习社
11-26 156
开发者（KaiFaX）面向全栈工程师的开发者专注于前端、Java/Python/Go/PHP的技术社区作者 |子木来源 |segmentfault.com/a/11900000150...
201508整理：前端工程师的（现在主要的问题、工作选择、技术前景未来）
weixin_34025051的博客
08-12 144
一个小整理。 原文：前端工程师的未来 “前端工程师的未来”精华： A. 偏向“现在主要的问题”： 第一大挑战还是兼容性。虽然微软已经决定将ie6安乐死，ie9/10看起来相当标准。向后兼容似乎轻松了，但向前兼容又开始越来越让人头疼了。打算搞一个web app，你会发现android上的webkit是多么混乱。在桌面浏览器上总是有css hack可以摆平，但在mobile上只能考虑退化方案...
ES6面试、复习干货知识点汇总（全）
前端码农
05-29 2613
近期在复习ES6，针对ES6新的知识点，以问答形式整理一个全面知识和问题汇总。（全干货，适合对ES6有一定理解的同学复习，以及ES6面试。） 一、问：ES6是什么，为什么要学习它，不学习ES6会怎么样? 答： ES6是新一代的JS语言标准，对分JS语言核心内容做了升级优化，规范了JS使用标准，新增了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用的开发。学习ES6是成为...
汽车手套箱研习 PPT——22页.rar
09-19
【标题】"汽车手套箱研习 PPT——22页.rar"揭示了这是一份关于汽车手套箱设计和工程实践的演示文稿，总计22页。这份文档可能包含了对汽车内部存储空间——手套箱的深入研究，涵盖了设计原理、功能实现、材料选择以及...
字符串查找工具.zip
04-28
标题“字符串查找工具.zip”指的是一个包含用于查找和操作字符串的软件工具的压缩包。这个工具主要用于在大量的文件中高效地进行批量搜索、统计和定位特定的文本字符串，这对于项目中的内容排查工作非常有用。 RS....
OpenSNN推文：近期优质博客推荐汇总
最新发布
opensnn的博客
07-12 192
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
更新商品前端接口编写
weixin_55639995的博客
07-12 145
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 137
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 815
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 965
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
图书馆研习室在线预约系统.docx
09-10
"本文介绍了图书馆研习室在线预约系统的开发背景、功能及技术实现。系统旨在解决高校图书馆座位资源紧张的问题，通过计算机实时监控和管理，优化座位使用。系统基于B/S架构，采用JSP技术结合MySQL数据库以及SSM...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值