String trong Javascript

Trong hướng dẫn tự học Javascript này, bạn sẽ tìm hiểu cách tạo chuỗi (String) và thao tác với chuỗi trong JavaScript.

Hướng dẫn thao tác với String trong Javascript

1. String trong Javascript là gì?

String là một chuỗi.

Một chuỗi bao gồm các chữ cái, số, ký tự đặc biệt và giá trị số học hoặc kết hợp của tất cả.

Các chuỗi có thể được tạo bằng cách chèn chuỗi các ký tự trong các dấu nháy đơn (') hoặc dấu nháy kép ("), như trong ví dụ dưới đây:

var myString = 'Hello World!'; // Sử dụng nháy đơn để tạo chuỗi
var myString = "Hello World!"; // Sử dụng nháy kép để tạo chuỗi

Bạn có thể sử dụng dấu ngoặc kép và dấu nháy đơn kết hợp bên trong một chuỗi, miễn là chúng không khớp với nhau, ví dụ:

var str1 = "Sky's ơi"; // OK
var str2 = 'Tôi nói "Javascript" chứ không phải "Java"'; //OK
var str3 = "Nói là 'JS' cũng được"; //OK
var str4 = 'Xin chào!"; // Lỗi, dấu nháy phải khớp với nhau

Tuy nhiên, bạn vẫn có thể sử dụng cùng dấu nháy đơn hoặc dấu nháy kép trong một chuỗi bằng cách sử dụng ký tự (\) (backslash)

var str1 = 'Đây's hoàn toàn ổn';
var str2 = "Tôi nói \"Javascript\"";
var str3 = 'Javascript viết tắt là \'JS\'';

Khi bạn sử dụng ký tự \ thì ký tự ngay sau đó máy tính sẽ hiểu đây là một ký tự đặc biệt.

Một số lệnh tắt với Backslash \

Backslash cũng hữu ích cho các tình huống bạn muốn sử dụng các ký tự không thể gõ bằng bàn phím.

Dưới đây là một số cách được sử dụng phổ biến nhất:

\n thêm dòng mới

\t thêm tab

\r return

\b thay thế bằng ký tự backspace

\\ thay thế cho ký tự backslash \

Dưới đây là một ví dụ để làm rõ cách thức các ký tự backslash thực sự hoạt động:

var str1 = "Con mèo của tôi \n vừa chạy sang nhà hàng xóm.";
document.write("<pre>" + str1 + "</pre>"); // Tạo ngắt dòng
 
var str2 = "C:\Users\Downloads";
document.write(str2); // Kết quả C:UsersDownloads
 
var str3 = "C:\\Users\\Downloads";
document.write(str3); // Kết quả C:\Users\Downloads

2. Hướng dẫn thao tác với String trong Javascript

JavaScript cung cấp một số thuộc tính và phương thức để thực hiện các thao tác trên các giá trị chuỗi. Về mặt kỹ thuật, chỉ các đối tượng có thể có các thuộc tính và phương thức.

Nhưng trong các kiểu dữ liệu nguyên thủy của JavaScript có thể hoạt động như các đối tượng khi bạn tham chiếu chúng với ký hiệu truy cập thuộc tính (nghĩa là ký hiệu dấu chấm).

JavaScript làm cho việc này có thể bằng cách tạo một đối tượng bao bọc tạm thời cho các kiểu dữ liệu nguyên thủy. Quá trình này được thực hiện tự động bởi trình thông dịch JavaScript trong nền.

2.1. Tính độ dài của chuỗi

Thuộc tính length trả về độ dài của chuỗi, là số lượng ký tự có trong chuỗi. Điều này bao gồm số lượng ký tự đặc biệt, chẳng hạn như \t hoặc \n.

var str1 = "Đây là một chuỗi.";
document.write(str1.length); // Kết quả 17
 
var str2 = "Đây là \n đoạn văn bản.";
document.write(str2.length); // Kết quả 22, bởi vì \n chỉ tính là 1 ký tự

Lưu ý: Vì length là một thuộc tính, không phải là hàm, vì vậy đừng sử dụng dấu ngoặc đơn sau nó như str.length(). Thay vào đó chỉ cần viết str.length, nếu không nó sẽ tạo ra một lỗi.

2.2. Tìm một chuỗi bên trong một chuỗi

Bạn có thể sử dụng phương thức indexOf() để tìm một chuỗi con hoặc chuỗi bên trong một chuỗi khác.

Phương thức indexOf() này trả về chỉ mục hoặc vị trí của lần xuất hiện đầu tiên của một chuỗi được chỉ định trong một chuỗi.

var str = "Đây là một chuỗi ký tự không phải là hàm";
var pos = str.indexOf("là");
alert(pos); // Kết quả: 4

Tương tự, nếu bạn dự đoán chuỗi có thể xuất hiện nhiều lần và bạn chỉ muốn lấy vị trí xuất hiện cuối cùng bạn có thể sử dụng phương thức lastIndexOf(), như thế này:

var str = "Đây là một chuỗi ký tự không phải là hàm";
var pos = str.lastIndexOf("là");
alert(pos); // Kết quả: 34

Cả hai phương thức indexOf () và lastIndexOf () đều trả về -1 nếu không tìm thấy chuỗi con.

Cả hai phương thức này cũng chấp nhận một tham số nguyên tùy chọn chỉ định vị trí trong chuỗi để bắt đầu tìm kiếm.

Đây là một ví dụ:

var str = "Đây là một chuỗi ký tự không phải là hàm";

// Tìm từ trái sang phải
var pos1 = str.indexOf("là", 20);
alert(pos1); // Kết quả: 34
 
// Tìm từ phải sang trái
var pos2 = str.lastIndexOf("là", 20);
alert(pos2); // Kết quả: 4

Lưu ý: Các ký tự trong một chuỗi được lập chỉ mục từ trái sang phải. Chỉ mục của ký tự đầu tiên là 0 và chỉ mục của ký tự cuối cùng của chuỗi có tên myStr là myStr.length - 1.

2.3. Tìm kiếm một mẫu bên trong một chuỗi

Bạn có thể sử dụng phương thức search() để tìm kiếm một đoạn văn bản hoặc mẫu cụ thể bên trong một chuỗi khác.

Giống như phương thức indexOf(), phương thức search() cũng trả về chỉ mục của kết quả khớp đầu tiên và trả về -1 nếu không tìm thấy kết quả khớp nào, nhưng không giống như phương thức indexOf(), phương thức này cũng có thể lấy biểu thức chính quy làm đối số để tìm kiếm nâng cao hơn.

var str = "Đây Là một chuỗi ký tự không phải Là hàm";

// Tìm kiếm phân biệt chữ HOA - thường
var pos1 = str.search("là");
alert(pos1); // Kết quả: -1
 
// Tìm kiếm phân không biệt chữ HOA - thường sử dụng regexp
var pos2 = str.search(/là/i);
alert(pos2); // Kết quả: 4

Lưu ý: Phương thức search() không hỗ trợ tìm kiếm toàn cầu. Nó bỏ qua cờ g hoặc công cụ sửa đổi (tức là /pattern/g) của đối số biểu thức chính quy.

2.4. Trích xuất chuỗi con từ một chuỗi

Bạn có thể sử dụng phương thức slice() để trích xuất một phần hoặc chuỗi con từ một chuỗi.

Phương thức này có 2 tham số: start index (chỉ mục bắt đầu trích xuất) và tùy chọn end index (chỉ mục trước khi kết thúc trích xuất), như str.slice (start Index, end Index).

Cú pháp:

str.slice(start Index, end Index)

Ví dụ sau đây cắt ra một phần của chuỗi từ vị trí 4 đến vị trí 15:

var str = "Đây Là một chuỗi ký tự không phải Là hàm";
var subStr = str.slice(4, 15);
document.write(subStr); // Kết quả: Là một chuỗ

Bạn cũng có thể chỉ định các giá trị âm.

Giá trị âm được coi là strLength + startIndex, trong đó strLength là độ dài của chuỗi (ví dụ: str.length).

Ví dụ, nếu start Index là -5 thì vị trí bắt đầu cắt sẽ được tính là strLength - 5. Nếu start Index lớn hơn hoặc bằng Length, phương thức slice() trả về một chuỗi rỗng.

Ngoài ra, nếu tùy chọn end Index không được chỉ định hoặc bỏ qua, phương thức slice() sẽ trích xuất đến tận cuối chuỗi.

var str = "Đây Là một chuỗi ký tự không phải Là hàm";

document.write(str.slice(-28, -19)); // Kết quả: huỗi ký t
document.write(str.slice(31)); // Kết quả: ải Là hàm

Bạn cũng có thể sử dụng phương thức substring() để trích xuất một phần của chuỗi đã cho dựa trên các chỉ mục bắt đầu và kết thúc, như str.substring(start Index, end Index). Phương thức substring() rất giống với phương thức slice(), ngoại trừ một số khác biệt:

Nếu một trong hai đối số nhỏ hơn 0 hoặc là NaN, nó được coi là 0.

Nếu một trong hai đối số lớn hơn str.length, thì nó được xử lý như thể nó là str.length.

Nếu start Index lớn hơn end Index, thì substring() sẽ hoán đổi hai đối số đó; Ví dụ: str.substring(5, 0) == str.substring (0, 5).

Ví dụ sau đây sẽ cho bạn thấy phương thức này hoạt động như thế nào:

Ví dụ sau đây sẽ cho bạn thấy phương thức substring() này hoạt động như thế nào:

var str = "Đây Là một chuỗi ký tự không phải Là hàm";

document.write(str.substring(4, 15)); // Kết quả: Là một chuỗ 
document.write(str.substring(9, 0)); // Kết quả: Đây Là mộ
document.write(str.substring(-28, -19)); // Không in gì
document.write(str.substring(20)); // Kết quả: tự không phải Là hàm

Trích xuất một số lượng ký tự cố định từ một chuỗi:

JavaScript cũng cung cấp phương thức substr() tương tự như phương thức slice() nhưng khác một chút, tham số thứ hai chỉ định số lượng ký tự cần trích xuất thay vì chỉ mục kết thúc.

Cú pháp:

str.substr(start Index, length);

Nếu độ dài bằng 0 hoặc số âm, một chuỗi trống sẽ được trả về. Ví dụ sau đây cho thấy cách thức hoạt động của nó:

var str = "Đây Là một chuỗi ký tự không phải Là hàm";

document.write(str.substr(4, 15)); // Kết quả: Là một chuỗi ký
document.write(str.substr(-28, -19)); // Không in gì
document.write(str.substr(-28, 9)); // Kết quả: huỗi ký t
document.write(str.substr(31)); // Kết quả: ải Là hàm

2.5. Thay thế nội dung của chuỗi

Bạn có thể sử dụng phương thức replace() để thay thế một phần của chuỗi bằng một chuỗi khác.

Phương thức này lấy hai tham số một biểu thức chính quy để khớp hoặc chuỗi con được thay thế và một chuỗi thay thế.

Cú pháp:

str.replace(regrexp|struct, newSubstr);

Phương thức replace() này trả về một chuỗi mới, nó không ảnh hưởng đến chuỗi ban đầu sẽ không thay đổi.

Ví dụ sau sẽ cho bạn thấy nó hoạt động như thế nào:

var str = "Đây Là một chuỗi ký tự không phải Là hàm";

var result = str.replace("Là", "is");
alert(result); // Kết quả: Đây is một string ký tự không phải Là hàm

Theo mặc định, phương thức replace() chỉ thay thế cho kết quả khớp đầu tiên và nó phân biệt chữ hoa chữ thường.

Để thay thế chuỗi con trong một chuỗi theo cách không phân biệt chữ hoa chữ thường, bạn có thể sử dụng biểu thức chính quy (regexp) bằng một công cụ sửa đổi i, như trong ví dụ dưới đây:

var str = "Đây Là một chuỗi ký tự không phải Là hàm";

var result = str.replace(/là/i, "is");
alert(result); // Kết quả: Đây is một chuỗi ký tự không phải Là hàm

2.6. Chuyển đổi một chuỗi thành chữ HOA hoặc chữ thường

Bạn có thể sử dụng phương thức toUpperCase() để chuyển đổi một chuỗi thành chữ HOA, như thế này:

var str = "Hello World!";

var result = str.toUpperCase();
document.write(result); // Kết quả: HELLO WORLD!

Tương tự, bạn có thể sử dụng phương thức toLowerCase() để chuyển đổi một chuỗi HOA thành chữ thường, như thế này:

var str = "Hello World!";
var result = str.toLowerCase();
document.write(result); // Kết quả: hello world!

2.7. Nối 2 chuỗi hoặc nhiều chuỗi với nhau

Bạn có thể nối hoặc kết hợp hai hoặc nhiều chuỗi bằng cách sử dụng toán tử + và toán tử +=

var hello = "Hello";
var world = "World";
var greet = hello + " " + world;
document.write(greet); // Kết quả: Hello World
 
var wish  = "Happy";
    wish += " New Year";
document.write(wish); // Kết quả: Happy New Year

JavaScript cũng cung cấp phương thức concat() để kết hợp các chuỗi, nhưng nó không được khuyến khích sử dụng vì không có hiệu suất tốt như sử dụng toán tử.

2.8. Truy cập các ký tự riêng lẻ từ một chuỗi

Bạn có thể sử dụng phương thức charAt() để truy cập từng ký tự từ một chuỗi, như str.charAt(index).

Chỉ mục được chỉ định phải là số nguyên nằm trong khoảng từ 0 đến str.length - 1.

Nếu không có chỉ mục nào được cung cấp, ký tự đầu tiên trong chuỗi được trả về, vì mặc định là 0.

var str = "Hello World!";
document.write(str.charAt());  // Kết quả: H
document.write(str.charAt(6)); // Kết quả: W
document.write(str.charAt(30)); // Không in gì cả
document.write(str.charAt(str.length - 1)); // Kết quả: !

Thậm chí còn có cách tốt hơn để làm điều này.

Từ ECMAScript 5, các chuỗi có thể được xử lý như các mảng chỉ đọc và bạn có thể truy cập các ký tự riêng lẻ từ một chuỗi bằng dấu ngoặc vuông ([]) thay vì phương thức charAt(), như được minh họa trong ví dụ sau:

var str = "Hello World!";
document.write(str[0]); // Kết quả: H
document.write(str[6]); // Kết quả: W
document.write(str[str.length - 1]); // Kết quả: !
document.write(str[30]); // Kết quả: undefined

Lưu ý: Sự khác biệt duy nhất giữa việc truy cập ký tự từ một chuỗi bằng cách sử dụng charAt() và dấu ngoặc vuông ([]) là nếu không tìm thấy ký tự nào, [] trả về undefined, trong khi phương thức charAt() trả về một chuỗi trống.

2.9. Tách một chuỗi thành một mảng

Phương thức split() có thể được sử dụng để phân tách một chuỗi thành một chuỗi các chuỗi.

Cú pháp:

str.split(seperator, limit);

Đối số seperator chỉ định chuỗi mà tại đó mỗi phân tách sẽ xảy ra, trong khi các đối số limit chỉ định độ dài tối đa của mảng.

Nếu đối số seperator bị bỏ qua hoặc không tìm thấy trong chuỗi đã chỉ định, toàn bộ chuỗi được gán cho phần tử đầu tiên của mảng.

Ví dụ sau đây cho thấy cách thức hoạt động của nó:

var fruitsStr = "Apple, Banana, Mango, Orange, Papaya";
var fruitsArr = fruitsStr.split(", ");
document.write(fruitsArr[0]); // Kết quả: Apple
document.write(fruitsArr[2]); // Kết quả: Mango
document.write(fruitsArr[fruitsArr.length - 1]); // Kết quả: Papaya
 
// Lặp qua tất cả các phần tử của mảng fruitArr
for(var i in fruitsArr) {  
    document.write("<p>" + fruitsArr[i] + "</p>");
}

Để phân tách một chuỗi liền thành một mảng các ký tự, chỉ định một chuỗi trống ('') làm dấu phân cách.

var str = "INTERSTELLAR";
var strArr = str.split("");
document.write(strArr[0]); // Kết quả: I
document.write(strArr[1]); // Kết quả: N
document.write(strArr[strArr.length - 1]); // Kết quả: R
 
// Lặp qua tất cả các phần tử của mảng strArr và in chúng ra
for(var i in strArr) {  
    document.write("<br>" + strArr[i]);
}

Note: Bạn sẽ tìm hiểu về các câu lệnh vòng lặp chi tiết trong các bài sau

Hãy ghi nhớ cách thao tác với chuỗi trong Javascript

Khi lập trình Javascript hay lập trình web, bạn sẽ thao tác với chuỗi rất nhiều. Cách tốt nhất để bạn học tốt Javascript là ghi nhớ thật kỹ những thao tác phổ biến với chuỗi này.

Chúc bạn học tập hiệu quả!