Java教程
JavaScript学习总结之字符串常用的属性和方法
先点赞后关注，防止会迷路
寄语：没有一个冬天不会过去，没有一个春天不会到来。
前言字符串常用的属性和方法属性方法实例讲解length属性字符方法charAt()和charCodeAt()字符串操作方法concat()、slice()、substr()、substring()字符串位置方法indexOf()和lastIndexOf()trim()方法字符串大小写转换方法toLowerCase()和toUpperCase()字符串的模式匹配方法split()、match()、replace()、search()结尾
前言
字符串是一种非常重要的数据类型，在Java等面向对象编程语言中，它代表对象类型，而在javascript中它却是一种基本数据类型，在开发的领域中，我们经常会碰到，无论是前端还是后台。比如后台验证手机号码，将手机号码的后四位变成*，这些都是对字符串的处理。所以学会字符串中常用的属性和方法是非常必要的，本篇博客将带你解析字符串常用的属性和方法。那么一起来看看吧！
字符串常用的属性和方法
属性
- length：返回字符串的长度
方法
- chatAt()：返回在指定位置的字符
- charCodeAt()：返回在指定位置字符的unicode编码(ASCII编码)
- concat()：连接字符串
- indexOf()：从字符串的开头向后搜索字符串
- lastIndexOf()：从字符串的末尾向前搜索字符串
- match()：找到一个或多个正则表达式的匹配
- replace()：替换与正则表达式匹配的字串
- search()：检索与正则表达式相匹配的值
- slice()：提取字符串的片段，并在新的字符串中返回被提取的部分
- split()：把字符串分割成字符串数组
- substr()：从起始索引号提取字符串中指定数目的字符
- substring()：截取字符串中两个指定的索引号之间的字符
- toLowerCase()：将字符串转换为小写
- toUpperCase():将字符串转换为大写
- toString()：返回字符串本身
- valueOf()：返回某个对象的原始值
- trim()：删除前置及后缀的所有空格
实例讲解
length属性
1<!DOCTYPE html>
2<html>
<head>
<meta charset="UTF-8">
<title>字符串的length属性</title>
</head>
<body>
<script type="text/javascript">
//1:创建字符串
var str1=new String('Hello World');//通过new关键字
var str2='Hello World';//字面量
console.log(str1.length);//长度为11
console.log(str2.length);//长度为11
</script>
</body>
16</html>
复制代码
tips：length代表返回字符串的长度。
字符方法charAt()和charCodeAt()
1<!DOCTYPE html> 2<html> <head> <meta charset="UTF-8"> <title>字符方法</title> </head> <body> <script type="text/javascript"> var str='Hello World';//创建字符串 //1：测试charAt()方法 console.log(str.charAt(1));//返回e //2：测试charCodeAt()方法 console.log(str.charCodeAt(1));//返回101(ASCII编码) console.log(str[1]);//返回e </script> </body> 17</html> 复制代码
字符串操作方法concat()、slice()、substr()、substring()
1<!DOCTYPE html>
2<html>
<head>
<meta charset="UTF-8">
<title>字符串的操作方法</title>
</head>
<body>
<script type="text/javascript">
//1：测试concat()方法
var str1='Hello ';
var result=str1.concat('World');
console.log(str1); //Hello
console.log(result);//Hello World
//2：测试slice(startIndex,[lastIndex])方法
//参数：开始下标，结束下标(可选)
var stringValue='hello world';
console.log(stringValue.slice(3));//lo world
console.log(stringValue.slice(3,7));//lo w
//3：测试substr(startIndex,[lastIndex])方法
//参数：开始下标，结束下标(可选)
console.log(stringValue.substr(3));//lo world
console.log(stringValue.substr(3,7));// lo worl
//4：测试substring(startIndex,[lastIndex])方法
//参数：开始下标，结束下标(可选)
console.log(stringValue.substring(3));//lo world
console.log(stringValue.substring(3,7));//lo w
var item='hello world';
console.log(item.slice(-3));//rld
console.log(item.substr(-3));//rld
console.log(item.substring(-3));//hello world
console.log(item.slice(3,-4));//lo w
console.log(item.substr(3,-4));//''空字符串
console.log(item.substring(3,-4));//hel
</script>
</body>
40</html>
复制代码
这三个方法都返回被操作字符串的一个字符串，而且也接受一个或两个参数，当接受两个参数时，不包含结束下标，第一个参数指定字符串的起始位置，第二个参数(在指定的情况下)表示子字符串到哪里结束，具体来说，slice()和substring()的第二个参数指定的是字符串最后一个字符后面的位置，而substr()的第二个参数指定的则是返回的字符个数。如果没有给这些方法指定第二个参数，则将字符串的末尾作为结束位置。
在传递这些方法的参数是负值的情况下，它们的行为就不尽相同了，其中slice()方法会将传入的负值与字符串长度相加，substr()方法将负的第一个参数加上字符串的长度，而将负的第二个参数转换为0。最后，substring()方法会将所有负值参数转换为0。
字符串位置方法indexOf()和lastIndexOf()
1<!DOCTYPE html>
2<html>
<head>
<meta charset="UTF-8">
<title>字符串位置方法</title>
</head>
<body>
<script type="text/javascript">
var stringValue='hello world';
//1:测试inexOf()方法
console.log(stringValue.indexOf('o'));//4
console.log(stringValue.indexOf('o',6));//7
//2：测试lastIndexOf()方法
console.log(stringValue.lastIndexOf('o'));//7
console.log(stringValue.lastIndexOf('o',6));//4
var item='Lorem ipsum dolor sit amet, consectetur adipisicing elit';
var positions=new Array();
var pos=item.indexOf('e');
while(pos>1){
positions.push(pos);
pos=item.indexOf('e',pos+1);
}
console.log(positions);//3,24,32,35,52;
</script>
</body>
27</html>
复制代码
trim()方法
1<!DOCTYPE html> 2<html> <head> <meta charset="UTF-8"> <title>trim()方法</title> </head> <body> <script type="text/javascript"> var str=' hello world '; var trimStr=str.trim(); console.log(str);// hello world console.log(trimStr);//hello world </script> </body> 15</html> 复制代码
字符串大小写转换方法toLowerCase()和toUpperCase()
1<!DOCTYPE html> 2<html> <head> <meta charset="UTF-8"> <title>字符串大小写方法</title> </head> <body> <script type="text/javascript"> var str='Hello World'; console.log(str.toLowerCase()); //hello world console.log(str.toUpperCase());//HELLO WORLD console.log(str.toLocaleLowerCase());//hello world console.log(str.toLocaleUpperCase());//HELLO WORLD </script> </body> 16</html> 复制代码
字符串的模式匹配方法split()、match()、replace()、search()
1<!DOCTYPE html>
2<html>
<head>
<meta charset="UTF-8">
<title>字符串的模式匹配方法</title>
</head>
<body>
<script type="text/javascript">
//1：测试match()方法
var text1='cat, bat, sat, fat';
var pattern=/.at/;
var matches=text1.match(pattern);
console.log(matches.index);//0
console.log(matches[0]);//cat
console.log(pattern.lastIndex);//0
//2：测试search()方法
var text2='cat bat, sat, fat';
var pos=text2.search(/at/);
console.log(pos);//1
//3：测试replace()方法
var text3='cat, bat, sat, fat';
var result=text3.replace('at','ond');
console.log(result);//cond,bat,sat,fat
result =text3.replace(/at/g,'ond');
console.log(result);//cond,bond,sond,fond
//4：测试split()方法
var text4='red,blue,green,yellow';
var colors1=text4.split(',');
var colors2=text4.split(',',2);
console.log(colors1);//['red','blue','green','yellow'];
console.log(colors2);//['red','blue'];
</script>
</body>
39</html>
复制代码
tips:
match()方法
match()方法本质上与调用RegExp的exec()方法相同，match()方法只接受一个参数，要么是一个正则表达式，要么是一个RegExp对象。
search()方法
search()方法与match()方法的参数相同，有字符串或RegExp对象指定的一个正则表达式，search()方法返回字符串中第一个匹配项的索引，如果没有找到匹配项，则返回-1，而且，search()方法始终从字符串开头向后匹配查找模式。
replace()方法
replace()方法接收两个参数，第一个参数可以是一个RegExp对象或者一个字符串(这个字符串不会被转换成正则表达式)，第二个参数可以可以是一个字符串或者一个函数。如果第一个参数是字符串，那么只会替换第一个子字符串。要想替换所有子字符串，唯一的方法就是提供一个正则表达式，而且要指定全局(g)标志。
spilt()方法
split()方法可以基于指定的分隔符将一个字符串分割成多少个字符串，并将结果放在数组中。分隔符可以是字符串，也可以是一个RegExp对象(这个方法不会将字符串看成正则表达式)。split()方法可以接受可选的第二个参数，用于指定数组的大小，以确保返回的数组不会超过既定大小。
结尾
如果觉得本篇文章对您有用的话，麻烦您给笔者点亮那个点赞按钮。
对于二太子木吒这个暖男来说：真的非常有用，您的支持就是我前进的动力，我们下篇文章见。
原创不易，请勿白嫖。
二太子木吒，一个在互联网前端苟且偷生的小白一枚，专注于前端开发，善于分享技术。
如需转载，请联系作者或者保留原文链接，微信公众号搜索二太子木吒
-
小米11i印度快充版ROM合集：极致体验，超越期待10-06
-
【ROM下载】小米11i 5G 印度版系统， 疾速跃迁，定义新速度10-06
-
【ROM下载】小米 11 青春活力版，青春无极限，活力全开10-06
-
小米13T Pro系统合集：性能与摄影的极致融合，值得你升级的系统ROM10-05
-
基于Python+Vue开发的医院门诊预约挂号系统10-01
-
基于Python+Vue开发的旅游景区管理系统10-01
-
RestfulAPI入门指南：打造简单易懂的API接口10-01
-
初学者指南：了解和使用Server Action10-01
-
Server Component入门指南：搭建与配置详解10-01
-
React 中使用 useRequest 实现数据请求10-01
-
使用 golang 将ETH账户的资产平均分散到其他账户10-01
-
JWT用户校验课程：从入门到实践10-01
-
Server Component课程入门指南10-01
-
Dnd-Kit学习：新手快速入门指南09-30
-
ESLint学习：初学者指南09-30
