JSON Parse Unexpected Token: Что это за ошибка и как её исправить раз и навсегда

Вы работаете над проектом, и внезапно всё ломается. В консоли браузера или терминале появляется загадочное сообщение: "SyntaxError: JSON.parse: unexpected token". Знакомо? Эта ошибка — частый гость в мире веб-разработки и программирования, способный вывести из себя даже опытного разработчика. Но не спешите паниковать! За этим сообщением скрывается логичная причина, а её решение часто лежит на поверхности. Давайте разберёмся, что скрывается за этим «неожиданным токеном», почему он появляется и как быстро вернуть ваш код к жизни.

Что такое JSON и почему он «ломается»?

JSON (JavaScript Object Notation) — это популярный текстовый формат для обмена данными. Он лёгкий, читаемый для человека и простой для машин. Но у него строгие правила синтаксиса. Функция JSON.parse() в JavaScript как раз пытается превратить строку в формате JSON в рабочий JavaScript-объект. Ошибка "unexpected token" возникает, когда парсер встречает символ или последовательность символов, которые нарушают эти строгие правила в том месте, где он их не ожидал.

Ключевой момент: Ошибка указывает не на проблему в вашем JavaScript-коде, а на проблему в данных, которые вы пытаетесь распарсить. Парсер говорит: «Я шёл по строгому пути правил JSON, и тут вдруг встретил что-то совершенно неподходящее».

Типичные причины ошибки и их поиск

В 99% случаев причина кроется в одном из следующих сценариев. Давайте рассмотрим их по порядку.

1. Невалидный JSON в исходной строке

Самая частая причина. Вы пытаетесь распарсить строку, которая не является корректным JSON.

Отсутствующие или лишние кавычки: {"name": "Ivan} или {"name": "Ivan""}.
Висячая запятая: В JSON, в отличие от современного JavaScript, запятая после последнего элемента объекта или массива запрещена: {"a": 1, "b": 2,}.
Незаэкранированные специальные символы: Символы типа кавычек, обратного слеша или переноса строки внутри строки должны быть экранированы: {"message": "Он сказал \"Привет\""}.
Неверный тип данных: Использование undefined или функций. В JSON допустимы только строки, числа, объекты, массивы, булевы значения и null.

2. Ответ от сервера — не JSON

Вы ожидаете JSON, но сервер возвращает что-то другое. Например:

Страницу с HTML-кодом ошибки (скажем, 500 Internal Server Error).
Пустую строку или просто текст.
Данные в формате XML или plain text.

Парсер, получив символ < (начало HTML-тега) вместо { или [, справедливо выбросит ошибку «unexpected token».

3. Проблемы с кодировкой или невидимые символы

Иногда в начале строки может скрываться BOM (Byte Order Mark) или другие непечатаемые символы, которые парсер не может интерпретировать. Строка выглядит как нормальный JSON, но на самом деле начинается с невидимого мусора.

Совет по отладке: Всегда логируйте или выводите в консоль сырую строку, которую вы собираетесь парсить (console.log(rawString)). Скопируйте её и проверьте на валидаторе JSON (их много онлайн). Часто проблема становится очевидной сразу.

Пошаговая инструкция по исправлению

Проверьте сырые данные: Используйте console.log(typeof data, data) перед вызовом JSON.parse(). Убедитесь, что это строка и посмотрите на её содержание.
Валидируйте JSON: Скопируйте эту строку в онлайн-валидатор (например, JSONLint). Он точно укажет на строку и символ с ошибкой.
Обработайте ошибки: Всегда оборачивайте вызов JSON.parse() в блок try...catch.

try {
    const parsedData = JSON.parse(rawString);
    // Работаем с parsedData
} catch (error) {
    console.error("Ошибка парсинга JSON:", error.message);
    console.error("Сырая строка:", rawString);
    // Обработка ошибки: показать сообщение пользователю, отправить запрос заново
}

Проверьте источник данных: Если данные приходят с сервера, проверьте сетевое взаимодействие во вкладке «Network» инструментов разработчика. Убедитесь, что заголовок Content-Type ответа равен application/json.
Очистите строку: Если подозреваете невидимые символы, используйте rawString.trim() или более сложную очистку.

FAQ: Часто задаваемые вопросы

Что значит «unexpected token»?

Это означает, что парсер JSON встретил символ или последовательность символов, которые не соответствуют ожидаемой структуре JSON в данном месте (например, запятую там, где должно быть двоеточие, или букву там, где должно быть число).

Как быстро найти ошибку в большом JSON?

Используйте онлайн-валидатор. Вставьте в него свой JSON, и он подсветит строку и символ с синтаксической ошибкой. Также помогает форматирование (pretty print) JSON для визуального анализа структуры.

Ошибка возникает при работе с API. Что делать?

1. Проверьте, тот ли endpoint вы вызываете. 2. Убедитесь, что запрос успешен (status 200). 3. Проверьте заголовок Content-Type ответа. 4. Посмотрите на тело ответа во вкладке «Network» — возможно, сервер возвращает HTML-страницу с ошибкой, а не JSON.

Может ли ошибка быть из-за проблем с кодировкой?

Да, особенно если в начале строки присутствует BOM (U+FEFF). Помогает обрезка строки (.trim()) или её обработка для удаления таких символов.

Почему валидный JSON вроде бы не парсится?

Скорее всего, вы пытаетесь парсить уже распаршенный объект (повторно). Убедитесь, что JSON.parse() применяется именно к строке, а не к объекту. Используйте console.log(typeof data) для проверки.