處理字串

簡介String 物件

String 物件

    var guitar_string = new String("G" );

或者更簡單方式：

       var guitar_string = "G";

String 物件的屬性

constructor 屬性

對創建該物件的函數的引用 
<script language="JavaScript">
<!--
    var guitar_string = new String("G" );
    window.alert(guitar_string.constructor);
//-->
</script>

length 屬性

<html>
<head>
<script language="JavaScript">
<!--
    var myname = new String("John");
//-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
    document.write("The name has " + myname.length + " characters.");
//-->
</script>
</body>
</html>

用 length 屬性找出最後一個字元

<script language="JavaScript">
<!--
    var the_text = "Character";
    window.alert( "The last character of " + the_text + " is " + the_text.charAt(the_text.length-1) );
//-->
</script>

prototype 屬性

prototype 屬性允許在一物件中加入屬性與方法, 例如 
<SCRIPT language="JavaScript">
<!--
    String.prototype.attitude = "cool";
    var rightnow = new String("Joe");
    window.alert("This place is " + rightnow.attitude);
//-->
</script>

看效果

String 物件的方法

charAt()方法

返回在指定位置的字元。

找出字元

<body>
<script language="JavaScript">
<!--
    var the_text = "Character";
    window.alert( "The first character of " + the_text + " is " + the_text.charAt(0) );
//-->
</script>
</body>

charCodeAt()方法

返回在指定的位置的字元的 Unicode 編碼。 
<script language="JavaScript">
<!--
    var the_text = "Character";
    window.alert( "The first character of " + the_text + " is?q&#" + the_text.charCodeAt(0) + ";");
//-->
</script>

看效果

concat()方法

連接兩個或更多字串，并返回新的字符串。 
<script language="JavaScript">
<!--
    var string1 = "太陽";
    var string2 = "星星";
    var string3 = "月亮";
    window.alert( string1.concat(string2, string3) );

    window.alert( string3.concat(string2, string1) );
//-->
</script>

看效果

fromCharCode()方法

將 Unicode 編碼轉為字元。 
window.alert( String.fromCharCode(72,73) );

看效果

indexOf()方法

字串使用indexOf() 來定位字串中某一個指定的字串首次出現的位置： 
<script language="JavaScript">
<!--
    var the_text = "Cool";
    var position = the_text.indexOf("C");
    window.alert( "Your character is at position " + position );
//-->
</script>

<script language="JavaScript">
<!--
    var the_text = "Cool";
    var position = the_text.indexOf("C");
    if ( position == -1)
        window.alert( "Your character is not in the string! " );
    else
        window.alert( "Your character is at position " + position );
//-->
</script>

看效果

lastIndexOf()方法

從後向前搜索字串。 
<script language="JavaScript">
<!--
    var the_text = "Cool";
    var position = the_text.lastIndexOf("o");
    if ( position == -1)
        window.alert( "Your character is not in the string! " );
    else
        window.alert( "Your character is at position " + position );
//-->
</script>

match()方法

match()函數用來查找字串中特定的字串，並且如果找到的話，則返回這個字串。 
<script>
var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("world!"));
</script>

看效果

replace()方法

replace()方法在字串中用某些字元替換另一些字元。replace() 方法不會更改調用它的字串。 它返回一個新字串。 預置情況下，replace() 方法只替換第一個匹配項。 
<body>
<p>替換 "Microsoft" 為 "W3cSchool" :</p>
<button onclick="myFunction()">點我
<p id="demo">請訪問 Microsoft!

<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML;
    var txt = str.replace("Microsoft","W3cSchool");
    document.getElementById("demo").innerHTML = txt;
}
</script>

看效果

search()方法

search() 方法用於檢索字串中指定的子字串，或檢索與正則表達式相匹配的子字串。

如果沒有找到任何匹配的子串，則返回-1。 

<body>
<p id="demo">單擊顯示查找的位置</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction(){
	var str="Visit W3CSchool!";
	var n=str.search("W3CSchool");
	document.getElementById("demo").innerHTML=n;
}
</script>
</body>

看效果

slice()方法

提取字串的片斷，并在新的字符串中返回被提取的部分。 
<script language="JavaScript">
<!--
    var the_text = "Do not cut this short!";
    var shorter_string = the_text.slice(0,7);
    window.alert(shorter_string);
//-->
</script>

看效果

split()方法

