JavaScript: Đối tượng String

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Một chuỗi trong JavaScript là một tập hợp các ký tự và được đặt trong cặp nháy kép hoặc nháy đơn, ta có thể đối xử với các chuỗi như là các đối tượng. Đối tượng chuỗi cũng được gọi là đối tượng wrapper vì nó cho phép gộp bản thân nó với một chuỗi nguyên thủy, cho phép ta áp dụng các thuộc tính và phương thức cho nó. JavaScript coi bất kỳ hằng chuỗi hay biến chuỗi nào đều là đối tượng chuỗi.

Ta có thể tạo một đối tượng chuỗi theo cách là cách ngầm định bằng cách gán cho một biến nào đó một chuỗi, và biến chứa chuỗi này gọi là chuỗi nguyên thủy, hoặc bằng cách tạo tường mình một đối tượng String với từ khóa new và hàm tạo đối tượng String(), và đương nhiên ta có quyền áp dụng các thuộc tính và phương thức chuỗi cho cả cách tạo chuỗi ngầm định và tường minh.

Cú pháp

var tên_chuỗi = "chuỗi";

Hoặc:

var tên_chuỗi = new String("chuỗi");

Ví dụ:

var title="JavaScript by Example";

var title=new String("JavaScript by Example");

Ví dụ áp dụng:

    <html><head><title>The String Object</title></head>

    <body bgcolor=pink><font face="arial" size=+1>

    <h2>Primitive and String Objects</h2>

    <script>

1       var first_string = "The winds of war are blowing.";

2       var next_string = new String("There is peace in the valley.");

3       document.write("The first string is of type<em> "+

                       typeof(first_string));

        document.write(".</em><br>The second string is of type<em> "+

4                      typeof(next_string) +".<br>");

    </script>

    </body>

    </html>

GIẢI THÍCH

1. Tạo một chuỗi có tên first_string theo cách ngầm định, đây là cách tạo chuỗi phổ biến nhất.

2. Tạo một chuỗi có tên next_tring theo cách tường mình.

3. Kiểm tra kiểu dữ liệu của biến first_string bằng hàm typeof() xem có đúng nó là chuỗi hay không.

4. Kiểm tra kiểu dữ liệu của biến next_string xem nó có là chuỗi hay không.

Các thuộc tính của đối tượng String

Một đối tượng String nào đó chỉ có hai thuộc tính như mô tả ở bảng dưới đây, trong đó thuộc tính length hay được sử dụng nhất, nó được dùng để lấy kích thước chuỗi. Thuộc tính prototype cho phép ta thêm các thuộc tính và phương thức theo ý của ta để có được chuỗi tùy chỉnh theo ý muốn.

Thuộc tính

Mô tả

length

Trả về độ dài hay kích thước chuỗi

prototype

Dùng để định nghĩa thêm thuộc tính và phương thức cho đối tượng String

Ví dụ 1:

    <html><head><title>The String Object</title></head>

    <body bgColor="lightblue">

    <font face="arial" size=+1>

    <h3>Length of Strings</h3>

    <script>

1       var first_string = "The winds of war are blowing.";

        var next_string = new String("There is peace in the valley.");

2       document.write("\""+first_string +"\" contains "+first_string.length + " characters.");

3       document.write("<br>\""+ next_string+"\" contains "+next_string.length+" characters.<br>");

        document.write("<font size=-1><em>...not to imply that war is equal to peace...<br>");

    </script>

    </body>

    </html>

GIẢI THÍCH

1. Tạo hai chuỗi theo cách nguyên thủy và tường minh.

2. Dùng thuộc tính length để xác định độ dài của chuỗi first_string.

3. Xác định độ dài cho chuỗi next_string.

Ví dụ 2:

    <html><head><title>The Prototype Property</title>

    <script language = "javascript">

    // Tạo hàm tùy chỉnh chuỗi

1       function ucLarge(){

            var str=this.bold().fontcolor("white").

               toUpperCase().fontsize("22");

            return( str);

        }

