Dưới đây là 4 cách để chia một từ thành một mảng các ký tự. "Chia" là cách phổ biến nhất và mạnh mẽ hơn. Nhưng với việc bổ sung ES6, có nhiều công cụ hơn trong Arsenal JS để chơi với 🧰
Tôi luôn muốn xem tất cả các cách có thể để giải quyết một cái gì đó bởi vì sau đó bạn có thể chọn cách tốt nhất cho trường hợp sử dụng của bạn. Ngoài ra, khi bạn thấy nó bật lên trong cơ sở mã của ai đó, bạn sẽ hiểu nó một cách dễ dàng
# Kịch bản
Thay vì trải qua những ưu và nhược điểm của từng cách khác nhau. Hãy để tôi chỉ cho bạn các kịch bản khác nhau, nơi một người được ưa thích hơn cái kia.
# Mảng ký tự
Nếu tất cả những gì bạn đang làm là muốn tách chuỗi theo từng ký tự chuỗi, tất cả các cách đều tốt và sẽ cho bạn cùng một kết quả
# Phân tách cụ thể
Nếu bạn muốn chia chuỗi của mình bằng một ký tự cụ thể, thì split là cách để đi.
Các cách khác chỉ bị giới hạn bởi từng ký tự chuỗi
# Chuỗi chứa biểu tượng cảm xúc
Nếu chuỗi của bạn chứa biểu tượng cảm xúc, thì split hoặc Object.assign có thể không phải là lựa chọn tốt nhất. Hãy xem những gì xảy ra:
Tuy nhiên, nếu chúng ta sử dụng các cách khác, nó hoạt động:
Điều này là do split tách các ký tự bằng các đơn vị mã UTF-16 có vấn đề vì các ký tự biểu tượng cảm xúc là UTF-8. Nếu chúng ta nhìn vào biểu tượng cảm xúc yum của chúng ta '😋', nó thực sự được tạo thành từ 2 ký tự không phải là 1 như chúng ta nhận thức.
Đây là cái được gọi là cụm grapheme - nơi người dùng coi đó là 1 đơn vị, nhưng dưới mui xe, thực tế nó được tạo thành từ nhiều đơn vị. Các phương thức mới hơn spread và Array.from được trang bị tốt hơn để xử lý chúng và sẽ phân chia chuỗi của bạn bằng các cụm đồ họa 👍grapheme
clusters 👍
# Một cảnh báo về Object.assign
Một điều cần lưu ý Object.assign là nó không thực sự tạo ra một mảng thuần túy. Hãy bắt đầu với định nghĩa của nó
Phương thức Object.Assign [] sao chép tất cả các thuộc tính riêng biệt từ một hoặc nhiều đối tượng nguồn sang đối tượng đích
Chìa khóa có "bản sao tất cả các thuộc tính riêng biệt". Vì vậy, những gì chúng tôi đang làm ở đây Object.assign[[], string] Nó sao chép tất cả các thuộc tính chuỗi của chúng tôi vào mảng mới của chúng tôi. Có nghĩa là chúng tôi có một mảng cộng với một số phương thức chuỗi.
# TypeScript Kiểm tra: mảng kết quả không phải là loại ____1010 😱
Điều này là rõ ràng hơn nếu chúng ta sử dụng Sân chơi TypeScript. Vui lòng sao chép mã và dán vào sân chơi, nơi bạn có thể di chuột vào biến để xem các loại. Vì đây chỉ là một bài viết, tôi sẽ dán kết quả ở đây để bạn có thể làm theo.
Tuy nhiên, nếu chúng ta nhìn vào loại kết quả của Object.assign. Nó không cho chúng ta một loạt các chuỗi.
# TypeScript Kiểm tra: Mảng kết quả có thể truy cập các thuộc tính chuỗi 😱
Chúng tôi có thể kiểm tra thêm điều này bằng cách truy cập một thuộc tính chỉ có sẵn cho split2.
Vì vậy, điều đó có nghĩa là nếu tôi gọi split3 trên mảng của chúng tôi, nó sẽ cho chúng tôi biết tài sản này không tồn tại. Đây là những gì chúng ta mong đợi để thấy:
Nhưng, nếu chúng ta gọi split3 trên mảng được cho là của chúng ta được tạo bởi Object.assign, nó hoạt động 😱
Và điều này là do Object.assign bản sao trên tất cả các thuộc tính từ chuỗi gốc. Đây là cách tôi giải thích nó bằng các điều khoản không phải là DEV. Bạn đến một cửa hàng để mua một con chó. Nhưng sau đó lưu trữ Object.assign bán cho bạn một con chó có cánh rồng. Điều này nghe có vẻ siêu tuyệt vời, nhưng đây không thực sự là một con vật cưng thân thiện cho thuê. Hmm ... Tôi không nghĩ đây là ví dụ tốt nhất của tôi. Nhưng tôi nghĩ bạn nhận được quan điểm của tôi 😂
# Chuyển đổi có vẻ ổn trong trình duyệt 🙂
Bây giờ tôi không nghĩ rằng đây là một công cụ phá vỡ giao dịch lớn, vì:
Có vẻ như các trình duyệt có một số loại cơ chế để "an toàn" do object.assign [[], "chuỗi"] và tránh thêm các phương thức của chuỗi đó vào mảng.
Cảm ơn bạn @lukeshiru: vì đã chia sẻ kiến thức này cho tôi 👏 Anh ấy cũng đã tạo mã sân chơi TypeScript để bạn có thể xem> Liên kết
@CaptainArion_: Biến chuỗi thành mảng char nhưng sử dụng hàm bản đồ 🤣
@Hiumesh2: split8 wil cũng thực hiện thủ thuật
@Inside.Code: Thông tin bổ sung: an toàn hơn khi sử dụng toán tử lan rộng [phương pháp thứ hai] thay vì split9 [phương pháp thứ nhất], vì Object.assign0 không hoạt động với một số ký tự không phổ biến.
@faerberrr: Tôi có một chuỗi chứa các ký tự đặc biệt như Object.assign1, v.v. Khi tôi chia chúng bằng phương pháp Object.assign2 và chạy Object.assign3, nó đã trả lại hai lần giá trị dự kiến! Chuyển sang toán tử lây lan đã khắc phục sự cố.
# Tài nguyên
- MDN Web Docs: Split
- MDN Web Docs: Truyền bá
- MDN Web Docs: Array.from
- MDN Web Docs: Object.Assign
- Stack Overflow: Làm cách nào để phân chia một chuỗi, phá vỡ một ký tự cụ thể?
- Stack Overflow: Làm thế nào để bạn có được một chuỗi vào một mảng ký tự trong JavaScript?
- Stack Overflow: Làm cách nào để chia một chuỗi thành một mảng các ký tự?
- Stack Overflow: Chuyển đổi UTF-8 thành Unicode để tìm Emoji trong chuỗi trong Java