把字串分割為字串組。
<body>
<H2>Fruit to Eat Today:</H2>
<script language="JavaScript">
<!--
    var the_text = "orange:apple:pear:grape";
    var split_text = the_text.split(":");
    var end_count = split_text.length;
    for (count=0; count<end_count; count+=1)
    {
        document.write( split_text[count] + "<br>" );
    }
//-->
</script>
</body>

看效果

substr()方法

substr()方法可在字串中抽取從開始下標開始的指定數目的字元。 
string.substr( start , length )

參數 說明　
start 必需。要抽取的子串的參數 start，必須是數值。如果是負數，那麼該參數聲明從字串的尾部開始算起的位置。 也就是說，-1 指字串中最後一個字元，-2 指倒數第二個字元，以此類推。
length 可選。一個非負的整數，要提取的子字串的長度。 如果省略該參數，那么返回的子字串會一直到字串的結尾。

下例從字串從 0 開始, 取出 8 個字元。 

<script language="JavaScript">
<!--
    var the_text = "Hello world!";
    var shorter_string = the_text.substr(0,8);
    window.alert(shorter_string);
//-->
</script>

看效果

substring()方法

string.substring(from, to)

參數 說明　
from 必需。一個非負的整數，規定要提取的子串的第一個字元在 string Object 中的位置。
to 可選。一個非負的整數，比要提取的子串的最後一個字元在 string Object 中的位置多 1。 如果省略該參數，那么返回的子字串會一直到字串的結尾。

下例從字串取出 0 到 8 的字元。 

<script language="JavaScript">
<!--
    var the_text = "Hello world!";
    var shorter_string = the_text.substring(0,9);
    window.alert(shorter_string);
//-->
</script>

看效果

toString()方法

toString()函數用于將當前物件以字串的形式返回。

Javascript的基本類型有五种，分別是Number、String、Undefined、null和Boolean; 內置物件有Array、Boolean、Object、Function、Number、String等。

Array的toString()方法

Array方法的toString方法，是將 Array 的每個元素轉換為字串，並將它們依次連接起來，兩個元素之間用英文逗號作為分隔符進行拼接。 
<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = fruits.toString();
document.getElementById("demo").innerHTML = text;
</script>

看效果

Boolean的toString()方法

如果布林值是true，則返回 "true"。否別返回 "false"。

Object的toString()方法

返回 "[object ObjectName]"，其中 ObjectName 是物件類型的名稱。
<script language="JavaScript">
<!--
    work_car = {seats:"cloth", engine:"V-6", theradio:"Tape Deck" };
    document.write( work_car.toString() );
//-->
</script>

看效果

Function 的 toString()方法

返回如下格式的字串，其中 functionname 是一個函數的名稱，此函數的 toString 方法被調用： 
      "function functionname() { [native code] }”
例如 
function func() {
   console.log("I am a function");
}
func.toString();

輸出： 

"function func() {
   console.log("I am a function");
}"

Number 的 toString()方法

返回數值的字串表示。還可返回以指定進制表示的字串。 
number.toString(radix)

參數 說明　
radix 可選。規定表示數字的基數，使 2 ~ 36 之間的整數。若省略該參數，?使用基數10。但是要注意，如果該參數是 10 以外的其他值，則ECMAScript 標准允許實現返回任意值。
  • 2 - 數字以二進制值顯示
  • 8 - 數字以八進制值顯示
  • 16 - 數字以十六進制值顯示 

<body>
<script>
function myFunction() {
var num = 15;
var a = num.toString();
var b = num.toString(2);
var c = num.toString(8);
var d = num.toString(16);
var n = a + "<br>" + b + "<br>" + c + "<br>" + d;
document.getElementById("demo").innerHTML=n;
}
</script>

<p>Click the button to display the formatted numbers.
<p><button onclick="myFunction()">點我</button>

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

看效果

String的 toString()方法

返回 String 物件的值。

toLowerCase()方法

<script language="JavaScript">
<!--
    var the_text = "Do not cut this short!";
    window.alert( the_text.toLowerCase() );
//-->
</script>

toUpperCase()方法

<script language="JavaScript">
<!--
    var the_text = "Do not cut this short!";
    window.alert( the_text.toUpperCase() );
//-->
</script>

String HTML 包裝方法

HTML 包裝方法返回加入了適當HTML標籤的字串。

anchor()方法

<body>
<script language="JavaScript">
<!--
    var the_text = "處理字串";
    var text_anchor = the_text.anchor("top");
    document.write(text_anchor);
//-->
</script>
</body>

將會輸出下面的 HTML： 

<a name="top">處理字串</a>

big()方法

