前言
字符串是一種非常重要的數據類型,在Java等面向對象編程語言中,它代表對象類型,而在javascript中它卻是一種基本數據類型,在開發的領域中,我們經常會碰到,無論是前端還是後臺。比如後臺驗證手機號碼,將手機號碼的後四位變成*,這些都是對字符串的處理。所以學會字符串中的常用的屬性和方法是非常必要的,本篇博客將帶你解析字符串常用的屬性和方法。那麼一起來看看吧!
字符串常用的屬性和方法
屬性
- length:返回字符串的長度
方法
- chatAt():返回在指定位置的字符
- charCodeAt():返回在指定位置字符的unicode編碼(ASCII編碼)
- concat():連接字符串
- indexOf():從字符串的開頭向後搜索字符串
- lastIndexOf():從字符串的末尾向前搜索字符串
- match():找到一個或多個正則表達式的匹配
- replace():替換與正則表達式匹配的字串
- search():檢索與正則表達式相匹配的值
- slice():提取字符串的片段,並在新的字符串中返回被提取的部分
- split():把字符串分割成字符串數組
- substr():從起始索引號提取字符串中指定數目的字符
- substring():截取字符串中兩個指定的索引號之間的字符
- toLowerCase():將字符串轉換爲小寫
- toUpperCase():將字符串轉換爲大寫
- toString():返回字符串本身
- valueOf():返回某個對象的原始值
- trim():刪除前置及後綴的所有空格
實例講解
(1):length屬性
<!DOCTYPE html>
<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>
</html>
(2):字符方法charAt()和charCodeAt()
<!DOCTYPE html>
<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>
</html>
(3):字符串操作方法concat()、slice()、substr()、substring()
<!DOCTYPE html>
<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>
</html>
這三個方法都返回被操作字符串的一個字符串,而且也接受一個或兩個參數,當接受兩個參數時,不包含結束下標,第一個參數指定字符串的起始位置,第二個參數(在指定的情況下)表示子字符串到哪裏結束,具體來說,slice()和substring()的第二個參數指定的是字符串最後一個字符後面的位置,而substr()的第二個參數指定的則是返回的字符個數。如果沒有給這些方法指定第二個參數,則將字符串的末尾作爲結束位置。
在傳遞這些方法的參數是負值的情況下,它們的行爲就不盡相同了,其中slice()方法會將傳入的負值與字符串長度相加,substr()方法將負的第一個參數加上字符串的長度,而將負的第二個參數轉換爲0。最後,substring()方法會將所有負值參數轉換爲0。
(4):字符串位置方法indexOf()和lastIndexOf()
<!DOCTYPE html>
<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>
</html>
(5):trim()方法
<!DOCTYPE html>
<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>
</html>
(6):字符串大小寫轉換方法toLowerCase()和toUpperCase()
<!DOCTYPE html>
<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>
</html>
(7):字符串的模式匹配方法split()、match()、replace()、search()
<!DOCTYPE html>
<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>
</html>