В JavaScript, когда пользователь отправляет форму, данные формы собираются в формате String. Для корректной отправки запроса данную строку необходимо преобразовать в объект JSON. Это самый популярный случай, когда необходимо выполнить преобразование строки в объект. Однако существуют и другие.

Рассмотрим наиболее популярные ситуации, где нам может понадобиться преобразование, и варианты их реализации.

JSON.parse()

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

let user1 = '{"name":"Иван","email":"ivan@mail.com"}';
let object1 = JSON.parse(user1);  // {name: "Иван", email: "ivan@mail.com"}

let user2 = '{"name":"Иван","email"}';
let object2 = JSON.parse(user2);  // Ошибка - SyntaxError

let user3 = '{"name":"Иван",}';
let object3 = JSON.parse(user3);  // Ошибка - SyntaxError

eval()

Функция eval() позволяет выполнить код, который передается ей в виде строки. Считается опасной функцией ввиду ее несекьюрности и не рекомендуется к применению. Тем не менее, при грамотном ее использовании, позволяет преобразовать строку в объект и дополнять ее. Чтобы eval() интерпретировал выражение, как объект, необходимо его дополнительно заключить в скобки.

let user1 = '{"name":"Иван","email":"ivan@mail.com"}';
let object1 = eval('(' + user1 + ')');  // {name: "Иван", email: "ivan@mail.com"}

let user2 = '"name":"Иван","email":"ivan@mail.com"';
let object2 = eval('({' + user2 + '})');  // {name: "Иван", email: "ivan@mail.com"}

let user3 = '{"name":"Иван","email"}';
let object3 = eval('(' + user3 + ')');  // Ошибка - SyntaxError

split()

Этим методом мы можем воспользоваться, когда наша строка не имеет явную структуру объекта. В таком случае мы просто дробим текст на элементы массива, а затем из них циклом создаем ключи объекта и их значения.

let userInfo = 'name,Иван,email,ivan@mail.com';
let userInfoArray = userInfo.split(',');  // ['name', 'Иван', 'email', 'ivan@mail.com']

let userInfoObj = {};
for (let i=0; i<userInfoArray.length; i+=2) {
  userInfoObj[userInfoArray[i]] = userInfoArray[(i+1)];
}

console.log(userInfoObj);  // => {name: 'Иван', email: 'ivan@mail.com'}

Подобным образом мы можем преобразовать строку в объект, ключами которого будут все разделенные элементы строки с пустыми значениями:

let userParams = 'name email address phone';
let userParamsArray = userParams.split(' ');  // ['name', 'email', 'address', 'phone']

let userParamsObj = {};
for (let i=0; i<userParamsArray.length; i++) {
  userParamsObj[userParamsArray[i]] = '';
}

console.log(userParamsObj);  // => {name: '', email: '', address: '', phone: ''}

URLSearchParams()

Случаются ситуации, когда нам необходимо обработать строку запроса и поместить данные в объект. Для этого можно использовать конструктор URLSearchParams() в связке с методом Object.fromEntries(). Примером может любыть любой url-адрес с параметрами:

const url = new URL('https://fruntend.com/posts?direction=desc&sort=likes_count');
const queryString = url.search; // '?direction=desc&sort=likes_count'

const obj = new URLSearchParams(queryString);  // конструктор возвращает экземпляр объекта
console.log(obj.get('direction'));  // => desc
console.log(obj.get('sort'));  // => likes_count

const queryObject = Object.fromEntries(obj);
console.log(queryObject);  // => {direction: 'desc', sort: 'likes_count'}