<body>
<script language="JavaScript">
<!--
    var the_text = "大型文字";
    document.write( the_text + "<br>" + the_text.big() );
//-->
</script>
</body>

blink()方法

<body>
<script language="JavaScript">
<!--
    var the_text = "閃動文字";
    document.write( the_text + "<br>" + the_text.blink() );
//-->
</script>
</body>

bold()方法

<body>
<script language="JavaScript">
<!--
    var the_text = "加粗文字";
    document.write( the_text + "<br>" + the_text.bold() );
//-->
</script>
</body>

fixed()方法

以打字機字體顯示字串。 
<body>
<script language="JavaScript">
<!--
    var the_text = "I am typewriter text, on a computer!";
    document.write( the_text.fixed() );
//-->
</script>
</body>

fontcolor()方法

<body>
<script language="JavaScript">
<!--
    var the_text = "姓名";
    document.write( "請先確定" + the_text.fontcolor("red") );
//-->
</script>
</body>

fontsize()方法

<body>
<script language="JavaScript">
<!--
    var the_text = "請先確定姓名";
    document.write( the_text.fontsize(5) );
//-->
</script>
</body>

italic()方法

<body>
<SCRIPT language="JavaScript">
<!--
    var the_text = "斜體文字";
    document.write( the_text + "<br>" + the_text.italic() );
//-->
</SCRIPT>
</body>

link()方法

<body>
<script language="JavaScript">
<!--
    var the_text = "Javascript Programming";
    var text_link = the_text.link("http://www.csie.ntu.edu.tw/~sylee/courses/webprog/index.html");
    document.write(text_link);
//-->
</script>
</body>
下列程式建立一個指到網頁某處的錨點, 並由點選鏈結跳到該處。 
<body>
<script language="JavaScript">
<!--
    var the_text = "處理字串";
    var text_anchor = the_text.anchor("top");
    document.write("<H2>" + text_anchor +"</H2>");
//-->
</script>

<P>Some text in body.
<script language="JavaScript">
<!--
    var the_text = "回到啟始點";
    var text_link = the_text.link("#top");
    document.write(text_link);
//-->
</script>
</body>

small()方法

<body>
<script language="JavaScript">
<!--
    var the_text = "小型文字";
    document.write( the_text + "<br>" + the_text.small() );
//-->
</script>
</body>

strike()方法

<body>
<script language="JavaScript">
<!--
    var the_text = "I shouldn't wear stripes!";
    document.write( the_text + "<br>" + the_text.strike() );
//-->
</script>
</body>

sub()方法

<body>
<script language="JavaScript">
<!--
    var sub_text = "2";
    document.write( "Water is H" + sub_text.sub() + "O");
//-->
</script>
</body>

sup()方法

<body>
<script language="JavaScript">
<!--
    var sup_text = "2";
    document.write( "2 " + sup_text.sup() + " is equal to 4.");
//-->
</script>
</body>

看效果

整合在一起

<html>
<head>
<script language="JavaScript">
<!--
function get_name()
{
    var the_text=window.prompt("Enter your first and last name.","");
    if(the_text.indexOf(" ") == -1)         //不是有名有姓
    {
        window.alert("Put a space between your first and last name! Try again.");
        get_name();
    }
    var split_text = the_text.split(" ");     //姓和名分開
    if ((split_text[0].charAt(0)!="Z") && (split_text[0].charAt(0)!="z"))        //名字不是Z或z起頭
    {
        var shorter_fn_string = split_text[0].substring(1,split_text[0].length) ;
        new_fn_string = "W" + shorter_fn_string;          //名字改成W起頭
    }
    else
    {
        var shorter_fn_string = split_text[0].substring(1,split_text[0].length) ;
        new_fn_string = "Z" + shorter_fn_string;         //否則名字改成Z起頭
    }
    if ((split_text[1].charAt(0)!="Z")&&(split_text[1].charAt(0)!="z"))       //姓不是Z或z起頭
    {
        var shorter_ln_string = split_text[1].substring(1,split_text[1].length) ;
        new_ln_string = "W" + shorter_ln_string;         //姓改成W起頭
    }
    else
    {
        var shorter_ln_string = split_text[1].substring(1,split_text[1].length) ;
        new_ln_string = "Z" + shorter_ln_string;         //否則姓改成Z起頭
    }
    document.write( "<H1>Welcome!  <p>Now your name is <font color='blue'>Mr. "
                              + new_fn_string + " " + new_ln_string  + "!</font></H1>");
}
//-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
get_name();
//-->
</script>
</body>
</html>

看效果