• Trang chủ
• Học JavaScript
• Chuỗi JS

Chuỗi JS

Trong hướng dẫn này, bạn sẽ học cách tạo và thao tác chuỗi trong JavaScript.

Chuỗi trong JavaScript là gì

Một chuỗi là một chuỗi các chữ cái, số, ký tự đặc biệt và giá trị số học hoặc sự kết hợp của tất cả. Các chuỗi có thể được tạo bằng cách đặt ký tự chuỗi ký tự (tức là các ký tự chuỗi) trong dấu nháy đơn ( ') hoặc dấu nháy kép ( "), như minh họa trong ví dụ bên dưới:

var myString = 'Hello World!'; // Single quoted string
var myString = "Hello World!"; // Double quoted string

Bạn có thể sử dụng các dấu ngoặc kép bên trong một chuỗi, miễn là chúng không khớp với các dấu ngoặc kép xung quanh chuỗi:

var str1 = "it's okay";
var str2 = 'He said "Goodbye"';
var str3 = "She replied 'Calm down, please'";
var str4 = 'Hi, there!"; // Syntax error - quotes must match

Tuy nhiên, bạn vẫn có thể sử dụng dấu ngoặc đơn bên trong chuỗi trích dẫn đơn hoặc dấu ngoặc kép bên trong chuỗi trích dẫn kép bằng cách thoát dấu ngoặc kép bằng ký tự gạch chéo ngược ( \), như sau:

var str1 = 'it\'s okay';
var str2 = "He said \"Goodbye\"";
var str3 = 'She replied \'Calm down, please\'';

Dấu gạch chéo ngược ( \) được gọi là ký tự thoát, trong khi các chuỗi \'và \"chúng tôi đã sử dụng trong ví dụ trên được gọi là chuỗi thoát .

Trình tự thoát JavaScript

Chuỗi thoát cũng hữu ích cho các trường hợp bạn muốn sử dụng các ký tự không thể nhập bằng bàn phím. Dưới đây là một số trình tự thoát được sử dụng phổ biến nhất.

• \nđược thay thế bằng ký tự xuống dòng
• \tđược thay thế bằng ký tự tab
• \rđược thay thế bằng ký tự xuống dòng
• \bđược thay thế bằng ký tự xóa lùi
• \\được thay thế bằng một dấu gạch chéo ngược ( \)

Đây là một ví dụ để làm rõ cách thức hoạt động của các chuỗi thoát thực sự:

var str1 = "The quick brown fox \n jumps over the lazy dog.";
document.write("<pre>" + str1 + "</pre>"); // Create line break
 
var str2 = "C:\Users\Downloads";
document.write(str2); // Prints C:UsersDownloads
 
var str3 = "C:\\Users\\Downloads";
document.write(str3); // Prints C:\Users\Downloads

Thực hiện các thao tác trên chuỗi

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 mới có thể có các thuộc tính và phương thức. Nhưng trong JavaScript, các kiểu dữ liệu nguyên thủy có thể hoạt động giống như các đối tượng khi bạn tham chiếu đến chúng bằng ký hiệu truy cập thuộc tính (tức là ký hiệu dấu chấm).

JavaScript làm cho nó có thể bằng cách tạo một đối tượng trình 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 ở chế độ nền.

Lấy độ dài của một chuỗi

Thuộc tính độ dài 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 cả số ký tự đặc biệt, chẳng hạn như \thoặc \n.

var str1 = "This is a paragraph of text.";
document.write(str1.length); // Prints 28
 
var str2 = "This is a \n paragraph of text.";
document.write(str2.length); // Prints 30, because \n is only one character

Tìm một chuỗi bên trong một chuỗi khác

Bạn có thể sử dụng phương pháp indexOf() này để tìm một chuỗi con hoặc chuỗi bên trong một chuỗi khác. Phương thức này trả về chỉ mục hoặc vị trí xuất hiện đầu tiên của một chuỗi đã chỉ định trong một chuỗi.

var str = "If the facts don't fit the theory, change the facts.";
var pos = str.indexOf("facts");
alert(pos); // 0utputs: 7

Tương tự, bạn có thể sử dụng phương thức lastIndexOf() này để lấy chỉ mục hoặc vị trí của lần xuất hiện cuối cùng của chuỗi đã chỉ định trong một chuỗi, như sau:

var str = "If the facts don't fit the theory, change the facts.";
var pos = str.lastIndexOf("facts");
alert(pos); // 0utputs: 46

Cả phương thức indexOf(), và phương thức lastIndexOf() đều trả về -1nếu không tìm thấy chuỗi con. Cả hai phương pháp cũng chấp nhận một tham số 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 = "If the facts don't fit the theory, change the facts.";
 
// Searching forwards
var pos1 = str.indexOf("facts", 20);
alert(pos1); // 0utputs: 46
 
// Searching backwards
var pos2 = str.lastIndexOf("facts", 20);
alert(pos2); // 0utputs: 7

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

Bạn có thể sử dụng phương pháp search() này để 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.

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

var str = "Color red looks brighter than color blue.";
 
// Case sensitive search
var pos1 = str.search("color");
alert(pos1); // 0utputs: 30
 
// Case insensitive search using regexp
var pos2 = str.search(/color/i);
alert(pos2); // 0utputs: 0

Bạn sẽ tìm hiểu thêm về biểu thức chính quy trong các chương sắp tới.

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

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

Phương pháp này nhận 2 tham số: chỉ mục bắt đầu (chỉ mục bắt đầu trích xuất) và chỉ mục kết thúc tùy chọn (chỉ mục trước khi kết thúc trích xuất), như str.slice(startIndex, endIndex).

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

var str = "The quick brown fox jumps over the lazy dog.";
var subStr = str.slice(4, 15);
document.write(subStr); // Prints: quick brown

Bạn cũng có thể chỉ định các giá trị âm. Giá trị âm được coi là strLength + startIndex, trong đó strLengthđộ dài của chuỗi (nghĩa là str.length), ví dụ, nếu startIndexnó -5được coi là strLength - 5. Nếu startIndexlớn hơn hoặc bằng độ dài của chuỗi, phương thứcslice() sẽ trả về một chuỗi rỗng. Ngoài ra, nếu tùy chọn endIndexkhông được chỉ định hoặc bỏ qua, phương thức slice() sẽ trích xuất đến cuối chuỗi.

var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.slice(-28, -19)); // Prints: fox jumps
document.write(str.slice(31)); // Prints: the lazy dog.

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

