Nói chung, một string đại diện cho một dãy ký tự trong một ngôn ngữ lập trình.
Hãy xem ví dụ về một chuỗi được tạo bằng cách sử dụng một chuỗi ký tự, “Yes, You Can DO It!”. Trong JavaScript, chúng ta có thể tạo một chuỗi theo một số cách:
- Sử dụng chuỗi ký tự như một nguyên thủy
const msg = "Yes, You Can DO It!";- Sử dụng
String()hàm tạo như một đối tượng
const msg = new String("Yes, You Can DO It!");Một sự thật thú vị về chuỗi trong JavaScript là chúng ta có thể truy cập các ký tự trong chuỗi bằng cách sử dụng chỉ mục của nó. Chỉ số của ký tự đầu tiên là 0 và nó tăng thêm 1. Vì vậy, chúng ta có thể truy cập từng ký tự của một chuỗi như thế này:
let str = "Yes, You Can Do It!";
console.log(str[0]); // Y
console.log(str[1]); // e
console.log(str[2]); // s
console.log(str[3]); // ,
console.log(str[10]); // aHình ảnh dưới đây đại diện cho điều tương tự:
Ngoài khả năng truy cập các ký tự chuỗi theo chỉ số của chúng, JavaScript còn cung cấp nhiều phương thức tiện ích để truy cập các ký tự, lấy ra một phần của chuỗi và thao tác với nó.
Trong bài viết này sẽ tìm hiểu về một phương thức chuỗi tiện dụng được gọi là split(). Tôi hy vọng bạn thích đọc nó.
Các split() phương thức tách (chia) một chuỗi thành hai hoặc nhiều chuỗi con tùy thuộc vào splitter (hoặc dải phân cách). Bộ chia có thể là một ký tự đơn, một chuỗi khác hoặc một biểu thức chính quy.
Sau khi tách chuỗi thành nhiều chuỗi con, split() phương thức đặt chúng vào một mảng và trả về nó. Nó không thực hiện bất kỳ sửa đổi nào đối với chuỗi gốc.
Hãy hiểu làm thế nào điều này hoạt động với một ví dụ. Đây là một chuỗi được tạo bằng chuỗi ký tự:
let message="I am a Happy Go lucky Guy";
Chúng ta có thể gọi split() phương pháp trên message chuỗi. Hãy tách chuỗi dựa trên khoảng trắng (' ') nhân vật. Ở đây, ký tự khoảng trắng đóng vai trò là bộ chia hoặc bộ chia.
// Split using a space character
let arr = message.split(' ');
// The array
console.log(arr); // ["I", "am", "a", "Happy", "Go", "lucky", "Guy"]
// Access each of the elements of the array.
console.log(arr[0]); // "I"
console.log(arr[1]); // "am"
console.log(arr[2]); // "a"
console.log(arr[3]); // "Happy"
console.log(arr[4]); // "Go",
console.log(arr[5]); // "lucky"
console.log(arr[6]); // "Guy"
Mục đích chính của split() phương pháp là lấy các đoạn mà bạn quan tâm từ một chuỗi để sử dụng chúng trong bất kỳ trường hợp sử dụng nào khác.
Cách tách một chuỗi theo từng ký tự
Bạn có thể tách chuỗi theo từng ký tự bằng cách sử dụng chuỗi trống(”) làm bộ tách. Trong ví dụ bên dưới, chúng tôi chia cùng một thông báo bằng cách sử dụng một chuỗi trống. Kết quả của phép chia sẽ là một mảng chứa tất cả các ký tự trong chuỗi tin nhắn.
console.log(message.split('')); // ["I", " ", "a", "m", " ", "a", " ", "H", "a", "p", "p", "y", " ", "G", "o", " ", "l", "u", "c", "k", "y", " ", "G", "u", "y"]💡 Xin lưu ý rằng việc tách một chuỗi rỗng(”) bằng cách sử dụng một chuỗi rỗng vì bộ chia trả về một mảng trống. Bạn có thể nhận được điều này như một câu hỏi trong các cuộc phỏng vấn việc làm sắp tới của bạn!
''.split(''); // returns []Cách tách một chuỗi thành một mảng
Bạn có thể gọi split() phương thức trên một chuỗi không có bộ chia/bộ chia. Điều này chỉ có nghĩa là split() phương thức không có bất kỳ đối số nào được truyền cho nó.
Khi bạn gọi split() trên một chuỗi không có bộ chia, nó trả về một mảng chứa toàn bộ chuỗi.
let message="I am a Happy Go lucky Guy";
console.log(message.split()); // returns ["I am a Happy Go lucky Guy"]💡 Lưu ý một lần nữa, gọi số
split()phương thức trên chuỗi rỗng(”) không có bộ chia sẽ trả về một mảng có chuỗi trống. Nó không trả về một mảng trống.
Dưới đây là hai ví dụ để bạn có thể thấy sự khác biệt:
// Returns an empty array
''.split(''); // returns []
// Returns an array with an empty string
''.split() // returns [""]Cách tách chuỗi bằng ký tự không khớp
Thông thường, chúng tôi sử dụng bộ tách là một phần của chuỗi mà chúng tôi đang cố tách. Có thể có trường hợp bạn đã vượt qua một bộ tách không phải là một phần của chuỗi hoặc không khớp với bất kỳ phần nào của chuỗi. Trong trường hợp đó, các split() phương thức trả về một mảng với toàn bộ chuỗi là một phần tử.
Trong ví dụ bên dưới, chuỗi thông báo không có ký tự dấu phẩy (,). Hãy thử tách chuỗi bằng cách sử dụng dấu phẩy (,).
let message="I am a Happy Go lucky Guy";
console.log(message.split(',')); // ["I am a Happy Go lucky Guy"]💡 Bạn nên lưu ý điều này vì nó có thể giúp bạn khắc phục sự cố do một lỗi nhỏ như chuyển sai bộ chia trong
split()phương pháp.
Nếu bạn nghĩ rằng split() phương thức chỉ lấy bộ tách làm tham số tùy chọn, hãy để tôi cho bạn biết rằng còn một tham số nữa. Bạn cũng có thể vượt qua limit như một tham số tùy chọn cho split() phương pháp.
string.split(splitter, limit);Như tên cho thấy, các limit tham số giới hạn số lần phân tách. Nó có nghĩa là mảng kết quả sẽ chỉ có số phần tử được chỉ định bởi tham số giới hạn.
Trong ví dụ bên dưới, chúng tôi tách một chuỗi bằng dấu cách (‘ ‘) làm bộ tách. Chúng tôi cũng chuyển số 4 như giới hạn. The split() phương thức trả về một mảng chỉ có bốn phần tử, bỏ qua phần còn lại.
let message="I am a Happy Go lucky Guy";
console.log(message.split(' ', 4)); // ["I", "am", "a", "Happy"] Chúng ta cũng có thể chuyển một biểu thức chính quy (regex) dưới dạng bộ chia/bộ chia cho split() phương pháp. Hãy xem xét chuỗi này để phân chia:
let message="The sky is blue. Grass is green! Do you know the color of the Cloud?";Hãy tách chuỗi này ở dấu chấm (.), dấu chấm than (!), dấu chấm hỏi (?). Chúng ta có thể viết một regex xác định thời điểm các ký tự này xuất hiện. Sau đó, chúng tôi chuyển regex cho split() phương thức và gọi nó trên chuỗi trên.
let sentences = message.split(/[.,!,?]/);
console.log(sentences);Đầu ra trông như thế này:
Bạn có thể dùng limit tham số để giới hạn đầu ra chỉ với ba phần tử đầu tiên, như thế này:
sentences = message.split(/[.,!,?]/, 3);
console.log(sentences);Đầu ra trông như thế này:
💡 Nếu bạn muốn nắm bắt các ký tự được sử dụng trong các biểu thức chính quy trong mảng đầu ra, bạn cần điều chỉnh biểu thức chính quy một chút. Sử dụng dấu ngoặc đơn để nắm bắt các ký tự phù hợp. Regex được cập nhật sẽ là
/([.,!,?])/.
Bạn có thể giải quyết nhiều vấn đề thú vị bằng cách sử dụng split() phương thức kết hợp với các phương thức chuỗi và mảng khác. Hãy xem một cái ở đây. Nó có thể là một trường hợp sử dụng phổ biến để thay thế tất cả các lần xuất hiện của một ký tự trong chuỗi bằng một ký tự khác.
Ví dụ, bạn có thể muốn tạo các id của một phần tử HTML từ một giá trị tên. Giá trị tên có thể chứa khoảng trắng (‘ ‘), nhưng trong HTML, giá trị id không được chứa bất kỳ khoảng trắng nào. Chúng ta có thể làm điều này theo cách sau:
let name="Tapas Adhikary";
let subs = name.split(' ');
console.log(subs); // ["Tapas", "Adhikary"]
let joined = subs.join('-');
console.log(joined); // Tapas-AdhikaryXem xét tên có tên (Tapas) và họ (Adhikary) được phân tách bằng dấu cách. Ở đây, trước tiên chúng tôi tách tên bằng cách sử dụng bộ tách không gian. Nó trả về một mảng chứa họ và tên dưới dạng các phần tử, nghĩa là['Tapas', 'Adhikary'].
Sau đó, chúng tôi sử dụng phương thức mảng được gọi là join() nối các phần tử của mảng bằng lệnh - nhân vật. Các join() phương thức trả về một chuỗi bằng cách nối phần tử bằng một ký tự được truyền dưới dạng tham số. Do đó, chúng tôi nhận được đầu ra cuối cùng là Tapas-Adhikary.
ECMAScript2015 (ES6) đã giới thiệu một cách sáng tạo hơn để trích xuất một phần tử từ một mảng và gán phần tử đó cho một biến. Cú pháp thông minh này được gọi là Array Destructuring. Chúng ta có thể sử dụng cái này với split() phương pháp gán đầu ra cho một biến dễ dàng với ít mã hơn.
let name="Tapas Adhikary";
let [firstName, lastName] = name.split(' ');
console.log(firstName, lastName);Ở đây chúng tôi tách tên bằng cách sử dụng ký tự khoảng trắng làm bộ chia. Sau đó, chúng ta gán các giá trị trả về từ mảng cho một vài biến (các firstName và lastName) sử dụng cú pháp Array Destructuring.
👋 Bạn có muốn code và học cùng mình không? Bạn có thể tìm thấy nội dung tương tự ở đây trong Video YouTube này. Chỉ cần mở trình chỉnh sửa mã yêu thích của bạn và bắt đầu.
Tôi hy vọng bạn thấy bài viết này sâu sắc và nó giúp bạn hiểu Chuỗi JavaScript split() phương pháp rõ ràng hơn. Hãy thực hành các ví dụ nhiều lần để nắm bắt chúng tốt. Bạn có thể tìm thấy tất cả các ví dụ mã trong kho lưu trữ GitHub của tôi.
Kết nối nào. Bạn sẽ thấy tôi hoạt động trên Twitter (@tapasadhikary). Xin vui lòng cho một theo dõi.
Bạn cũng có thể thích những bài viết này:
