一文讀懂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)、格式化字符串

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章