• Nếu một trong hai đối số nhỏ hơn 0hoặc bằng NaN, thì 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 startIndexlớn hơn endIndex, thì substring()sẽ hoán đổi hai đối số đó; ví dụ, str.substring(5, 0) == str.substring(0, 5).

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

var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.substring(4, 15)); // Prints: quick brown
document.write(str.substring(9, 0)); // Prints: The quick
document.write(str.substring(-28, -19)); // Prints nothing
document.write(str.substring(31)); // Prints: the lazy dog.

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

JavaScript cũng cung cấp phương thức substr() tương tự slice()với một sự khác biệt tinh 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, như str.substr(startIndex, length). Nếu lengthlà 0hoặc một số âm, một chuỗi rỗng được trả về. Ví dụ sau minh họa cách nó hoạt động:

var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.substr(4, 15)); // Prints: quick brown fox
document.write(str.substr(-28, -19)); // Prints nothing
document.write(str.substr(-28, 9)); // Prints: fox jumps
document.write(str.substr(31)); // Prints: the lazy dog.

Thay thế nội dung của một chuỗi

Bạn có thể sử dụng phương thứcreplace() này để thay thế một phần của chuỗi bằng một chuỗi khác. Phương thức này nhận hai tham số là một biểu thức chính quy để so khớp hoặc chuỗi con cần thay thế và một chuỗi thay thế, chẳng hạn như str.replace(regexp|substr, newSubstr).

Phương thức replace()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 = "Color red looks brighter than color blue.";
var result = str.replace("color", "paint");
alert(result); // 0utputs: Color red looks brighter than paint blue.

Theo mặc định, phương thức replace() chỉ thay thế kết quả khớp đầu tiên và 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 (regrec) với một icông cụ sửa đổi, như minh họa trong ví dụ bên dưới:

var str = "Color red looks brighter than color blue.";
var result = str.replace(/color/i, "paint");
alert(result); // 0utputs: paint red looks brighter than color blue.

Tương tự, để thay thế tất cả các lần xuất hiện của một 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 công gcụ sửa đổi cùng với icông cụ sửa đổi, như sau:

var str = "Color red looks brighter than color blue.";
var result = str.replace(/color/ig, "paint");
alert(result); // 0utputs: paint red looks brighter than paint blue.

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ứctoUpperCase() để chuyển đổi một chuỗi thành chữ hoa, như sau:

var str = "Hello World!";
var result = str.toUpperCase();
document.write(result); // Prints: HELLO WORLD!

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

var str = "Hello World!";
var result = str.toLowerCase();
document.write(result); // Prints: hello world!

Nối hai hoặc nhiều chuỗi

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

var hello = "Hello";
var world = "World";
var greet = hello + " " + world;
document.write(greet); // Prints: Hello World
 
var wish  = "Happy";
    wish += " New Year";
document.write(wish); // Prints: Happy New Year

JavaScript cũng cung cấp phương thức concat()để kết hợp các chuỗi nhưng không được khuyến nghị.

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() này để truy cập từng ký tự từ một chuỗi, chẳng hạn như str.charAt(index). Chỉ indexđịnh phải là một số nguyên giữa 0và 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());  // Prints: H
document.write(str.charAt(6)); // Prints: W
document.write(str.charAt(30)); // Prints nothing
document.write(str.charAt(str.length - 1)); // Prints: !

Thậm chí còn có cách tốt hơn để làm điều này. Kể từ ECMAScript 5, các chuỗi có thể được coi 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 cách sử dụng dấu ngoặc vuông ( []) thay vì charAt()phương thức, như minh họa trong ví dụ sau:

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

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

Phương thức split()có thể được sử dụng để tách một chuỗi thành một mảng các chuỗi, sử dụng cú pháp str.split(separator, limit). Đối số seperator chỉ định chuỗi mà tại đó mỗi lần phân chia 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ố separator bị bỏ qua hoặc không tìm thấy trong chuỗi đã chỉ định, thì 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 nó hoạt động như thế nào:

var fruitsStr = "Apple, Banana, Mango, Orange, Papaya";
var fruitsArr = fruitsStr.split(", ");
document.write(fruitsArr[0]); // Prints: Apple
document.write(fruitsArr[2]); // Prints: Mango
document.write(fruitsArr[fruitsArr.length - 1]); // Prints: Papaya
 
// Loop through all the elements of the fruits array 
for(var i in fruitsArr) {  
    document.write("<p>" + fruitsArr[i] + "</p>");
}

Để tách một chuỗi thành một mảng ký tự, hãy 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]); // Prints: I
document.write(strArr[1]); // Prints: N
document.write(strArr[strArr.length - 1]); // Prints: R
 
// Loop through all the elements of the characters array and print them
for(var i in strArr) {  
    document.write("<br>" + strArr[i]);
}

Bạn sẽ tìm hiểu chi tiết về câu lệnh lặp trong chương vòng lặp JavaScript .