2       String.prototype.ucL=ucLarge;

    </script>

    </head>

    <body bgcolor=black><center>

    <script>

3       var string="Watch Your Step!!";

4       document.write(string.ucL()+"<br>");

    </script>

    <img src="high_voltage.gif">

    </body></html>

GIẢI THÍCH

1. Tạo một hàm có tên ucLarge(), hàm này có nhiệm vụ tạo và trả về một chuỗi in hoa, chữ nét đậm, màu trắng và kích thước là 22.

2. Dùng thuộc tính prototype để tạo thuộc tính và phương thức mới. Trong trường hợp này ta tạo một phương thức mới cho đối tượng chuỗi có tên ucL và nó được áp hàm ucLarge() ở trên.

3. Tạo một đối tượng chuỗi mới có tên string.

4. Sử dụng phương thức mới tạo ra là ucL() cho đối tượng chuỗi string.

Các phương thức tạo hiệu ứng chuỗi

Có hai loại phương thức chuỗi: Phương thức chuỗi định dạng mô phỏng các thẻ HTML và phương thức dùng để thao tác chuỗi như tìm vị trí trong chuỗi, thay thế chuỗi bằng chuỗi khác, chuyển chữ hoa chữ thường cho chuỗi, ...

Bảng dưới đây liệt kê các phương thức sẽ tạo hiệu ứng thay đổi dạng hiển thị của chuỗi bằng cách áp dụng các thẻ HTML cho chuỗi, ví dụ như thay đổi cỡ chữ, kiểu chữ, màu chữ, ... Việc sử dụng các phương thức này để thay đổi style của chuỗi trong các chương trình JavaScript sẽ dễ dang hơn thay vì sử dụng các thẻ HTML.

Phương thức

Tương ứng HTML

String.anchor(Name)

<a name="Name">String</a>

String.big()

<big>String</big>

String.blink()

<blink>String</blink>

String.bold()

<b>String</b>

String.fixed()

<tt>String</tt>

String.fontcolor(color)

<font color="màu">String</font>

ví dụ, <font color="blue">String</font>

String.fontsize(size)

<font size="size">String</font>

ví dụ, <font size="+2">String</font>

String.italics()

<i>String</i>

String.link(URL)

<a href="URL">String</a>

ví dụ, <a href="http://v1study.com">String</a>

String.small()

<small>String</small>

String.strike()

<strike>String</strike> (tạo chữ gạch giữa)

String.sub()

<sub>String</sub> (tạo chỉ số dưới)

String.sup()

<sup>String</sup> (tạo chỉ số trên)

Ví dụ:

    <html>

    <head><title>String object</title>

    </head>

    <body bgcolor="yellow">

    <font size="+1" face="arial">

    <h2>Working with String Objects:</h2>

    <script>

1   var str1 = new String("Hello world!");

2   var str2 = "It's a beautiful day today.";

        document.write(str1) + "<br>";

3       document.write(str1.fontcolor("blue")+"<br>");

4       document.write(str1.fontsize(8).fontcolor("red").

            bold()+"<br>");

5       document.write(str1.big()+ "<br>");

6       document.write("Good-bye, ".italics().bold().big() +

            str2 + "<br>");

    </script>

    </body></html>

GIẢI THÍCH

1. Tạo đối tượng chuỗi có tên str1 bằng phương pháp tường minh.

2. Tạo một chuỗi nguyên thủy có tên str2.

3. Dùng phương thức fontcolor() để đổi màu cho chữ.

4. Dùng liên tiếp các phương thức fontsize(), fontcolor() và bold() chuỗi như sử dụng thuộc tính.

5, 6. Nối hằng chuỗi với chuỗi str2 rồi hiển thị.

Các phương thức thao tác chuỗi

Phương thức

Mô tả

charAt(index)

Trả về ký tự tại vị trí chỉ số index

charCodeAt(index)

Trả về mã Unicode của ký tự tại vị trí chỉ số index

concat(string1, ..., stringn)

Nối các chuỗi với nhau

fromCharCode(codes)

