JS метод JSON.stringify()

Загальний опис

JSON.stringify() - це метод, який конвертує значення JavaScript в рядок формату JSON. Цей метод часто використовується при роботі з веб-API, передачі даних між сервером та клієнтом, а також для локального зберігання даних у форматі JSON.

В основному, JSON.stringify() потрібен для перетворення даних у формат, який можна легко передавати і зберігати. Це надзвичайно корисно в сучасних веб-додатках, де передача даних між клієнтом та сервером є постійною.

Основне застосування:

1. Веб-API: При взаємодії з веб-API, вам часто потрібно буде відправляти дані у форматі JSON. JSON.stringify() дозволяє перетворити об'єкти JavaScript в рядок, який потім можна відправити на сервер.
2. Локальне зберігання: Якщо ви використовуєте localStorage в браузері для зберігання даних, вам потрібно зберігати ці дані у форматі рядка. За допомогою JSON.stringify() ви можете легко перетворити ваши об'єкти або масиви на рядки для зберігання.

Особливості роботи: Коли ви використовуєте JSON.stringify(), важливо розуміти деякі його особливості:

1. Функції та undefined: JSON.stringify() автоматично пропускає значення undefined і функції. Наприклад:

let data = {
  name: "John",
  age: 30,
  greet: function() { console.log("Hello!"); }
};
console.log(JSON.stringify(data)); // {"name":"John","age":30}

1. toJSON: Якщо об'єкт має метод toJSON, JSON.stringify() викликає його, а не конвертує сам об'єкт. Наприклад:

let user = {
  name: "John",
  age: 30,
  toJSON() {
    return {name: this.name};
  }
};
console.log(JSON.stringify(user)); // {"name":"John"}

1. Простори: Ви можете використовувати третій аргумент для вказівки просторів для форматування виведеного рядка. Це корисно для людського читання:

let user = {name: "John", age: 30};
console.log(JSON.stringify(user, null, 2)); 
/* 
{
  "name": "John",
  "age": 30
}
*/

На відміну від методів, які просто перетворюють об'єкти в рядки (наприклад, метод toString()), JSON.stringify() забезпечує стандартне представлення даних у форматі, яке може бути зрозумілим і іншими системами і мовами програмування.

При використанні JSON.stringify() важливо також розуміти його обмеження. Він не відтворює прототипи, функції, undefined або Symbol. Якщо ви потребуєте серіалізації більш складних структур, розгляньте використання спеціалізованих бібліотек для цього завдання.

Синтаксис

JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)

Параметри

*value

Значення, яке потрібно конвертувати у рядок JSON. Це може бути будь-який об'єкт або примітив.

replacer

Функція, яка змінює процес конвертації в рядок, або масив рядків та чисел, що вказують властивості значення, які мають бути включені у вивід.

Якщо replacer є масивом, всі елементи у цьому масиві, які не є рядками або числами (або примітивами, або об'єктами-обгортками), включаючи значення Symbol, повністю ігноруються. Якщо replacer є будь-чим іншим, ніж функція або масив (наприклад, null або не наданий), всі властивості об'єкта з рядковими ключами включаються в результуючий рядок JSON.

space

Рядок або число, яке використовується для вставки пробілів (включаючи відступи, символи переведення рядка тощо) в результуючий рядок JSON з метою покращення читабельності.

Return

string

Повертає рядок JSON, що представляє задане значення, або undefined, якщо значення не може бути конвертоване у відповідний рядок JSON.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Створення об'єкта користувача
let user = {
    name: "Олександр",
    age: 25,
    isSubscribed: true
};

// Зберігання об'єкта користувача в localStorage у форматі JSON
localStorage.setItem('userInfo', JSON.stringify(user));

// Отримання об'єкта користувача з localStorage та конвертація назад у об'єкт
let retrievedUser = JSON.parse(localStorage.getItem('userInfo'));
console.log(retrievedUser); // { name: "Олександр", age: 25, isSubscribed: true }

// Створення об'єкта замовлення
let order = {
    productId: 12345,
    quantity: 3
};

// Відправлення об'єкта замовлення на сервер у форматі JSON
fetch('/api/placeOrder', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(order)
}).then(response => response.json())
  .then(data => console.log(data));