Cách lập chỉ mục, tách và thao tác chuỗi trong JavaScript

Chuỗi là một chuỗi gồm một hoặc nhiều ký tự có thể bao gồm các chữ cái, số hoặc ký hiệu. Mỗi ký tự trong một chuỗi JavaScript có thể được truy cập bằng một số index và tất cả các chuỗi đều có các phương thức và thuộc tính có sẵn cho chúng.

---

Trong hướng dẫn này, ta sẽ tìm hiểu sự khác biệt giữa nguyên thủy chuỗi và đối tượng String , cách lập index các chuỗi, cách truy cập các ký tự trong một chuỗi, các thuộc tính và phương thức phổ biến được sử dụng trên chuỗi.

Chuỗi nguyên thủy và đối tượng chuỗi

Đầu tiên, ta sẽ làm rõ hai loại chuỗi. JavaScript phân biệt giữa nguyên thủy chuỗi , một kiểu dữ liệu bất biến và đối tượng String .

Để kiểm tra sự khác biệt giữa hai, ta sẽ khởi tạo một đối tượng nguyên thủy chuỗi và một đối tượng chuỗi.

// Initializing a new string primitive const stringPrimitive = "A new string.";  // Initializing a new String object const stringObject = new String("A new string.");   

Ta có thể sử dụng toán tử typeof để xác định kiểu của một giá trị. Trong ví dụ đầu tiên, ta chỉ cần gán một chuỗi cho một biến.

typeof stringPrimitive; 

Output
string 

Trong ví dụ thứ hai, ta đã sử dụng new String() để tạo một đối tượng chuỗi và gán nó cho một biến.

typeof stringObject; 

Output
object 

Hầu hết thời gian bạn sẽ tạo chuỗi nguyên thủy. JavaScript có thể truy cập và sử dụng các thuộc tính và phương thức có sẵn của shell bọc đối tượng String mà không thực sự thay đổi chuỗi nguyên thủy bạn đã tạo thành một đối tượng.

Mặc dù ban đầu khái niệm này hơi khó khăn nhưng bạn nên biết sự phân biệt giữa nguyên thủy và đối tượng. Về cơ bản, có các phương thức và thuộc tính có sẵn cho tất cả các chuỗi và trong nền JavaScript sẽ thực hiện chuyển đổi thành đối tượng và trở về nguyên thủy mỗi khi phương thức hoặc thuộc tính được gọi.

Cách các chuỗi được lập index

Mỗi ký tự trong một chuỗi tương ứng với một số index , bắt đầu bằng 0 .

Để chứng minh, ta sẽ tạo một chuỗi với giá trị How are you? .

H	o	w		a	r	e		y	o	u	?
0	1	2	3	4	5	6	7	số 8	9	10	11

Ký tự đầu tiên trong chuỗi là H , tương ứng với chỉ số 0 . Ký tự cuối cùng là ? , tương ứng với 11 . Các ký tự khoảng trắng cũng có index , ở mức 3 và 7 .

Việc có thể truy cập mọi ký tự trong một chuỗi cung cấp cho ta một số cách để làm việc và thao tác với chuỗi.

Truy cập nhân vật

Ta sẽ trình bày cách truy cập các ký tự và chỉ số với tính năng How are you? chuỗi.

"How are you?"; 

Sử dụng ký hiệu dấu ngoặc vuông, ta có thể truy cập bất kỳ ký tự nào trong chuỗi.

"How are you?"[5]; 

Output
r 

Ta cũng có thể sử dụng phương thức charAt() để trả về ký tự bằng cách sử dụng số index làm tham số.

"How are you?".charAt(5); 

Output
r 

Ngoài ra, ta có thể sử dụng indexOf() để trả về số index theo trường hợp đầu tiên của một ký tự.

"How are you?".indexOf("o"); 

Output
1 

Mặc dù “o” xuất hiện hai lần trong How are you? string, indexOf() sẽ nhận được version đầu tiên.

lastIndexOf() được sử dụng để tìm trường hợp cuối cùng.

"How are you?".lastIndexOf("o"); 

Output
9 

Đối với cả hai phương pháp này, bạn cũng có thể tìm kiếm nhiều ký tự trong chuỗi. Nó sẽ trả về số index của ký tự đầu tiên trong trường hợp.

"How are you?".indexOf("are"); 

Output
4 

Mặt khác, phương thức slice() trả về các ký tự giữa hai số index . Tham số đầu tiên sẽ là số index bắt đầu và tham số thứ hai sẽ là số index nơi nó sẽ kết thúc.

"How are you?".slice(8, 11); 

Output
you 

Lưu ý 11 là ? , nhưng ? không phải là một phần của kết quả trả về. slice() sẽ trả về tham số ở giữa, nhưng không bao gồm tham số cuối cùng.

Nếu một tham số thứ hai không được bao gồm, thì slice() sẽ trả về mọi thứ từ tham số đến cuối chuỗi.

"How are you?".slice(8); 

Output
you? 

Tóm lại, charAt() và slice() sẽ giúp trả về giá trị chuỗi dựa trên số index và indexOf() và lastIndexOf() sẽ làm ngược lại, trả về số index dựa trên các ký tự chuỗi đã cung cấp.

Tìm độ dài của một chuỗi

Sử dụng thuộc tính length , ta có thể trả về số ký tự trong một chuỗi.

