js--你需要知道的字串使用方法(含es6及之後)

丶Serendipity丶發表於2021-07-11
JS字串

前言

　　字串作為 JavScript 的基本資料型別，在開發以及面試過程中作為程式設計師對基礎掌握情況的重要考點，本文來總結一下字串的相關屬性以及用法。包含了ES6中的一些新語法特性。

正文

　　1.字串的建立

　　JavaScript 中建立字串的方法主要有兩種。一種是通過字面量的方式建立，另一種是通過建構函式建立。分別如下：

    // 字面量方式
    var str = "hello world";
    console.log(str)//hello world
    console.log(typeof str);//string

    // 建構函式方式
    var strr = new String("hello  Serendipity")
    console.log(strr)//String {"hello  Serendipity"}
    console.log(typeof strr);//object

    // 兩種方式區別
    var str = 'hello';
    var strr = new String('hello')
    var strrr = new String('hello')
    console.log(str == strr);//true
    console.log(str === strr);// false 兩者型別不通，分別是String 和 Object 型別
    console.log(strr == strrr);//false  存放在棧中的地址不相同
    console.log(strr === strrr);//false    兩者在堆中存放的值相同，但是 不是指向同一個值，同樣棧中地址不同

 

　　2.轉義字元和模板字串

　　字串中雙引號裡面不能包含雙引號,單引號裡面不能包含單引號,如果想要用到這些關鍵字元，需要使用轉義字元表示，例如：轉義字元  \'可以表示為'              \\表示為\           \\'表示為\'

        var str1 = '001'
        var str2 = '002\'這是\\\\一個字串·'
        console.log(str1);//001
        console.log(str2);//002'這是\\一個字串·

　　同樣使用轉義字元可以達到換行符、回車的作用：

        //同樣轉義字元實現字串換行
        var str = '<br>this \
        <br>is a \
        <br>book';
        console.log(str);//<br>this         <br>is a         <br>book
        //轉義字元還可以將有意義的和沒意義的字元進行轉換
        //    \n是新行 \t是回車   \t水平製表符
        var st = 'this\n \ris a \tbook'
        console.log(st);//this
 
                        //is a     book

　　es6中為了解決換行導致程式碼不規則的這種問題，引入了模板字串，用反引號``包裹住字串達到換行效果，同時可以直接使用類似於插值表示式的方法獲取其值。如下：

        //ES6宣告字串的模板  反引號~鍵位
        var ss = '<i>www</i>\
        <h2>baidu</h2>.com'
        console.log(ss);//<i>www</i>
                         //<h2>baidu</h2>.com
        //使用反引號宣告字串 在反引號中不需要使用\換行》》》m模板字串
        var host = 'www'
        var yuming = 'baidu'
        var qy = 'com';
        var str = `<i>${host}</i><h2>${yuming}</h2>.${qy}`
        console.log(str);//<i>www</i><h2>baidu</h2>.com

 

　　3.屬性

　　length屬性 ，返回字串的長度，記住是屬性，不是方法。

　　constructor屬性，對建立字串物件的String建構函式的引用。

　　prototype屬性，js中通過建構函式建立的物件例項，都有一個prototype(原型)屬性，這個屬性是一個指標，這個指標指向一個物件，而這個物件就包含了通過建構函式所例項化的所有例項共享的屬性和方法，prototype屬效能讓構造的例項有能力訪問這些屬性和方法。

　　4.方法

　　（1）charAt()方法，返回指定索引位置的字元。charCodeAt()方法，返回指定索引位置字元對應的unicode值。fromCharCode()方法，將Unicode轉化為字串。

    var str = "hello Serendipity"
    console.log(str.charAt(2));//l
    console.log(str.charCodeAt(2));//108
    console.log(String.fromCharCode(108));//l

 

　　（2）concat()方法，連線兩個字串，返回連線之後的字串。

 

    var str1 = "hello "
    var str2 = "serendipity"
    console.log(str1.concat(str2));//hello serendipity

 

　　（3）valueOf()方法，返回某個字串物件的原始值。toString()方法，返回字串物件值。

 

    var str = "hello Serendipity"
    console.log(str.valueOf());//hello Serendipity
    console.log(str.toString());//hello Serendipity
    var strr = new String("hello Serendipity")
    console.log(strr.valueOf());//hello Serendipity
    console.log(strr.toString());//hello Serendipity

 