Tạo một chuỗi từ một tập các mã ký tự phân tách nhau bằng dấu phẩy (,)

indexOf(substr, startpos)

Trả về chỉ số của chuỗi con substr tìm thấy lần đầu bắt đầu tìm từ vị trí có chỉ số startpos

lastIndexOf(substr, startpos)

Trả về chỉ số cuối cùng mà chuỗi con được tìm thấy bắt đầu tìm từ vị trí chỉ số startpos

replace(searchValue, replaceValue)

Thay chuỗi searchValue bằng chuỗi replaceValue

search(regexp)

Tìm biểu thức chính quy trong chuỗi và trả về chỉ số nơi nó được tìm thấy

slice(startpos, endpos)

Trả về chuỗi bắt đầu từ chỉ số startpos đến endpos

split(delimiter)

Tách chuỗi thành một mảng các chuỗi dựa trên chuỗi cắt delimiter

substr(startpos, endpos)

Trả về chuỗi con bắt đầu tử chỉ số startpos đến nhưng không bao gồm ký tự ứng với chỉ số endpos

toLocaleLowerCase()

Trả về bản sao của chuỗi đã được chuyển đổi thành chữ thường

toLocaleUpperCase()

Trả về bản sao của chuỗi đã được chuyển đổi thành chữ hoa

toLowerCase()

Chuyển tất cả các chữ hoa của chuỗi thành chữ thường

toString()

Chuyển chuỗi sang dạng chuỗi nguồn

toUpperCase()

Chuyển tất cả các ký tự trong chuỗi thành ký tự in hoa

valueOf

Trả về đối tượng dạng giá trị chuỗi

Các phương thức tìm vị trí trong chuỗi

Chuỗi con là một phần của chuỗi đã có sẵn. Trong nhiều trường hợp ta phải tìm chuỗi con trong chuỗi có sẵn, ví dụ như trong địa chỉ email người dùng điền vào có chứa '@' hay không.

Các phương thức indexOf() và lastIndexOf() được dùng để tìm các thể hiện đầu tiên hoặc cuối cùng của chuỗi con trong chuỗi. Hai phương thức này đều phân biệt hoa/thường. Ký tự đầu tiên trong chuỗi có chỉ số là 0 giống như mảng. Nếu phương thức tìm thấy chuỗi con trong chuỗi thì nó sẽ trả về vị trí của ký tự đầu tiên của chuỗi con, ngược lại nếu không tìm thấy thì trả về -1.

Ví dụ 1:

    <html><head><title>Substrings</title>

    </head>

    <body bgcolor=lightgreen>

    <font face="arial" size="+1">

    Searching for an @ sign

    <script>

1       var email_addr=prompt("What is your email address? ","");

2       while(email_addr.indexOf("@") == -1 ){

3           alert( "Invalid email address.");

            email_addr=prompt("What is your email address? ",""); }

        document.write("<br>OK.<br>");

    </script>

    </body></html>

GIẢI THÍCH

1. Người dùng được nhắc để điền địa chỉ email bằng hàm prompt() và giá trị nhập vào sẽ được gán cho biến email_addr.

2. Dùng vòng lặp while để kiểm tra xem biến chuỗi email_addr có ký tự '@' trong chuỗi hay không, nếu không có thì yêu cầu nhập lại cho đến khi có.

3. Đưa ra thông báo cho người dùng dùng biết địa chỉ email không hợp lệ).

Ví dụ 2:

    <html>

    <head><title>String Manipulation</title></head>

    </head>

    <body>

    <h2>Working with String Manipulation Methods</h2>

    <script>

        function break_tag(){

            document.write("<br>");

        }

        document.write("<h3>");

1       var str1 = new String("The merry, merry month of June...");

        document.write("In the string:<em> "+ str1 );

2       document.write("</em> the first 'm' is at position " +

                       str1.indexOf("m"));

        break_tag();

3       document.write("The last 'm' is at position " +

                       str1.lastIndexOf("m"));

        break_tag();