"How are you?".length; 

Output
12 

Lưu ý thuộc tính length đang trả về số ký tự thực tế bắt đầu bằng 1, xuất hiện đến 12, không phải là số index cuối cùng, bắt đầu từ 0 và kết thúc bằng 11 .

Chuyển đổi sang chữ hoa hoặc chữ thường

Hai phương thức toUpperCase() và toLowerCase() là những cách hữu ích để định dạng văn bản và thực hiện so sánh văn bản trong JavaScript.

toUpperCase() sẽ chuyển đổi tất cả các ký tự thành ký tự viết hoa.

"How are you?".toUpperCase(); 

Output
HOW ARE YOU? 

toLowerCase() sẽ chuyển đổi tất cả các ký tự thành ký tự thường.

"How are you?".toLowerCase(); 

Output
how are you? 

Hai phương pháp định dạng này không có tham số bổ sung.

Điều đáng chú ý là các phương thức này không thay đổi chuỗi root .

Tách chuỗi

JavaScript có một phương pháp rất hữu ích để tách một chuỗi theo một ký tự và tạo một mảng mới từ các phần. Ta sẽ sử dụng phương thức split() để phân tách mảng bằng một ký tự khoảng trắng, được đại diện bởi " " .

const originalString = "How are you?";  // Split string by whitespace character const splitString = originalString.split(" ");  console.log(splitString); 

Output
[ 'How', 'are', 'you?' ] 

Bây giờ ta có một mảng mới trong biến splitString , ta có thể truy cập từng phần với một số index .

splitString[1]; 

Output
are 

Nếu một tham số trống được cung cấp, split() sẽ tạo một mảng được phân tách bằng dấu phẩy với mỗi ký tự trong chuỗi.

Bằng cách tách chuỗi, bạn có thể xác định có bao nhiêu từ trong một câu và sử dụng phương pháp này như một cách để xác định họ và tên của mọi người, chẳng hạn.

Cắt bỏ khoảng trắng

Phương thức trim() JavaScript loại bỏ khoảng trắng từ cả hai đầu của một chuỗi, nhưng không xóa bất kỳ khoảng trắng nào ở giữa. Khoảng trắng có thể là tab hoặc dấu cách.

const tooMuchWhitespace = "     How are you?     ";  const trimmed = tooMuchWhitespace.trim();  console.log(trimmed); 

Output
How are you? 

Phương thức trim() là một cách đơn giản để thực hiện tác vụ phổ biến là loại bỏ khoảng trắng thừa.

Tìm và thay thế giá trị chuỗi

Ta có thể tìm kiếm một chuỗi cho một giá trị và thay thế nó bằng một giá trị mới bằng cách sử dụng phương thức replace() . Tham số đầu tiên sẽ là giá trị được tìm thấy và tham số thứ hai sẽ là giá trị để thay thế nó.

const originalString = "How are you?"  // Replace the first instance of "How" with "Where" const newString = originalString.replace("How", "Where");  console.log(newString); 

Output
Where are you? 

Ngoài việc có thể thay thế một giá trị bằng một giá trị chuỗi khác, ta cũng có thể sử dụng Biểu thức chính quy để làm cho replace() mạnh mẽ hơn. Ví dụ: replace() chỉ ảnh hưởng đến giá trị đầu tiên, nhưng ta có thể sử dụng cờ g (toàn cục) để bắt tất cả các trường hợp của một giá trị và cờ i (không phân biệt chữ hoa chữ thường) để bỏ qua trường hợp.

const originalString = "Javascript is a programming language. I'm learning javascript."  // Search string for "javascript" and replace with "JavaScript" const newString = originalString.replace(/javascript/gi, "JavaScript");  console.log(newString); 

Output
JavaScript is a programming language. I'm learning JavaScript. 

Đây là một tác vụ rất phổ biến sử dụng Biểu thức chính quy. Truy cập Regexr để thực hành thêm các ví dụ về RegEx.

Kết luận

Chuỗi là một trong những kiểu dữ liệu được sử dụng thường xuyên nhất và ta có thể làm rất nhiều điều với chúng.

Trong hướng dẫn này, ta đã tìm hiểu sự khác biệt giữa chuỗi nguyên thủy và đối tượng String , cách lập index các chuỗi cũng như cách sử dụng các phương thức và thuộc tính tích hợp của chuỗi để truy cập ký tự, định dạng văn bản và tìm và thay thế các giá trị.

Để có cái nhìn tổng quan hơn về chuỗi, hãy đọc hướng dẫn “ Cách làm việc với chuỗi trong JavaScript ”.

---

---

Các tin liên quan

Object.values và Object.entries trong JavaScript
2017-07-12
Cách làm việc với chuỗi trong JavaScript
2017-07-11
Giới thiệu về Maps bằng JavaScript
2017-07-06
Hiểu cú pháp và cấu trúc mã trong JavaScript
2017-07-05
Cách thêm JavaScript vào HTML
2017-06-30
Cách sử dụng control panel dành cho nhà phát triển JavaScript
2017-06-29
Cách viết comment bằng JavaScript
2017-06-20
Hiểu các loại dữ liệu trong JavaScript
2017-06-01
Phương thức chuỗi padStart và padEnd trong JavaScript
2017-02-17
Các chữ mẫu được gắn thẻ trong JavaScript (ES6 / ES2015)
2017-02-07