Chúng ta có thể chuyển đổi một chuỗi thành đối tượng trong javascript không?

Đôi khi cần phải chuyển đổi một đối tượng thành một chuỗi để xem hoặc lưu trữ nó. Với mục đích gỡ lỗi, một giao diện điều khiển đơn giản. log() là đủ, vì bất kỳ Công cụ dành cho nhà phát triển nào của trình duyệt hiện đại sẽ cung cấp một phiên bản in đẹp của một đối tượng. Trong khi đó, việc dựa vào chuyển đổi ngầm định khi ghi một đối tượng vào bất kỳ vị trí nào khác sẽ chỉ dẫn đến chuỗi “[object Object]” hoàn toàn vô dụng. Có thể đạt được kết quả tốt hơn nhiều bằng cách sử dụng JSON tích hợp của JavaScript. stringify() hoặc bằng cách viết hàm chuyển đổi của riêng bạn. Mỗi cách trong số này sẽ tạo ra các kết quả khác nhau, vì vậy bạn nên xem xét cẩn thận từng tùy chọn trước khi quyết định phương pháp nào phù hợp nhất với yêu cầu của mình. Với ý nghĩ đó, chúng tôi sẽ thử thực hiện một vài chiến lược ở đây, bao gồm sử dụng phương thức toSting(), phương thức chuyển đổi tùy chỉnh, cũng như JSON đã nói ở trên. stringify() trong hướng dẫn phát triển web ngày nay

Bạn đang tìm cách bổ sung JavaScript của mình bằng một số HTML vững chắc?

Phương thức toString() trong JavaScript

Với mục đích trình diễn, đây là một lớp chứa một số thuộc tính cũng như một phương thức. Đặt một phần tử đoạn văn bản bên trong thành cá thể người sẽ gọi phương thức toString() kế thừa của nó, phương thức này sẽ in ra “[đối tượng đối tượng]” phổ biến. Đây là giao diện của mã JavaScript

'use strict';

const appendParagraph = (content) => {
  const para = document.createElement("p");
  para.innerText = content;
  document.body.appendChild(para);
};

class Person {
  constructor(name, location) {
    this.name = name;
    this.location = location;
  }
  sayHello = () => appendParagraph("Hi! I'm " + this.name);
  toString = () => "Hi! I'm " + this.name 
                 + " and I live at " + this.location;
}
const person = new Person(
  'Rob', 
  {
    city: 'Ottawa',
    country: 'Canada',
    phoneNumbers: ['555-1234', '555-2345'],
  }
);
appendParagraph(person); // [object Object]
person.sayHello();       // Hi! I'm Rob

Như đã nêu trong phần giới thiệu, nó không hữu ích chút nào. Nhưng đó chính xác là vấn đề, vì mỗi lớp chịu trách nhiệm triển khai phương thức thể hiện có ý nghĩa của riêng mình. Vì vậy, hãy thêm toString() vào lớp của chúng ta để chúng ta có được mô tả nhiều thông tin hơn

class Person {
  constructor(name, location) {
    this.name = name;
    this.location = location;
  }
  sayHello = () => appendParagraph("Hi! I'm " + this.name);
  toString = () => "Hi! I'm " + this.name 
                 + " and I live at " + this.location;
}
const person = new Person(
  'Rob', 
  {
    city: 'Ottawa',
    country: 'Canada',
    phoneNumbers: ['555-1234', '555-2345'],
  }
); 
//Prints "Hi! I'm Rob and I live at [object Object]"
appendParagraph(person); 

Đó là một cải tiến, nhưng bạn có thể thấy cách chúng tôi gặp vấn đề tương tự với các đối tượng con

Đọc. Công cụ quản lý dự án dành cho nhà phát triển web

Sử dụng Phương thức chuyển đổi tùy chỉnh trong JavaScript

