JS基礎入門篇(十)—字串方法

樑志芳發表於2019-02-16

1.方法閱讀說明

返回值型別 物件.方法名稱(引數1[,引數二]);
解釋:

返回值型別:指的是函式呼叫結束後返回的值的型別。
物件.方法名稱:指的是呼叫方法。
引數列表:表示函式呼叫時傳入的引數。[]表示可選引數,可寫可不寫。

2.字串屬性

定義:通過一對“”或者一對包起來的,由0個或者多個字元組成的就是字串。
字串長度:

string.length;

eg:

var str1="abc";
var str2="";
var str3=" ";
console.log(str1.length);//3
console.log(str2.length);//0
console.log(str3.length);//1

3.charAt

作用: 此方法返回對應位置的字元
語法: string string.charAt(index);
引數: index指 0到 字串長度-1 的某個一個整數。
返回值: 返回字串對應位置的字元

注意:

- 如果傳入引數小於0或者大於 字串長度-1,則返回空字串。
- 如果傳入boolean值,如果為true,預設是轉化為數字1,指到字串第二個字元。如果為false,預設是轉化為數字0,指到字串第一個字元。
- 如果傳入任意字串,則指到字串第一個字元。
<script>
        var str="abc";
        console.log(str.charAt(0));//a
        console.log(str.charAt(2));//c
        console.log(str.charAt(-88));//""
        console.log(str.charAt(false));//a
        console.log(str.charAt(true));//b
        console.log(str.charAt("unm"));//a
</script>

4.chatCodeAt

作用:返回對應位置字元的 Unicode 數值
語法: number string.charCodeAt(index);
引數: index指 0到 字串長度-1 的某個一個整數。
返回值: 返回字串對應位置的字元的 Unicode 數值

注意:
如果傳入引數小於0或者大於 字串長度-1,則返回空字串。則返回NAN。

<script>
    var str="abc";
    console.log(str.charCodeAt(0));//97
    console.log(str.charCodeAt(2));//99
    console.log(str.charCodeAt(-88));//NAN
    console.log(str.charCodeAt(false));//97
    console.log(str.charCodeAt(true));//98
    console.log(str.charCodeAt(undefined));//97
    console.log(str.charCodeAt("zzzz"));//97
</script>

4.fromCharCode

作用:將 Unicode 數值轉化為對應的字元。
語法: string String.fromCharCode(index);
引數: index指傳入任意的整數。
返回值: 返回Unicode 數值對應的字串

<script>
    console.log( String.fromCharCode( 97 ) );//a
    console.log( String.fromCharCode( 65 ) );//A
</script>

加密解密的小例子

5.indexOf

作用: 返回 指定值 在呼叫該方法時字串首次出現的位置。
語法: number string.indexOf((searchValue [, fromIndex]));
引數: searchValue 指要查詢的字串。fromIndex 指從哪裡開始查詢,預設值為0。
返回值: 返回 數字。
注意:如果存在 則返回位置,不存在則返回-1。

<script>
    var str="abcabcabc";
    console.log(str.indexOf("a"));//0
    console.log(str.indexOf("b"));//1
    console.log(str.indexOf("z"));//-1

    console.log(str.indexOf("ab"));//0
    console.log(str.indexOf("ac"));//-1

    console.log(str.indexOf("bc",0));//1
    console.log(str.indexOf("bc",-2));//1
    console.log(str.indexOf("bc",18));//-1
</script>

5.lastIndexOf

作用: 返回 指定值 在呼叫該方法時字串最後出現的位置。
語法: number string.indexOf((searchValue [, fromIndex]));
引數: searchValue 指要查詢的字串。fromIndex 指從哪裡開始查詢,預設值為str.length-1。
返回值: 返回 數字。
注意:如果存在 則返回位置,不存在則返回-1。

