Chuyển đổi Mảng sang Chuỗi trong JavaScript

Mảng là một tính năng mạnh mẽ của bất kỳ ngôn ngữ nào. Chúng cho phép bạn chứa nhiều thông tin một cách dễ dàng. Chúng sẽ duy trì thứ tự các mục được thêm vào và thậm chí có thể được sắp xếp. Trong các trình duyệt web hiện đại, chúng thậm chí còn xử lý tự động chuyển đổi một cách kỳ diệu thành các chuỗi có thể đọc được của con người.

Ngay cả với những thứ tốt đẹp hiện đại, bạn vẫn nên biết cách chuyển đổi một mảng thành chuỗi cho những lúc bạn cần chuyển một mảng sang một định dạng khác hoặc muốn làm gì đó hơn là chỉ đơn giản là dấu phẩy phân tách các giá trị (hành vi mặc định) .

Bắt đầu

Không cần công cụ đặc biệt. Bạn có thể hack trong console của trình duyệt web của bạn hoặc sử dụng Node.js REPL. Các lệnh được sử dụng được đưa vào nguyên mẫu của Array Object.

Để chuỗi, hoặc Không cho chuỗi.

Nếu bạn phải chạy phần sau trong trình duyệt của bạn :

alert([1, 2, 3]);

Bạn sẽ nhận được một cảnh báo với thông báo 1,2,3 mà không cần thực hiện thêm bất kỳ công việc nào từ phía bạn. Nếu tất cả những gì bạn cần làm là hiển thị nội dung của một mảng ở định dạng này, thì điều này có thể giúp bạn tiến khá xa. Điều này thậm chí hoạt động khi tham chiếu đến các đối tượng mảng bên trong các ký tự mẫu.

Bên dưới, các mục mảng đang được nối với nhau dưới dạng một chuỗi, sử dụng dấu phẩy , ký tự làm dấu phân cách. Nó giống như chạy một trong hai thao tác sau:

[1, 2, 3].toString();
[1, 2, 3].join();

Cả hai đều dẫn đến cùng một chuỗi 1,2,3 .

Trên thực tế, đó là tất cả những gì mà phương thức .toString() có thể làm cho ta . Nó không chấp nhận tham số nên tính hữu dụng của nó khá hạn chế.

Mặc dù các mảng thực sự là các đối tượng trong JavaScript, phương thức .toString() cho một mảng sẽ overrides phương thức .toString() của đối tượng, đó là lý do tại sao ta không kết thúc với chuỗi [object Object] phiền phức và kém hữu ích hơn.

Cùng nhau tham gia

Trong khi hành vi mặc định của nó (không có bất kỳ thông số thông qua) cũng giống như .toString() , các .join() phương pháp là mạnh mẽ hơn đáng kể.

Giả sử bạn muốn thêm khoảng .join() sau dấu phẩy khi tạo chuỗi của bạn , bạn có thể cho .join() biết chuỗi chính xác để sử dụng:

[1, 2, 3].join(', ');

Bạn muốn có từng mục mảng trên dòng riêng của nó? Chuyển một ký tự dòng mới:

[1, 2, 3].join('\n');

Làm việc với HTML và muốn sử dụng các ngắt đó thay thế?

[1, 2, 3].join('<br>');

Muốn ngắt HTML VÀ dòng mới?… Được rồi, bạn hiểu rồi đấy.

Phương thức .join() chấp nhận một tham số tùy chọn cho phép bạn xác định ký tự phân tách hoặc các ký tự bạn muốn sử dụng để nối các mục mảng với nhau.

Nói về HTML

Một trong những thủ thuật .join() yêu thích của tôi, trước khi các ký tự mẫu và JSX giúp nó cực kỳ dễ dàng làm việc với nhiều khối đánh dấu dòng, là sử dụng .join() để tập hợp một mảng thẻ HTML thành một chuỗi:

[
  '<table>',
    '<thead>',
      '<tr>',
        '<th>Name</th>',
        '<th>Level</th>',
      '</tr>',
    '</thead>',
    '<tbody>',
      '<tr>',
        '<td>Alligator</td>',
        '<td>9001</td>',
      '</tr>',
    '</tbody>',
  '</table>',
].join('');

Truyền vào một chuỗi rỗng tới .join() chỉ cần nối các mục của mảng mà không có bất kỳ ký tự bổ sung nào.

Vẫn khá tiện dụng để xử lý nhiều chuỗi dòng và / hoặc đánh dấu khi bạn không có quyền truy cập vào một số tùy chọn cú pháp hiện đại hơn.

Kết luận

Ngay cả khi tất cả những gì bạn đang cố gắng làm là hiển thị danh sách các mục mảng được phân tách bằng dấu phẩy cho user , bạn vẫn có thể hưởng lợi từ việc sử dụng phương thức .join() . Nó cho phép bạn kiểm soát nhiều hơn kết quả , điều này sẽ giúp user của bạn dễ đọc hơn.

Làm việc với một server back-end không hiểu các mảng được truyền vào? Nối các mục mảng của bạn thành một giá trị duy nhất và bạn đã sẵn sàng!

Tags:

Các tin liên quan

Viết hoa các chuỗi trong JavaScript
2019-11-28
Sử dụng toLocaleString với Numbers, Arrays hoặc Dates trong JavaScript
2019-11-11
Công cụ V8 và Mẹo tối ưu hóa JavaScript
2019-10-10
Hiểu phạm vi biến trong JavaScript
2019-10-01
Hiểu điều này, ràng buộc, gọi và áp dụng trong JavaScript
2019-09-30
Sử dụng phương pháp cắt chuỗi trong JavaScript
2019-09-16
Những lý do tại sao bạn không bao giờ nên sử dụng eval () trong JavaScript
2019-08-26
Toàn cầu mới Thuộc tính JavaScript này
2019-08-08
Vẽ hình với API Canvas JavaScript
2019-08-05
clientWidth và clientHeight trong JavaScript
2019-07-24