Để có tính linh hoạt tối ưu, bạn có thể cân nhắc viết một phương thức chuyển đổi chung mà sau đó bạn có thể gọi từ toString() của một phiên bản. Cái này sử dụng đệ quy để xử lý các đối tượng lồng nhau. Thậm chí còn có một số logic để phân biệt giữa các đối tượng và mảng, để chúng có định dạng riêng (i. e. dấu ngoặc nhọn ({}) cho đối tượng so với dấu ngoặc vuông ([]) cho mảng

const convert = obj => (
  Object.entries(obj)
    .map(([key, value]) => (
      value === Object(value)
        ? (Array.isArray(value) 
          ? `${key}[${convert(value)}]` 
          : `${key}{${convert(value)}};`)
        : `${key}:${value};`
    ))
    .join(' ')
);

class Person2 {
  constructor(name, age, location) {
    this.name = name;
    this.age = age;
    this.location = location;
  }
  sayHello = () => appendParagraph("Hi! I'm " + this.name);
  toString = () => convert(this);
}
const person2 = new Person2(
  'Charlotte',
  29,
  {
    city: 'London',
    country: 'UK',
    phoneNumbers: ['666-2112', '666-5150'],
  }
);
// name:Charlotte; age:29; location{city:London; country:UK; 
// phoneNumbers[0:666-2112; 1:666-5150;]}; sayHello{}; toString{};
appendParagraph(person2);

Sử dụng JSON. stringify() trong JavaScript

Đây là hàm JavaScript gốc duy nhất biến bất kỳ đối tượng nào thành chuỗi; . stringify(OBJECT) và nó sẽ biến một đối tượng hoặc mảng thành một chuỗi được mã hóa JSON (JavaScript Object Notation). Đó là lý tưởng để tuần tự hóa các đối tượng thành chuỗi để lưu trữ trong cơ sở dữ liệu vì hầu hết đều hỗ trợ kiểu dữ liệu JSON. Để chuyển đổi chuỗi trở lại thành Đối tượng, có JSON. phương pháp phân tích (STRING)

Đây là văn bản được JSON hóa cho person2

//{"name":"Charlotte","age":29,"location":{"city":"London",
//"country":"UK","phoneNumbers":["666-2112","666-5150"]}}
appendParagraph(JSON.stringify(person2));

Như bạn có thể thấy, đầu ra trông không khác mấy so với đầu ra của hàm tùy chỉnh của chúng ta, ngoại trừ tên thuộc tính và chuỗi luôn được đặt trong dấu ngoặc kép và các trường được phân cách bằng dấu phẩy

Thay đổi JSON. Đầu ra của stringify

JSON. stringify() thực sự linh hoạt hơn rất nhiều so với những gì mọi người đánh giá cao, nhờ vào các tham số thứ 2 và thứ 3 tùy chọn của nó

JSON.stringify(value, replacer, spaces)

Đây là một chức năng thay thế và không gian. Trình thay thế là một hàm hoặc mảng có thể ảnh hưởng đến quá trình xâu chuỗi bằng cách thay đổi định dạng hoặc thậm chí lọc các thuộc tính. Tham số khoảng trắng kiểm soát khoảng cách trong chuỗi được tạo bằng cách kích hoạt chế độ in đẹp và đặt số lượng khoảng trắng cho các vết lõm

Đọc. Thư viện và Công cụ HTML, CSS và JavaScript

Tham số thay thế trong JavaScript

Như đã đề cập ở trên, tham số thay thế có thể là hàm hoặc mảng. Là một hàm, nó nhận hai tham số. khóa và giá trị được xâu chuỗi. Đối tượng tìm thấy khóa được cung cấp dưới dạng tham số này của trình thay thế (miễn là các nhà phát triển web không sử dụng chức năng mũi tên). Ban đầu, hàm thay thế được gọi với một chuỗi rỗng làm khóa đại diện cho đối tượng được xâu chuỗi hóa. Sau đó, nó được gọi cho từng thuộc tính đối tượng hoặc phần tử mảng được xâu chuỗi

Chúng ta có thể sử dụng hàm thay thế để xóa các trường dựa trên giá trị hoặc loại của chúng. Trong ví dụ sau, tất cả các số bị xóa khỏi đầu ra, dẫn đến tuổi của người2 bị bỏ qua

const replacer = (key, value) => typeof value === 'number' 
                                 ? undefined 
                                 : value;
                                 
//{"name":"Charlotte","location":{"city":"London",
// "country":"UK","phoneNumbers":["666-2112","666-5150"]}}
appendParagraph(JSON.stringify(person2, replacer));

Thay vì loại trừ một số trường nhất định, chúng ta có thể cung cấp một mảng có giá trị cho biết tên của các thuộc tính trong đối tượng sẽ được đưa vào chuỗi JSON kết quả

//{"name":"Charlotte","age":29}
appendParagraph(JSON.stringify(person2, ['name', 'age']));

In đẹp với tham số khoảng trắng và JavaScript

Đối số dấu cách có thể được sử dụng để kiểm soát khoảng cách trong chuỗi cuối cùng. Giống như chức năng thay thế, nó cũng chấp nhận hai loại khác nhau

1. Trong trường hợp là một số, các mức liên tiếp trong quá trình xâu chuỗi sẽ được thụt vào bởi nhiều ký tự khoảng trắng này, tối đa là 10
2. Trong trường hợp là một chuỗi, các mức liên tiếp sẽ được thụt vào bởi chuỗi này hoặc mười ký tự đầu tiên

JSON này. lời gọi stringify() tạo ra một thụt đầu dòng của hai khoảng trắng

appendElement(JSON.stringify(person2, null, '  '), 'pre');
/*
{
  "name": "Charlotte",
  "age": 29,
  "location": {
    "city": "London",
    "country": "UK",
    "phoneNumbers": [
      "666-2112",
      "666-5150"
    ]
  }
}
*/

Sử dụng một ký tự tab bắt chước hình thức in đẹp “tiêu chuẩn”

Suy nghĩ cuối cùng về việc chuyển đổi đối tượng JavaScript thành chuỗi

JavaScript cung cấp một số cách để chuyển đổi một đối tượng thành một chuỗi để hiển thị hoặc lưu giữ. Các phạm vi này từ JSON tích hợp. stringify(), ghi đè toString(), để viết hàm chuyển đổi của riêng bạn. Mỗi cách tiếp cận này có thể được nhìn thấy trong bản demo Codepen. JSON. stringify() là một lựa chọn tuyệt vời để duy trì các đối tượng và mảng trong cơ sở dữ liệu, trong khi hai tùy chọn còn lại phù hợp hơn để trình bày một đối tượng ở dạng con người có thể đọc được

Bạn có thể chuyển đổi một chuỗi thành một đối tượng trong JavaScript không?

Phương thức nào chuyển đổi một chuỗi thành một đối tượng JavaScript?

Chúng ta có thể chuyển đổi chuỗi thành mảng trong JS không?

Bạn có thể tạo các đối tượng bằng JavaScript không?