4       document.write("<em>str1.substr(4,5)</em> returns<em> " +

                       str1.substr(4,5));

        break_tag();

        document.write(str1.toUpperCase());

        document.write("</h3>");

    </script>

    </body>

    </html>

Các phương thức tách chuỗi con

Có thể bạn sẽ phải thực hiện nhiều công việc để tìm ra được chuỗi con nằm trong chuỗi, sau đó trích xuất ra chuỗi con đó. Ví dụ như ta cần tìm ký tự '@' trong địa chỉ email, rồi từ đó lấy tên người dùng hoặc tên server hoặc tên domain. Để làm điều này thì JavaScript cung cấp các phương thức splice(), split(), charAt(), substr(), và substring().

Ví dụ:

    <html><head><title>Extracting Substrings</title>

    </head>

    <body bgcolor=lightgreen>

    <font face="arial" size="+1">

    Extracting substrings

    <font size="-1">

    <script>

1       var straddr = "DanielSavage@dadserver.org";

        document.write("<br>His name is<em> " +

2           straddr.substr(0,6) + "</em>.<br>");

3       var namesarr = straddr.split("@" );

4       document.write( "The user name is<em> " +  namesarr[0] +

                        "</em>.<br>");

5       document.write( "and the mail server is<em> " +  namesarr[1] +

                        "</em>.<br>");

6       document.write( "The first character in the string is <em>" +

                        straddr.charAt(0)+ "</em>.<br>");

7       document.write( "and the last character in the string is <em>"

                        + straddr.charAt(straddr.length - 1)

                        + "</em>.<br>");

    </script>

    </body></html>

GIẢI THÍCH

1. Gán địa chỉ email cho chuỗi straddr.

2. Tách lấy chuỗi con từ chuỗi straddr từ vị trí chỉ số 6 là lấy 6 ký tự.

3. Tách chuỗi straddr thành các chuỗi con bằng chuỗi cắt là "@" và lưu các chuỗi này vào biến mảng namesarr

4. HIển thị phần tử đầu tiên của mảng namesarr ra trình duyệt, nó chính là nickname của địa chỉ email.

5. Hiển thị phần tử thứ 2 của mảng namesarr.

6. Hiển thị ký tự đầu tiên của chuỗi straddr.

7. Hiển thị ký tự cuối cùng của chuỗi straddr.

Các phương thức tìm kiếm và thay thế

Trong thuật ngữ xử lý phần mềm bạn sẽ luôn tìm thấy motoj số cơ chế tìm kiếm mẫu trong chuỗi hay thay thế chuỗi bằng chuỗi khác. JavaScript cung cấp các phương thức để làm được những điều này, chúng bao gồm cá phương thức search(), match() và replace().

Ví dụ:

    <html><head><title>Search and Replace</title>

    </head>

    <body bgcolor=lightgreen>

    <font face="arial" size="+1">

    Search and Replace Methods<br>

    <font size="-1">

    <script>

1       var straddr = "DanielSavage@dadserver.org";

        document.write( "The original string is "+ straddr + "<br>");

        document.write( "The new string is "+

2       straddr.replace("Daniel","Jake")+"<br>");

3       var index=straddr.search("dad");

        document.write("The search() method found \"dad\" at

                       position "+ index +"<br>");

4       var mysubstr=straddr.substr(index,3);

        document.write("After replacing \"dad\" with \"POP\" <br>");

5       document.write(straddr.replace(mysubstr,"POP")+"<br>");

    </script>

    </body></html>

GIẢI THÍCH

1. Gán một địa chỉ email cho biến chuỗi straddr.

2. Dùng phương thức replace() thay chuỗi "Deniel" bằng chuỗi "Jake" của biến chuỗi straddr.

3. Dùng phương thức search() để tìm chuỗi "dad" trong straddr.

4. Dùng phương thức substr để lấy một phần của chuỗi và lưu vào biến mysubstr.

5. Dùng hàm replace() để thay chuỗi con mysubstr trong chuỗi straddr bằng chuỗi "POP".

» Tiếp: Đối tượng Number
« Trước: Đối tượng Math
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!