Hướng dẫn how to convert an array of strings to a string in javascript? - làm thế nào để chuyển đổi một mảng chuỗi thành một chuỗi trong javascript?

Đăng vào ngày 14 tháng 1 năm 2021

Chúng ta hãy tìm hiểu cách chuyển đổi mảng JavaScript thành chuỗi có hoặc không có dấu phẩy. Mã ví dụ bao gồm.


Để chuyển đổi một mảng JavaScript thành một chuỗi, bạn có thể sử dụng phương thức mảng tích hợp được gọi là toString.

Phương thức sẽ trả về một chuỗi đại diện cho các phần tử được lưu trữ trong mảng của bạn:

let numbers = [0, 1, 2, 3];
let numbersToString = numbers.toString();

console.log(numbersToString);
// output is "0,1,2,3"

Hãy nhớ rằng phương thức toString có thể được sử dụng trên một mảng các đối tượng vì nó sẽ trả về [object Object] thay vì các giá trị thực tế.

Để chuyển đổi một mảng các đối tượng thành một chuỗi, bạn cần sử dụng phương thức JSON.stringify:

let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"

Nó không thực sự là một đại diện của các giá trị mảng vì giá trị trả về vẫn sẽ có dấu ngoặc vuông và xoăn, nhưng nó lại có thể làm tốt nhất bạn có thể làm với một mảng các đối tượng.

JavaScript mảng thành chuỗi không có dấu phẩy

Đôi khi bạn có thể cần chuyển đổi mảng của mình thành một chuỗi mà không có dấu phẩy. Phương thức toString không có tham số, vì vậy bạn cần sử dụng phương thức join thay thế.

join Chấp nhận một tham số chuỗi sẽ đóng vai trò là bộ phân cách cho chuỗi của bạn:

[1, 2, 3].join(); // "1,2,3"
[1, 2, 3].join("+"); // "1+2+3"
[1, 2, 3].join(" "); // "1 2 3"

Bạn thậm chí có thể chuyển một chuỗi trống cho phương thức:

[1, 2, 3].join(""); // 123

Và đó là cách bạn biến một mảng javascript thành một chuỗi.

Thí dụ

Chuyển đổi một mảng thành một chuỗi:

const fruits = ["chuối", "cam", "táo", "xoài"]; Đặt văn bản = fruits.toString ();
let text = fruits.toString();

Hãy tự mình thử »


Định nghĩa và cách sử dụng

Phương thức

let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
1 trả về một chuỗi với các giá trị mảng được phân tách bằng dấu phẩy.

Phương pháp

let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
1 không thay đổi mảng ban đầu.

Ghi chú

Mỗi đối tượng JavaScript có phương thức

let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
1.

Phương thức

let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
1 được JavaScript sử dụng trong nội bộ khi một đối tượng cần được hiển thị dưới dạng văn bản (như trong HTML) hoặc khi một đối tượng cần được sử dụng làm chuỗi.

Thông thường, bạn sẽ không sử dụng nó trong mã của riêng bạn.


Cú pháp

Thông số

Giá trị trả về

Loại hìnhSự mô tả
Một chuỗiCác giá trị mảng được phân tách bằng dấu phẩy.


Hỗ trợ trình duyệt

let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
1 là tính năng ECMAScript1 (ES1).

ES1 (JavaScript 1997) được hỗ trợ đầy đủ trong tất cả các trình duyệt:

Trình duyệt ChromeI EBờ rìaFirefoxCuộc đi sănOpera
ĐúngĐúngĐúngĐúngĐúngĐúng

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ì

let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
6 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ì

let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
6 hoặc
let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
8 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

let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
6 phân tách các ký tự bằng các đơn vị mã UTF-16 có vấn đề vì các ký tự Emoji là UTF-8. Nếu chúng ta nhìn vào biểu tượng cảm xúc yum
[1, 2, 3].join(); // "1,2,3"
[1, 2, 3].join("+"); // "1+2+3"
[1, 2, 3].join(" "); // "1 2 3"
0 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