　　（4）subString()方法，提取字串中兩個指定索引之間的字元。substr()方法，從起始索引號提取指定數目的字元。slice()方法提取字串的片段，並在新的字串中返回被提取的部分。

 

    var str = "hello Serendippity"
    // substring(from, [to]) 方法用於提取字串中介於兩個指定下標之間的字元，方返回的子串包括 start 處的字元，
    // 但不包括 stop 處的字元，to 可選，如果省略該引數，那麼返回的子串會一直到字串的結尾。substring() 不接受負的引數。
    console.log(str.substring(2));//llo Serendippity
    console.log(str.substring(2,5));//llo
    console.log(str.substring(-1));//hello Serendippity

    // substr(start, [length]) 方法可在字串中抽取從 start 下標開始的指定數目的字元。返回一個新的字串，包含從 start（包括 start 所指的字元） 處開始的
    //  length 個字元。如果沒有指定 length，那麼返回的字串包含從 start 到該字串的結尾的字元。
    console.log(str.substr(2));//llo Serendippity
    console.log(str.substr(2,5));//llo S
    console.log(str.substr(-2));//ty
    
    // slice(start, [end]) 方法可提取字串的某個部分，返回一個新的字串。包括字串從 start 開始（包括 start）到 end 結束（不包括 end）為止的所有字元。
    console.log(str.slice(2));//llo Serendippity
    console.log(str.slice(2,5));//llo
    console.log(str.slice(-2));//ty

 

　　（4）indexOf()方法，返回字串中檢索指定字串第一次出現的位置。lastIndexOf()方法，返回字串中檢索指定字串最後一次出現的位置。includes()方法，判斷字串中是否包含指定的子字串。

 

    var str = "hello serendipity"
    console.log(str.indexOf("l"));//2
    console.log(str.lastIndexOf("i"));//14
    console.log(str.includes("dipi"));//true
    console.log(str.includes("pidi"));//false

 

　　（5）search()方法，索引與正規表示式相匹配的值。replace()方法，替換與正規表示式匹配的子串。replaceAll()方法，替換與正規表示式匹配的所有子串。match()方法，找打一個或多個正規表示式的匹配。

 

    var str = "hello Serendipity"
    // search()方法接收一個正則作為引數，如果字串中能匹配正則，則返回匹配字串的起始位置，否則返回-1
    console.log(str.search(/llo/));//2
    console.log(str.search(/LLO/));//-1
    //replace()接收兩個引數，第一個為需要替換的正則或者字串，第二個引數為替換成為的內容,返回替換之後的結果
    console.log(str.replace(/l/,"o"));//heolo Serendipity
    // replaceAll()接收兩個引數，第一個為需要替換的正則或者字串，第二個引數為替換成為的內容,返回替換之後的結果，
　　 //相比replace,只是多了全域性的作用範圍,同樣在replace中用正則可以實現replaceAll的效果
    console.log(str.replace(/l/g,"o"));//heooo Serendipity
    console.log(str.replaceAll("l","o"));//heooo Serendipity

 

　　（6）toUpperCase()方法，把字串轉為大寫。toLowerCasse()方法，把字串轉為小寫。toLocalLowerCase()方法和toLocalUpperCase()方法根據主機語言環境把字串轉化為相應的大小寫。

 

    var str = "hello Serendipity"
    console.log(str.toUpperCase());//HELLO SERENDIPITY
    console.log(str.toLowerCase());//hello Serendipty
    console.log(str.toLocaleUpperCase());//HELLO SERENDIPITY
    console.log(str.toLocaleLowerCase());//hello Serendipty

 

　　（7）trim()方法，去掉字串兩頭的空格。

 

    var str = "   hello Serendipity   "
    console.log(str.trim());//hello Serendipty
    console.log(str.length);//23
    console.log(str.trim().length);//17

 

　　（8）startsWith()方法，判斷字串是否以指定的字串開始的。endsWith()方法，判斷字串是否是以指定的字串結束的。

 

    var str = "hello Serendipity"
    console.log(str.startsWith("hello"));//true
    console.log(str.startsWith("seren"));//false
    console.log(str.endsWith("pity"));//true
    console.log(str.endsWith("hrllo"));//false

 

　　（9）repeat()方法，返回一個字串複製貼上多次之後的新字串。

 

    var str = "hello Serendipity"
    console.log(str.repeat(2));//hello Serendipityhello Serendipity

　　（10）split()方法，將字串按指定字元分割為陣列

    var str = "red,blue,green"
    console.log(str.split(","));//(3) ["red", "blue", "green"]

總結

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。

 

相關文章