一文读懂JavaScript的String对象

一、String对象的属性

（1）、length属性

该属性用于获得当前字符串的长度，通过length属性返回的字符串长度包括字符串的空格。

实例：获取字符串变量和字符串对象的长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr="我喜欢JavaScript";
			var s="I like JavaScript";
				document.write('"我喜欢JavaScript"的长度为:'+arr.length);
		 document.write("<br />");
		 document.write('"I like JavaScript"的长度为：'+s.length)
		</script>
	</body>
</html>

在这里插入图片描述

（2）、constructor属性

该属性用于对当前对象的构造函数的引用。

<script type="text/javascript">
			var str = new String("jkkk");
			if(str.constructor==String){
				alert("这是一个字符串对象");
			}
		</script>

在这里插入图片描述

（3）、prototype属性

该属性可以为字符串对象添加自定义的属性和方法。

	<script type="text/javascript">
			String.prototype.getLength = function() {
				alert(this.length);
			}
			var str = new String("abcdefg");
			str.getLength();
		</script>

在这里插入图片描述

二、String对象的方法

（1）、查找字符串

1）、charAt()方法

该方法可以返回字符串中指定位置的字符。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "abcdefghijklmn";
			document.write(str.charAt(2));
		</script>
	</body>
</html>

输出结果：c

2）、indexOf()方法

该方法可以返回某个字符串在字符串中首次出现的位置,没有找到该字符串返回-1。
在这里插入图片描述

3）、lastIndexOf()方法

该方法可以返回某个字符串在字符串中最后出现的位置，没有找到该字符串返回-1。
在这里插入图片描述

（2）、截取字符串

1）、slice()方法

该方法可以提取字符串的片段，并在新的字符串中返回被提取的部分。
包括范围为[4,9)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "JavaScript";
      document.write(str.slice(4,9))
			 </script>
	</body>
</html>

输出结果：Scrip

2）、substr()方法

该方法可以从字符串的指定位置开始提取指定长度的子字符串。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "JavaScript";
      document.write(str.substr(4,6));//4:截取的开始位置 6：指定的长度
			 </script>
	</body>
</html>

实例：在开发Web程序时，为了保持整个页面的合理布局，经常需要对一些超长输出的字符串内容进行截取，并通过“…”代替省略内容。本实例将应用substr()方法截取超长的字符串。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "明日科技即将重磅推出功夫系列视频课程，敬请关注!";
      document.write("截取前的字符串:"+str);
	  document.write("<br />");
	  document.write("截取后的字符串:"+str.substr(0,10)+"...")
			 </script>
	</body>
</html>

在这里插入图片描述

3）、substring()方法

该方法用于提取字符串中两个指定的索引号之间的字符。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "javascript";
	  document.write(str.substring(4,0));//不包括4
	  document.write("<br />");
	  document.write(str.substring(0,4));
			 </script>
	</body>
</html>

输出结果：
java
java

（3）、大小写转换

1）、toLowerCase()方法

该方法用于把字符串转换为小写。

2）、toUpperCase()方法

该方法用于将字符串转换为大写。

（4）、连接和拆分

1）、concat()方法

该方法用于连接两个或多个字符串。
使用concat()方法返回的是连接后的字符串，而原字符串对象并没有改变。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "";
			var str1 = "java";
			var str2 = "script";
			document.write(str.concat(str1, str2));
			var ss = "java";
			document.write("<br />");
			document.write(ss.concat(str2));
		</script>
	</body>
</html>

输出结果：
javascript
javascript

2）、split()方法

该方法用于把一个字符串分割成字符串数组。
分割每个字符

<script type="text/javascript">
			var str= "javascript";
			document.write(str.split(""));
		</script>

输出结果：
j,a,v,a,s,c,r,i,p,t

使用参数输出

<script type="text/javascript">
			var str= "ja va scr ipt";
			document.write(str.split(" ",2));
		</script>

输出结果：
ja,va

使用一个字符作为分隔符：

	<script type="text/javascript">
			var str= "ja-va-scr-ipt";
			document.write(str.split("-"));
		</script>

输出结果：
ja,va,scr,ipt

实例01：
对字符串以指定的分隔符进行拆分，再将字符串数组中的内容以另一个分隔符进行连接，从而合成一个新的字符串。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title> 
	</head>
	<body>
		<script type="text/javascript">
			var s="功夫JavaScript@功夫PHP@功夫Java";
			document.write("原字符串:"+s+"<br/>");
			var arr=s.split("@");
				var newarr=arr.join("*");
						document.write("新字符串:"+newarr);
		</script>
	</body>
</html>

在这里插入图片描述

实例02：
在开发网络应用程序时，经常会遇到由系统自动生成指定位数的随机字符串的情况，例如，生成随机密码或验证码等，本实例将实现生成指定位数的随机字符串的功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>	
				document.write("请输入要生成随机数的位数：");
					// digit是数字的位数
					function runStr(digit){
						if(digit=="" || isNaN(digit)){
							alert("请输入数字");
						}else{
							var sourceStr="0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K";
							 arrStr=sourceStr.split("[0-9]");
							var result=""; //定义变量并初始化
							var index=0;
							for(i=0;i<digit;i++){							
								index=parseInt(Math.random()*arrStr.length);
								result+=arrStr[index];
							}
							alert(result);
						}
					}	
				</script>
				<form name="form">
					<input type="text" name="digit"/>
					<input type="button" value="生成" onClick="runStr(form.digit.value)">
				</form>
	</body>
</html>

在这里插入图片描述

（5）、格式化字符串

在这里插入图片描述