javascript中字符串常用的方法和屬性


前言

字符串是一種非常重要的數據類型,在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>

match()方法本質上與調用RegExp的exec()方法相同,match()方法只接受一個參數,要么是一個正則表達式,要么是一個RegExp對象。

search()方法與match()方法的參數相同,有字符串或RegExp對象指定的一個正則表達式,search()方法返回字符串中第一個匹配項的索引,如果沒有找到匹配項,則返回-1,而且,search()方法始終從字符串開頭向后匹配查找模式。

replace()方法接收兩個參數,第一個參數可以是一個RegExp對象或者一個字符串(這個字符串不會被轉換成正則表達式),第二個參數可以可以是一個字符串或者一個函數。如果第一個參數是字符串,那么只會替換第一個子字符串。要想替換所有子字符串,唯一的方法就是提供一個正則表達式,而且要指定全局(g)標志。

split()方法可以基於指定的分隔符將一個字符串分割成多少個字符串,並將結果放在數組中。分隔符可以是字符串,也可以是一個RegExp對象(這個方法不會將字符串看成正則表達式)。split()方法可以接受可選的第二個參數,用於指定數組的大小,以確保返回的數組不會超過既定大小。

總結

字符串是javascript中的一種基本數據類型,javascript的字符串是不可變的,String類定義的方法都不能改變字符串的內容,返回的都是全新的字符串,而不是原始的字符串。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM