Ошибка JSON Parse Unexpected Token: Как найти и исправить «неожиданный символ»

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

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

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

Главные виновники: откуда берётся «неожиданный токен»

В 99% случаев ошибка вызвана одной из следующих причин:

1. Неправильные кавычки

JSON требует двойных кавычек (") для обозначения ключей и строковых значений. Одинарные кавычки (') или обратные апострофы (`` ` ``) недопустимы.

// НЕВЕРНО (вызовет ошибку):
{'name': 'Ivan', "age": 30}

// ВЕРНО:
{"name": "Ivan", "age": 30}

2. «Висячая» запятая

В JSON нельзя оставлять запятую после последнего элемента в объекте или массиве.

// НЕВЕРНО:
{"name": "Ivan", "age": 30,}

// ВЕРНО:
{"name": "Ivan", "age": 30}

3. Неэкранированные специальные символы

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

// НЕВЕРНО:
{"message": "Он сказал: \"Привет\""}
// На самом деле тут проблема с экранированием внутри строки.

// ВЕРНО:
{"message": "Он сказал: \"Привет\""}

4. Ответ сервера — не JSON

Частая проблема при работе с API. Сервер может вернуть HTML-страницу с ошибкой (например, 500 Internal Server Error), XML или просто текст вместо ожидаемого JSON. JSON.parse() попытается это «съесть» и подавится.

5. Невидимые символы (BOM, пробелы)

В начале файла может скрываться символ BOM (Byte Order Mark), который невидим в редакторе, но ломает парсинг. Лишние пробелы или переносы строк в неположенном месте — тоже причина.

Практическое руководство: как найти и исправить ошибку

1. Скопируйте вашу JSON-строку. Взгляните на данные, которые вы пытаетесь распарсить.
2. Используйте валидатор. Вставьте строку в онлайн-валидатор JSON (например, jsonlint.com) или используйте встроенные инструменты разработчика в браузере (Console -> введите JSON.parse(yourString)). Валидатор часто указывает на строку и символ, где произошла ошибка.
3. Проверьте ответ сервера. В Network-вкладке инструментов разработчика посмотрите на raw-ответ от сервера. Убедитесь, что заголовок Content-Type равен application/json, а в теле — валидный JSON.
4. Логируйте и анализируйте. Перед вызовом JSON.parse() выведите строку в консоль. Посмотрите на её начало и конец. Нет ли там лишних символов?
5. Обработайте исключение. Всегда оборачивайте вызов JSON.parse() в блок try...catch. Это предотвратит падение всего приложения и даст вам возможность обработать ошибку.

FAQ: Часто задаваемые вопросы об ошибке Unexpected Token

Валидатор говорит, что JSON правильный, но ошибка остаётся. Почему?

Скорее всего, вы передаёте в JSON.parse() уже распарсенный объект JavaScript, а не строку. Убедитесь, что вы не делаете двойной парсинг. Также проверьте, нет ли невидимых символов в начале строки (BOM).

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

1. Проверьте URL и параметры запроса. 2. Убедитесь, что сервер действительно возвращает JSON (смотрите вкладку Network). 3. Проверьте статус ответа (не 404 или 500). 4. Обработайте ошибку в catch и выведите тело ответа, чтобы понять, что пришло вместо JSON.

Как избежать этой ошибки в будущем?

• Всегда валидируйте JSON, приходящий из внешних источников.
• Используйте линтеры и форматтеры кода (Prettier, ESLint) в своём проекте.
• При ручном формировании JSON используйте JSON.stringify() — это гарантирует корректный синтаксис.
• Читайте документацию API: некоторые сервисы могут возвращать JSONP или данные в другом формате.

Ошибка JSON.parse: unexpected token — это не тупик, а указатель. Она заставляет вас внимательнее посмотреть на данные, с которыми вы работаете. Освоив методы её диагностики и исправления, вы не только сэкономите часы отладки, но и глубже поймёте, как устроен обмен данными в современном вебе.