// Tutorial //

Использование JSON.parse() и JSON.stringify()

Published on November 16, 2020
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
Русский
Использование JSON.parse() и JSON.stringify()

Введение

Объект JSON, доступный во всех современных браузерах, включает два полезных метода для работы с контентом в формате JSON: parse и stringify. JSON.parse() берет строку JSON и трансформирует ее в объект JavaScript. JSON.stringify() берет объект JavaScript и трансформирует его в строку JSON.

Приведем пример:

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"

console.log(JSON.parse(myObjStr));
// Object {name:"Sammy",age:6,favoriteFood:"Tofu"}

Хотя данные методы обычно применяются к объектам, их можно использовать и в отношении массивов:

const myArr = ['bacon', 'lettuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);
// "["shark","fish","dolphin"]"

console.log(JSON.parse(myArrStr));
// ["shark","fish","dolphin"]

JSON.parse()

JSON.parse() может принимать функцию в качестве второго аргумента, который может трансформировать значения объекта до их возврата. Здесь значения объекта трансформируются в верхний регистр в возвращаемом объекте метода parse:

const user = {
  name: 'Sammy',
  email: 'Sammy@domain.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user);

JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

Примечание. Запятые в конце строки недопустимы в формате JSON, и поэтому метод JSON.parse() выдает ошибку в случае передачи в него строки, заканчивающейся на запятую.

JSON.stringify()

JSON.stringify() может принимать два дополнительных аргумента, первый из которых представляет собой функцию replacer, а второй — строковое или числовое значение, используемое в качестве пробела в возвращаемой строке.

Функцию replacer можно использовать для фильтрации значений, поскольку любое значение, возвращаемое как undefined, получается из возвращаемой строки:

const user = {
  id: 229,
  name: 'Sammy',
  email: 'Sammy@domain.com'
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

const userStr = JSON.stringify(user, replacer);
// "{"id":229,"name":"Sammy"}"

Приведем еще пример с передачей аргумента space:

const user = {
  name: 'Sammy',
  email: 'Sammy@domain.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user, null, '...');
// "{
// ..."name": "Sammy",
// ..."email": "Sammy@domain.com",
// ..."plan": "Pro"
// }"

Заключение

В этом учебном модуле мы узнали, как использовать методы JSON.parse() и JSON.stringify(). Если вы хотите узнать больше о работе с JSON в Javascript, ознакомьтесь с учебным модулем Работа с JSON в JavaScript.

Более подробную информацию о том, как программировать на JavaScript, можно найти в серии статей Программирование на JavaScript или на странице тем по JavaScript в разделе упражнений и проектов по программированию.

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here


About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!