Javascript String Methods

12/07/2019

Bài sau » « Bài trước

String methods là các hàm xử lý chuỗi. Nó giúp ta làm việc với chuỗi dễ dàng hơn.

String Length

Thuộc tính length trả về độ dài của chuỗi.

var txt = "ABCD"; var len = txt.length; // Kết quả biến len là 4

Tìm chuỗi trong chuỗi

Phương thức indexOf() trả về vị trí đầu tiên của chuỗi được tìm kiếm. Xem ví dụ bên dưới:

var str = "Please locate where 'locate' occurs!"; var pos = str.indexOf("locate"); // Kết quả pos là 7

Javascript đếm vị trí bắt đầu từ 0.

Phương thức lastIndexOf() trả về vị trí cuối cùng của chuỗi được tìm kiếm. Xem ví dụ bên dưới:

var str = "Please locate where 'locate' occurs!"; var pos = str.lastIndexOf("locate"); // Kết quả pos là 21

Cả indexOf() lastIndexOf() đều trả về -1 nếu không tìm thấy kết quả.

Cả 2 phương thức này đều nhận tham số thứ 2 là vị trí bắt đầu tìm kiếm kết quả.

var str = "Please locate where 'locate' occurs!"; var pos = str.indexOf("locate",15); // Kết quả pos là 21

Phương thức lastIndexOf() tìm ngược từ cuối đến đầu, nghĩa là nếu tham số thứ 2 là 15, tìm kiếm bắt đầu từ vị trí số 15 đến kết thúc chuỗi, sau đó quay lại đầu chuỗi tìm đến vị trí 14.

var str = "Please locate where 'locate' occurs!"; var pos = str.lastIndexOf("locate", 15); // Kết quả pos là 7

Phương thức search()

Phương thức search() tìm kiếm một chuỗi cho một giá trị được chỉ định và trả về vị trí khớp đầu tiên.

var str = "Please locate where 'locate' occurs!"; var pos = str.search("locate"); // Kết quả pos là 7

Có lẽ bạn đang thắc mắc ?

Hai phương thức search()indexOf() như nhau ?

Cả hai cùng nhận tham số và trả về kết quả như nhau ?

Nhưng 2 phương thức này KHÔNG giống nhau. Dưới đây là các khác biệt:

  • Phương thức search() không thể nhận thêm tham số thứ 2 là vị trí bắt đầu tìm kiếm.
  • Phương thức indexOf() tìm kiếm giá trị không mạnh mẽ (regular expressions - Chúng ta sẽ học ở phần sau)

Các hàm cắt chuỗi

Ta có 3 phương thức mạnh mẽ để cắt chuỗi.

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

Phương thức slice()

Phương thức slice() cắt một phần của chuỗi và trả về phần được cắt trong chuỗi mới.

Phương thức này nhận 2 tham số: start là vị trí bắt đầu cắt, end là vị trí kết thúc (Tham số này có thể không cần).

Ví dụ bên dưới cắt chuỗi từ vị trí thứ 7 và kết thúc vị trí thứ 12 (13-1).

var str = "Apple, Banana, Kiwi"; var res = str.slice(7, 13); // Kết quả là Banana

Javascript đếm vị trí bắt đầu từ 0.

Nếu tham số là số âm, vị trí được tính từ cuối chuỗi.

Ví dụ bên dưới cắt chuỗi từ vị trí -12 đến -6:

var str = "Apple, Banana, Kiwi"; var res = str.slice(-12, -6); // Kết quả là Banana

Nếu bạn bỏ tham số thứ 2, phương thức sẽ cắt đến cuối chuỗi.

var str = "Apple, Banana, Kiwi"; var res = str.slice(7); // Kết quả là Banana, Kiwi

Hoặc đếm từ cuối và cắt đến cuối chuỗi :

var str = "Apple, Banana, Kiwi"; var res = str.slice(-12); // Kết quả là Banana, Kiwi

Vị trí âm không chạy trên IE 8 trở về trước.

Phương thức substring()

Phương thức substring() thì tương tự với phương thức slice().

Sự khác nhau là phương thức substring() không thể nhận tham số là vị trí âm.

var str = "Apple, Banana, Kiwi"; var res = str.substring(7, 13); // Kết quả là Banana

Nếu bạn bỏ tham số thứ 2, phương thức substring() sẽ cắt đến cuối chuỗi.

Phương thức substr()

Phương thức substr() thì tương tự với phương thức slice().

Sự khác nhau là tham số thứ 2 của phương thức này : length - độ dài kí tự cần cắt.

var str = "Apple, Banana, Kiwi"; var res = str.substr(7, 6); // Kết quả là Banana

Nếu bạn bỏ tham số thứ 2, phương thức substr() sẽ cắt đến cuối chuỗi.

var str = "Apple, Banana, Kiwi"; var res = str.substr(7); // Kết quả là Banana, Kiwi

Nếu tham số đầu tiên là giá trị âm, thì vị trí sẽ đếm từ cuối chuỗi.

var str = "Apple, Banana, Kiwi"; var res = str.substr(-4); // Kết quả là Kiwi. Cắt từ vị trí -4 đến cuối chuỗi. var res2 = str.substr(-4,2); // Kết quả là Ki. Cắt từ vị trí -4 và lấy 2 kí tự.

Thay thế chuỗi

Phương thức replace() dùng thể thay thế chuỗi thành chuỗi khác.