[1, 2, 3].join(); // "1,2,3"
[1, 2, 3].join("+"); // "1+2+3"
[1, 2, 3].join(" "); // "1 2 3"
1 và
[1, 2, 3].join(); // "1,2,3"
[1, 2, 3].join("+"); // "1+2+3"
[1, 2, 3].join(" "); // "1 2 3"
2 đượ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ề let users = [ { name: "John" }, { name: "Lisa" }, { name: "Jack" }, { name: "Mary" }, ]; let usersToString = JSON.stringify(users); console.log(usersToString); // [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]" 8

Một điều cần lưu ý

let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
8 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

[1, 2, 3].join(); // "1,2,3"
[1, 2, 3].join("+"); // "1+2+3"
[1, 2, 3].join(" "); // "1 2 3"
5 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
[1, 2, 3].join(); // "1,2,3"
[1, 2, 3].join("+"); // "1+2+3"
[1, 2, 3].join(" "); // "1 2 3"
6 😱

Đ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

let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
8. 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

[1, 2, 3].join(); // "1,2,3"
[1, 2, 3].join("+"); // "1+2+3"
[1, 2, 3].join(" "); // "1 2 3"
8.

Vì vậy, điều đó có nghĩa là nếu tôi gọi

[1, 2, 3].join(); // "1,2,3"
[1, 2, 3].join("+"); // "1+2+3"
[1, 2, 3].join(" "); // "1 2 3"
9 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

[1, 2, 3].join(); // "1,2,3"
[1, 2, 3].join("+"); // "1+2+3"
[1, 2, 3].join(" "); // "1 2 3"
9 trên mảng được cho là của chúng ta được tạo bởi
let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
8, nó hoạt động 😱

Và điều này là do

let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
8 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ữ
let users = [
  { name: "John" },
  { name: "Lisa" },
  { name: "Jack" },
  { name: "Mary" },
];
let usersToString = JSON.stringify(users);

console.log(usersToString);
// [{"name":"John"},{"name":"Lisa"},{"name":"Jack"},{"name":"Mary"}]"
8 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:

[1, 2, 3].join(""); // 123
4 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ì

[1, 2, 3].join(""); // 123
5 (phương pháp đầu tiên), vì
[1, 2, 3].join(""); // 123
6 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ư

[1, 2, 3].join(""); // 123
7, v.v. Khi tôi chia chúng bằng phương pháp
[1, 2, 3].join(""); // 123
8 và chạy
[1, 2, 3].join(""); // 123
9, 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

Bạn có thể chuyển đổi mảng thành chuỗi trong javascript không?

JavaScript mảng toString () Phương thức toString () trả về một chuỗi với các giá trị mảng được phân tách bằng dấu phẩy. The toString() method returns a string with array values separated by commas.

Làm thế nào để bạn chuyển đổi một mảng thành một chuỗi?

Vì vậy, làm thế nào để chuyển đổi mảng chuỗi thành chuỗi trong java.Chúng ta có thể sử dụng phương thức Arrays.ToString gọi phương thức toString () trên các phần tử riêng lẻ và sử dụng StringBuilder để tạo chuỗi.use Arrays. toString method that invoke the toString() method on individual elements and use StringBuilder to create String.

Phương thức nào chuyển đổi một mảng thành chuỗi trong javascript?

Prototype.ToString () Phương thức toString () trả về một chuỗi đại diện cho mảng được chỉ định và các phần tử của nó. toString() The toString() method returns a string representing the specified array and its elements.

Làm cách nào để chuyển đổi một chuỗi thành một mảng mảng?

Chuỗi trong javascript có thể được chuyển đổi thành một mảng ký tự bằng cách sử dụng các hàm chia () và mảng.from ().using the split() and Array. from() functions.