Использование 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: '[email protected]',   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: '[email protected]' };  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: '[email protected]',   plan: 'Pro' };  const userStr = JSON.stringify(user, null, '...'); // "{ // ..."name": "Sammy", // ..."email": "[email protected]", // ..."plan": "Pro" // }" 

Заключение

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

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