str = "Please visit Google!"; var n = str.replace("Google", "MasterFrontend"); // Kết quả là "Please visit MasterFrontend!".

Phương thức replace() không thay thế chuỗi được gọi. Nó trả về một chuỗi mới.

Mặc định, Phương thức replace() chỉ thay thế giá trị đầu tiên được tìm thấy.

str = "Please visit Google & Google!"; var n = str.replace("Google", "MasterFrontend"); // Kết quả là "Please visit MasterFrontend & Google!".

Mặc định, Phương thức replace() có phân biệt chữ hoa chữ thường. Viết chữ in hoa GOOGLE sẽ không thay thế được :

str = "Please visit Google & Google!"; var n = str.replace("GOOGLE", "MasterFrontend"); // Kết quả là "Please visit Google & Google!".

Để khắc phục vấn đề trên, ta dùng regular expression với kí hiệu /i (là chữ viết tắt của insensitive - không phân biệt chữ hoa chữ thường).

str = "Please visit Google & Google!"; var n = str.replace(/GOOGLE/i, "MasterFrontend"); // Kết quả là "Please visit MasterFrontend & Google!".

Regular expression không được viết trong dấu nháy

Để thay thế tất cả kết quả, ta dùng regular expression với kí hiệu /g (là chữ viết tắt của global).

str = "Please visit Google & Google!"; var n = str.replace(/GOOGLE/gi, "MasterFrontend"); // Kết quả là "Please visit MasterFrontend & MasterFrontend!".

Converting to Upper and Lower Case

Để chuyển chuỗi thành chữ in hoa ta dùng phương thức toUpperCase()

var text1 = "Hello World!"; // String var text2 = text1.toUpperCase(); // kết quả text2 là: HELLO WORLD!

Ngược lại, để chuyển chuỗi thành chữ thường ta dùng phương thức toLowerCase()

var text1 = "Hello World!"; // String var text2 = text1. toLowerCase(); // kết quả text2 là: hello world!

Phương thức concat()

Phương thức concat() dùng để nối 2 hay nhiều chuỗi với nhau.

var text1 = "Hello"; var text2 = "World"; var text3 = text1.concat(" ", text2); // Kết quả là : Hello World

Phương thức concat() có thể dùng thay cho toán tử +. Dưới đây là 2 ví dụ cho kết quả giống nhau:

var text = "Hello" + " " + "World!"; var text2 = "Hello".concat(" ", "World!"); // Cả 2 kết quả là: Hello World!

Tất cả các phương thức xử lý chuỗi đều trả về chuỗi mới. Nó không chỉnh sửa chuỗi gốc ban đầu, nó chỉ được thay thế.

String.trim()

Phương thức trim() xóa bỏ khoảng trắng 2 bên trái và phải của chuỗi.

var str = " Hello World! "; // Kết quả str là: "Hello World!"

Phương thức trim() không chạy trên IE 8 trở về trước.

Nếu bạn muốn sử dụng trên IE 8, bạn có thể sử dụng phương thức replace() với Regular expression:

var str = " Hello World! "; var new_str = str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

Cắt kí tự trong chuỗi

Có 3 phương thức cắt kí tự trong chuỗi:

  • charAt(position)
  • charCodeAt(position)
  • Thuộc tính truy cập [ ]

Phương thức charAt()

Phương thức charAt() trả về kí tự tại vị trí cắt.

var str = "HELLO WORLD"; str.charAt(0); // returns H

Phương thức charCodeAt()

Phương thức charCodeAt() trả về mã Unicode của kí tự tại vị trí cắt.

Mã code của kí tự này là UTF-16 là số từ 0 đến 65535.

var str = "HELLO WORLD"; str.charCodeAt(0); // returns 72

Thuộc tính truy cập [ ]

Từ ECMAScript 5 (2009) cho phép thuộc tính truy cập [ ] trong chuỗi.

var str = "HELLO WORLD"; str[0]; // returns H

Truy cập thuộc tính có một chút khó khăn:

  • Nó không hoạt động từ IE 7 trở về trước
  • Nó làm cho chuỗi giống như mảng (nhưng thực chất không phải)
  • Nếu không tìm thấy kí tự, [ ] trả về undefined, trong khi charAt() trả về chuỗi empty.
  • Nó là chỉ đọc. Ví dụ: str[0] = "A" không báo lỗi, nhưng nó không chạy được.

var str = "HELLO WORLD"; str[0] = "A"; // Không báo lỗi, nhưng không chạy được. str[0]; // returns H

Nếu bạn muốn làm việc với String như là array, thì hãy convert nó sang array.

Convert Strings thành Array

Một chuỗi có thể chuyển thành 1 mảng bằng việc sử dụng phương thức split().

var txt = "a,b,c,d,e"; // String txt.split(","); // Split theo dấu , txt.split(" "); // Split theo khoảng trắng txt.split("|"); // Split theo gạch đứng

Nếu điều kiện cắt bị bỏ trống, mảng trả về sẽ chứa toàn bộ chuỗi trong vị trí [0].

var txt = "Hello"; // String var txt2 = txt.split(); alert(txt2[0]); // kết quả txt2[0] là Hello

Nếu dấu phân cách là "", mảng được trả về sẽ là một mảng gồm các ký tự đơn:

var txt = "Hello"; // String var txt2 = txt.split(""); // txt2 = [H,e,l,l,o]; alert(txt2[0]); // Kết quả txt2[0] là chữ H

Bài sau » « Bài trước
Back to top