Notes

筆記本

2016-10-19

[JavaScript] 字串與字串的方法

[JavaScript] 字串與字串的方法

字串

JavaScript的字串用雙引號" "或是單引號' '將文字放入其中。

<!DOCTYPE html>
<html>
<body>
    <p id="name"></p>

    <script>

        var Name1 = "Berry";
        var Name2 = 'Berry';

        document.getElementById("name").innerHTML =
        Name1 + "<br>" + Name2;

    </script>
</body>
</html>

 

若要在字串中加入引號符號，不可與外圍的引號相同:

<!DOCTYPE html>
<html>
<body>
    <p id="name"></p>

    <script>

        var string1 = "My name is Berry";
        var string2 = "My name is 'Berry'";
        var string3 = 'My name is "Berry"';

        document.getElementById("name").innerHTML =
        string1 + "<br>" + string2 + "<br>" + string3;

    </script>
</body>
</html>

 

特殊符號的處理

若要將一些特殊符號放入字串中，可以在符號前加上 \ 反斜線符號，來顯示特殊的符號。

<!DOCTYPE html>
<html>
<body>
    <p id="name"></p>

    <script>

        var string1 = "My name is \"Berry\"";
        var string2 = 'My name is \'Berry\'';

        document.getElementById("name").innerHTML =
        string1 + "<br>" + string2 ;

    </script>
</body>
</html>

 

字串內容斷行

為了避免字串內容過多時，造成字串過長而難以閱讀，可以用以下方是將字串換行。

在運算符號後換行:

document.getElementById("demo").innerHTML =
"Hello World!";
document.getElementById("demo").innerHTML = "Hello" +
"World!";

或是在字串內加上反斜線 \ 後換行:

document.getElementById("demo").innerHTML = "Hello \
World!";

 

將字串定義為物件

JavaScript字串的定義通常為: var x= "Berry"。

字串也可以定義為物件: var y= new String("Berry")。

<!DOCTYPE html>
<html>
<body>
    <p id="name"></p>

    <script>
        var x = "Berry";              // x 為字串
        var y = new String("Berry");  // y 為物件

        document.getElementById("name").innerHTML =
        typeof x + "<br>" + typeof y;
    </script>

</body>
</html>

 

字串的方法與屬性

因為JavaScript的字串可以為物件，因此在字串變數加上方法或屬性執行時，字串會被當作物件執行。

 

取字串長度

length

length : 回傳字串的長度

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>

</body>
</html>

txt.length 取得字串txt的長度。

 

取字串內容的位置

indexOf( )

indexOf( ) : 回傳在字串中第一次找到與( )中文字匹配的位置。

<html>
<body>
    <p id="p1">大家好，我是Berry</p>

    <p id="demo"></p>

    <script>

        var string=document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = string.indexOf("Berry")

    </script>
</body>
</html>

indexOf("Berry") 取得字串中Berry開頭B為第幾個字，在計算字串位置時，由0開始計算。

 

lastIndexOf( ) 

lastIndexOf( ) : 回傳在字串中最後找到與( )中文字匹配的位置。

<!DOCTYPE html>
<html>
<body>
    <p id="p1">Berry: 大家好，我是Berry</p>

    <p id="demo"></p>

    <script>

        var string=document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = string.lastIndexOf("Berry")

    </script>
</body>
</html>

lastindexOf("Berry") 取得字串中Berry開頭y為第幾個字，在計算字串位置時，由0開始計算。

當indexOf()與lastIndexOf()方法在找不到指定文字時，會回傳-1。

JavaScript在計算位置的時候，從0開始算起，0是第一個，1是第二個，2是第三個...以此類推。

 

search( )

search( ) : 回傳在字串中與( )中文字匹配的位置。

<!DOCTYPE html>
<html>
<body>
    <p id="p1">大家好，我是Berry</p>

    <p id="demo"></p>

    <script>

        var string=document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = string.search("Berry")

    </script>
</body>
</html>

search("Berry") 取得字串中Berry開頭B為第幾個字，在計算字串位置時，由0開始計算。

 

擷取文字

slice( )

slice( ) : 回傳所擷取的指定位置的字串

<!DOCTYPE html>
<html>
<body>
    <p id="p1">大家好，我是Berry~!</p>

    <p id="demo"></p>

    <script>

        var string=document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = string.slice(4,11);

    </script>
</body>
</html>

slice( ) 有兩個參數，第一個參數為起始位置，第二個參數為結束位置。

slice(4, 11) 參數中，4表示從第4個字開始，11表示結束於第11個字 。即為擷取順序位於第4~11的內容。

 

若沒有給第二個參數，slice( )會一直擷取到字串結束。

<!DOCTYPE html>
<html>
<body>
    <p id="p1">大家好，我是Berry~!</p>

    <p id="demo"></p>

    <script>

        var string=document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = string.slice(4);

    </script>
</body>
</html>

slice(4) 表示從字串第四個開始，一直取到字串結尾。

slice( ) 允許負數的參數。若參數為負數，在搜尋字串時會由字串的最後一個字開始計算。

