Bản in đẹp cung cấp một định dạng thời trang có thể dễ đọc và dễ hiểu đối với con người. Hầu hết các trình duyệt web đều hỗ trợ JSON. stringify[] để tạo kiểu/in đẹp chuỗi JSON
Bài viết này sẽ mô tả ngắn gọn cách in đẹp chuỗi JSON trong JavaScript
Làm cách nào để in chuỗi JSON đẹp trong JavaScript?
Trong JavaScript, JSON. Phương thức stringify[] in một chuỗi/văn bản JSON đẹp mắt ở định dạng được tổ chức tốt. Phương pháp này được sử dụng để chuyển đổi giá trị dựa trên JavaScript thành một chuỗi. Nó cung cấp cơ sở tuần tự hóa cho các đối tượng, số, mảng, Booleans, chuỗi, v.v.
cú pháp
Cú pháp in JSON. phương thức stringify[] như sau
JSON. stringify [ giá trị, thay thế, dấu cách ]
trong cú pháp
- giá trị. chỉ định giá trị chuyển đổi thành một chuỗi để in đẹp
- người thay thế. đại diện cho hàm, một mảng chuỗi hoặc số
- không gian. biểu thị đối tượng số hoặc chuỗi chèn khoảng trắng
ví dụ 1. In đẹp một đối tượng trong JavaScript
Trong ví dụ này, JSON. Phương thức stringify[] được sử dụng để in một chuỗi JSON đẹp trong JavaScript
Mã số
// Ví dụ về thông tin in đẹp
let x = {
Name: "Ali" ,
Tuổi. 20 ,
Địa chỉ. {
đường phố. "32, Phố Đại lộ Hoàng gia" ,
thành phố. "Islamabad"
}
} . log
console.log[ JSON. stringify [ x, null, 4]]
Trong mã, một đối tượng có tên là “x” được tạo có chứa thông tin của một người, tôi. e. , Tên, Tuổi và Địa chỉ của nó
đầu ra
Đầu ra được hiển thị trong cửa sổ bảng điều khiển trong đó một đối tượng JSON được trình bày theo cách đẹp mắt bằng JavaScript
ví dụ 2. In đẹp một ngày trong JavaScript
Một ví dụ khác được điều chỉnh để in dữ liệu một cách hiệu quả với JavaScript. Hãy chuyển sang mã để thực hành ví dụ này
Mã số
// Một ví dụ khác là sử dụng bảng điều khiển
in đẹp. log ["Hiển thị ngày bằng chữ in đẹp"]
bảng điều khiển. log [ JSON. stringify [ new Date [2022, 2, 10, 9, 3, 2]]];
Trong đoạn mã trên, hoạt động của các phương thức khác nhau như sau
- Đầu tiên, bảng điều khiển. phương thức log[] được sử dụng để hiển thị một thông báo
- Sau đó, phương thức Date[] được chuyển đến JSON. stringify[] để hiển thị thông báo đẹp
Ảnh chụp màn hình của mã như sau
đầu ra
Đầu ra ở trên cho thấy bản in đẹp của các chuỗi JSON bằng cách sử dụng JSON của JavaScript. phương thức stringify[]. JSON. Phương thức stringify[] hiển thị thông tin ngày tháng một cách hiệu quả để hiểu rõ hơn
Sự kết luận
JSON. Phương thức stringify[] được sử dụng để in chuỗi JSON trong JavaScript. Một biến đối tượng hoặc giá trị của đối tượng có thể được chuyển trực tiếp tới JSON. stringify[] phương pháp in chuỗi JSON trong JavaScript. Bạn đã học cách in chuỗi JSON đẹp trong JavaScript. Để hiểu rõ hơn, chúng tôi đã trình bày cách sử dụng phương thức stringify[] bằng các ví dụ phù hợp
Chúng ta đều biết rằng console.log[] không thể in trực tiếp một đối tượng. Nó in [object object]. Vì vậy, trước tiên chúng tôi sử dụng JSON.stringify[] để chuyển đổi đối tượng thành một chuỗi và sau đó in trong bảng điều khiển, như thế này
Nói chung, các nhà phát triển sử dụng chức năng stringify này theo cách đơn giản như chúng tôi đã làm ở trên. Nhưng tôi sẽ cho bạn biết một số bí mật ẩn giấu của viên ngọc nhỏ này sẽ giúp cuộc sống của bạn trở nên dễ dàng
1. Đối số thứ hai [Mảng]
Có, hàm stringify cũng có thể có đối số thứ 2. Đó là một dãy các phím cho đối tượng mà bạn muốn in trong bảng điều khiển
Bằng cách này, bạn có thể bỏ qua các phím vô dụng này, tập trung vào các phím bạn muốn biết. Thay vì in toàn bộ đối tượng JSON, chúng ta chỉ có thể in khóa được yêu cầu bằng cách chuyển nó dưới dạng một mảng trong đối số thứ 2
2. Đối số thứ hai [Hàm]
Chúng ta cũng có thể truyền đối số thứ 2 dưới dạng hàm. Nó đánh giá từng cặp khóa-giá trị theo logic được viết trong hàm. Nếu bạn trả về undefined, cặp khóa-giá trị sẽ không được in. Xem ví dụ này để hiểu rõ hơn
Chỉ id được in khi điều kiện hàm của chúng ta trả về undefined cho chuỗi giá trị typeof
3. Đối số thứ ba là Số
Đối số thứ ba kiểm soát khoảng cách trong chuỗi cuối cùng. Nếu đối số là một số, kết quả in sẽ mở rộng và thụt lề các ký tự của số này
Tính năng này rất hữu ích cho sự phát triển địa phương của chúng tôi. Theo kích thước kỹ thuật số, độ dài thụt đầu dòng tương ứng cũng có thể được điều chỉnh
4. Đối số thứ ba là Chuỗi
Nếu đối số thứ ba là một chuỗi, nó sẽ được sử dụng thay vì ký tự khoảng trắng như hiển thị ở trên
Ở đây '-' thay thế ký tự khoảng trắng. Đôi khi bạn cũng có thể sử dụng phong cách này để in kết quả
5. Phương thức toJSON
Chúng tôi có một phương thức tên là toJSON có thể là một phần của bất kỳ đối tượng nào làm thuộc tính của nó. JSON.stringify[] trả về kết quả của hàm này và xâu chuỗi nó thay vì chuyển đổi toàn bộ đối tượng thành chuỗi. Xem ví dụ này
Ở đây chúng ta có thể thấy thay vì in toàn bộ đối tượng thì nó chỉ in kết quả của hàm toJSON. Nói chung, sơ đồ này có thể lọc ra một số trường cơ sở dữ liệu không cần thiết cho giao diện người dùng
6. Tin nhắn bảng điều khiển đầy màu sắc
Nếu bạn đang chạy nút. js, bạn có thể sử dụng tham chiếu màu của văn bản để tạo kiểu cho tin nhắn của mình
[object object]2 là nơi trong chuỗi [đối số thứ hai] được đưa vào. [object object]3 đặt lại màu của thiết bị đầu cuối để nó không tiếp tục là màu được chọn nữa sau thời điểm này
7. Bản tóm tắt
Trong phần này, chúng ta đã tìm hiểu về các tính năng thú vị này của JSON.stringify[]. Tôi hy vọng bạn có thể nhớ và sử dụng chúng trong một số tình huống bắt buộc