Baiki ralat "Unexpected token" dalam JSON.parse: panduan lengkap setiap punca

SyntaxError: Unexpected token X in JSON at position N adalah salah satu ralat paling biasa dalam JavaScript, dan salah satu yang paling kurang membantu — ia memberitahu anda di mana penghurai (parser) berhenti, bukan sebabnya. Ini cara sebenar untuk membaikinya.

Langkah 1: baca nombor kedudukan (position)

JSON.parse mengira aksara dari permulaan rentetan, bermula dari 0. Jika JSON anda datang daripada pemboleh ubah, log dahulu petikan tepat di sekitar kedudukan itu sebelum buat apa-apa lagi:

try {
  JSON.parse(raw);
} catch (e) {
  const match = e.message.match(/position (\d+)/);
  if (match) {
    const pos = Number(match[1]);
    console.log(raw.slice(Math.max(0, pos - 20), pos + 20));
  }
}

Satu potongan kod ini menyelesaikan lebih banyak ralat ini berbanding apa-apa nasihat tentang sintaks JSON, kerana kebanyakan ralat “unexpected token” sebenarnya adalah ralat “saya tidak tahu apa yang sebenarnya ada dalam rentetan saya” — ruang kosong berlebihan daripada salin-tampal, baris baharu tambahan daripada template literal, atau byte-order-mark (BOM) di permulaan sekali (kedudukan 0, token , yang tidak kelihatan dalam kebanyakan editor).

7 punca, disusun mengikut kekerapan sebenar berlaku

Koma berlebihan (trailing comma). {"a": 1, "b": 2,} — sah dalam literal objek JS, tidak sah dalam JSON. Koma sebelum } atau ] adalah punca paling biasa.
Petikan tunggal menggantikan petikan berganda. {'a': 1} adalah JS, bukan JSON. JSON memerlukan petikan berganda di sekeliling kedua-dua kunci dan nilai rentetan, tanpa pengecualian.
Kunci tanpa petikan. {a: 1} — sekali lagi, sah dalam JS, tidak sah dalam JSON. Setiap kunci perlukan petikan.
Nilai JS yang bukan JSON yang sah. undefined, NaN, fungsi, atau komen (// seperti ini) — semua ini tidak wujud dalam spesifikasi JSON, hanya dalam JavaScript.
Pengekodan dua kali (double-encoding). Anda memanggil JSON.stringify() dua kali, atau anda menghuraikan rentetan yang sebenarnya sudah menjadi objek — semak dengan typeof raw === 'string' sebelum memanggil .parse().
Rentetan kosong atau respons undefined. Jika fetch gagal secara senyap atau mengembalikan badan kosong, JSON.parse("") melontar Unexpected end of JSON input, ralat berbeza tetapi berkaitan — semak response.ok dan log badan mentah sebelum menghurai.
BOM atau aksara tidak kelihatan daripada salin-tampal. Menampal JSON daripada PDF, dokumen Word, atau sesetengah output terminal boleh membawa BOM atau ruang tidak putus (non-breaking space) yang kelihatan sama seperti aksara biasa.

Cara paling pantas: sahkan sebelum anda menyahpepijat

Membaca mesej ralat mentah aksara demi aksara adalah perlahan. Tampal rentetan tepat ke dalam pemformat yang menyerlahkan aksara tidak sah secara terus berbanding meneka daripada nombor kedudukan — ia mengubah “di suatu tempat berhampiran aksara 812” menjadi “kurungan hilang yang khusus ini, di sini.” (Pautan di bawah.)

Apabila JSON sememangnya sah tetapi masih gagal

Jika pemformat mengesahkan JSON anda betul dari segi sintaks tetapi JSON.parse masih melontar ralat, rentetan yang anda hantar bukanlah rentetan yang anda sangkakan. Sebab paling biasa: anda memanggil .parse() pada objek Response, bukan badannya yang telah diselesaikan.

// Salah — menghurai "[object Response]", bukan badannya
const data = JSON.parse(await fetch(url));

// Betul
const data = await (await fetch(url)).json();
// atau, jika anda perlukan teks mentah dahulu:
const text = await (await fetch(url)).text();
const data = JSON.parse(text);

Rujukan pantas

Simptom	Kemungkinan punca
`Unexpected token }`	Koma berlebihan sebelum kurungan penutup
`Unexpected token '`	Petikan tunggal digunakan dan bukannya petikan berganda
`Unexpected token a` (atau mana-mana huruf)	Kunci objek tanpa petikan
`Unexpected end of JSON input`	Rentetan kosong, respons terpotong, atau kurungan tidak ditutup
`Unexpected token` (kedudukan 0)	Byte-order-mark daripada fail yang disalin-tampal atau disimpan di Windows

Tiada satu pun daripada ini memerlukan hafalan — pembaikannya sentiasa sama, tiga langkah: log petikan di sekeliling kedudukan yang dilaporkan, jalankan melalui pemformat, betulkan satu aksara yang ditandakan.