<script>
        var str="abcabcabc";
        console.log(str.lastIndexOf("a"));//6
        console.log(str.lastIndexOf("b"));//7
        console.log(str.lastIndexOf("z"));//-1

        console.log(str.lastIndexOf("ab"));//6
        console.log(str.lastIndexOf("ac"));//-1

        console.log(str.lastIndexOf("bc",0));//-1
        console.log(str.lastIndexOf("bc",-2));//-1
        console.log(str.lastIndexOf("bc",18));//7
</script>

6.slice

作用: 方法提取字串中的一部分,並返回這個新的字串(包含起始位置,不包含結束位置)
語法: string string.slice((star [, end]));
引數: star是指擷取的起始位置,end是指擷取的結束位置,預設為最後一個字元的位置+1 ( 字串的長度 )。
返回值: 返回 擷取到 的字串。

注意:

  • 不會根據引數大小,交換引數位置
  • 如果引數中有負值,則處理成從末尾開始數。-1指最後一個元素,-2 指倒數第二個元素。
<script>
    var str="abcabc";
    console.log(str.slice(2));//"cabc"
    console.log(str.slice(0,2));//"ab"
    console.log(str.slice(2,2));//""

    console.log(str.slice(2,-1));//"cab"
    console.log(str.slice(2,-6));//""

    console.log(str.slice(2,1));//""
    console.log(str.slice(-2,-1));//"b"
</script>

7.substring

作用: 方法提取字串中的一部分,並返回這個新的字串(包含起始位置,不包含結束位置)
語法: string string.slice((star [, end]));
引數: star是指擷取的起始位置,end是指擷取的結束位置,預設為最後一個字元的位置+1 ( 字串的長度 )。
返回值: 返回 擷取到 的字串。

注意:

  • 會根據起始位置和結束位置的大小先進行引數位置的變換
  • 會把負值轉換成0
<script>
    var str="abcabc";
    console.log(str.substring(2));//"cabc"
    console.log(str.substring(0,2));//"ab"
    console.log(str.substring(2,2));//""

    console.log(str.substring(2,-1));//"ab"
    console.log(str.substring(2,-6));//"ab"

    console.log(str.substring(2,1));//"b"
    console.log(str.substring(-2,-1));//""
</script>

8.substr

作用: 擷取指定 起始位置長度子字串.
語法: string string.substr(start [, length]);
引數: start :擷取的起始位置 。length:擷取的字串長度,預設為字元長度。
返回值: 返回擷取到的字串

<script>
    var str="abcabcabcabc";
    console.log(str.substr(0));//abcabcabcabc
    console.log(str.substr(3));//abcabcabc
    console.log(str.substr(3,5));//abcab

    console.log(str.substr(3,-1));""
</script>

9.toLowerCase

1.toLowerCase
作用: 把字串全部轉成小寫
語法: string string.toLowerCase();
返回值: 返回轉成小寫的字串。

2.toUpperCase
作用: 把字串全部轉成大寫
語法: string string.toUpperCase();
返回值: 返回轉成大寫的字串。

<script>
        var str = "liangZhiFANG";
        console.log( str.toLowerCase() );//"liangzhifang"
        console.log( str.toUpperCase() );//"LIANGZHIFANG"
        console.log( str );//"liangZhiFANG"
        console.log( "LoveJs".toLowerCase() );//"lovejs"
</script>

10.split

作用: 通過一個指定的字串 把原字串分割成一個陣列
語法: array string.split([separator] [, limit])
引數:separator是指分割符。limit指定最多分割的數量,可以理解為陣列長度,預設為全部。
返回值:返回一個陣列。
注意:沒有分割符的時候(沒有傳入引數),整個字串將作為一個整體儲存到陣列中。 用分割符分割的時候,分割符會在被刪除了在傳入陣列。

<script>
        var str="我愛,你,們";
        console.log(str.split(","));//["我愛","你","們"]
        console.log(str.split(",",2));//["我愛","你"]
        console.log(str.split());//["我愛,你,們"]
        console.log(str.split("mmm"));//["我愛,你,們"]
        console.log(str.split(""));//["我", "愛", "," , "你", "," ,"們"]
    </script>

相關文章