<!DOCTYPE html>
<html>
<body>
    <p id="p1">大家好，我是Berry~!</p>

    <p id="demo"></p>

    <script>

        var string=document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = string.slice(-9,-2);

    </script>
</body>
</html>

slice(-9,-2) 表示從字串的結尾往前數9個擷取到結尾往前數2個。

 

substring( )

substring( ) : 與slice( )方法相同，回傳所擷取的指定位置的字串。差別在於substring( )不允許負數的參數。

<!DOCTYPE html>
<html>
<body>
    <p id="p1">大家好，我是Berry~!</p>

    <p id="demo"></p>

    <script>

        var string = document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = string.substring(4, 11);

    </script>
</body>
</html>

substring(4, 11) 表示從字串第4個開始擷取到字串第11個。

 

substr( )

substr( ) :  與slice( )方法相同，回傳所擷取的指定位置的字串。差別在於substr( )的第二個參數表示擷取的字串長度，而不是結束位置。

<!DOCTYPE html>
<html>
<body>
    <p id="p1">大家好，我是Berry~!</p>

    <p id="demo"></p>

    <script>

        var string = document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = string.substr(4, 7);

    </script>
</body>
</html>

substr(4, 7) 表示從字串第4個開始擷取7個字。

charAt( )

charAt( ) : 返回指定位置的字。

<!DOCTYPE html>
<html>
<body>
    <p id="p1">大家好，我是Berry~!</p>

    <p id="demo"></p>

    <script>

        var string = document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = string.charAt(6);

    </script>
</body>
</html>

charAt(6) 表示回傳字串中第六個字。

 

替換字串內容

replace( )

replace( ) : 可以將字串中的字替換成其他文字

<!DOCTYPE html>
<html>
<body>
    <p id="p1">大家好，我是Berry~!</p>

    <p id="demo"></p>

    <script>

        var string = document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = string.replace("Berry", "Hanna");

    </script>
</body>
</html>

replace("Berry", "Hanna") 表示將字串中的Berry替換成Hanna。

 

replace( )方法會將第一個搜尋到相對應的Berry字串替換成Hanna，若要將所有對應到的字串都做替換，可以在第一個參數加上g符號。

<!DOCTYPE html>
<html>
<body>
    <p id="p1">Berry:大家好，我是Berry~!</p>

    <p id="demo"></p>

    <script>

        var string = document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = string.replace(/Berry/g, "Hanna");

    </script>
</body>
</html>

replace(/Berry/g, "Hanna") 在第一個參數加上g符號(global match)，替換所有對應到的字串。

 

英文的大小寫轉換

toUpperCase( )

toUpperCase( ) : 將英文字母轉換成大寫

<!DOCTYPE html>
<html>
<body>

    <p id="p1">大家好，我是Berry~!</p>

    <p id="demo"></p>

    <script>
        var text = document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = text.toUpperCase();
    </script>

</body>
</html>

toUpperCase( ) 表示將字串的所有英文字母轉換成大寫。

 

toLowerCase( )

toLowerCase( ) : 將英文字母轉換成小寫

<!DOCTYPE html>
<html>
<body>

    <p id="p1">大家好，我是Berry~!</p>

    <p id="demo"></p>

    <script>
        var text = document.getElementById("p1").innerHTML;
        document.getElementById("demo").innerHTML = text.toLowerCase();
    </script>

</body>
</html>

toLowerCase( ) 表示將字串的所有英文字母轉換成小寫。

 

字串JOIN

concat( )

concat( ) : 將多個字串結合

<!DOCTYPE html>
<html>
<body>
    <p id="p1">大家好</p>
    <p id="p2">我是Berry</p>
    <p id="p3">~!</p>
    <p id="demo"></p>

    <script>
        var text = document.getElementById("p1").innerHTML;
        var text2 = document.getElementById("p2").innerHTML;
        var text3 = document.getElementById("p3").innerHTML;

        document.getElementById("demo").innerHTML = text.concat(",", text2,"",text3);
    </script>
</body>
</html>

concat(",", text2,"",text3) 將參數中的字串相加。即為"大家好"+","+"我是Berry"+""+"~!"。

 

將字串轉換為陣列

split( )

split( ) : 將字串轉換成陣列

<!DOCTYPE html>
<html>
<body>
    <p id="p1">A,B,C,D,E,F</p>

    <p id="demo"></p>

    <script>

        var string = document.getElementById("p1").innerHTML;
        var arry = string.split(",");
        document.getElementById("demo").innerHTML = arry[0];

    </script>
</body>
</html>

var arry = string.split(",") 以,做區隔，將字串放入陣列。

arry[0] 取出陣列中第一個值。

 

若沒有符號作為區隔，可以用""區隔字串，將每個字母切開放入陣列。

<!DOCTYPE html>
<html>
<body>
    <p id="p1">ABCDEF</p>

    <p id="demo"></p>

    <script>

        var string = document.getElementById("p1").innerHTML;
        var arry = string.split("");
        document.getElementById("demo").innerHTML = arry[0];

    </script>
</body>
</html>

var arry = string.split("") 將每個字母隔開放入陣列。

arry[0] 取出陣列中第一個值。

 

 END 

回目錄 

系列文章

本頁段落

標籤雲

最新留言