Utilia
Kategori ▾
Bahasa: id ▾

JavaScript AST Explorer

Tempel JavaScript dan jelajahi abstract syntax tree-nya (ESTree, di-parse oleh Acorn) di browser. Klik node untuk melihat kodenya dan ekspor AST sebagai JSON.

Jenis sumber
Node
–
Kedalaman maksimum
–
Pernyataan tingkat atas
–
Pohon sintaksis

Klik node untuk memilih kodenya. Klik atau gerakkan kursor di kode untuk menemukan node-nya.

    Node terpilih

    Pilih node di pohon atau klik di kode.

    JSON ESTree

    Cara menjelajahi AST JavaScript

    1. Tempel kode Anda ke Kode JavaScript, atau klik Muat contoh untuk memulai dari sebuah modul kecil.
    2. Pilih Jenis sumber: Module (import/export, strict mode) untuk modul ES, atau Script (klasik) untuk skrip biasa yang mungkin memakai fitur sloppy mode seperti with.
    3. Pohon diperbarui sesaat setelah Anda berhenti mengetik. Klik Parse untuk menjalankannya seketika.
    4. Di Pohon sintaksis, klik panah kecil untuk membuka atau menciutkan node. Klik nama node untuk memilih kode yang sesuai di editor; panel Node terpilih menampilkan tipenya, properti tempat node itu berada, rentang karakternya, baris dan kolomnya, properti sederhananya (nama, operator, nilai mentah…) serta teks sumbernya.
    5. Cara sebaliknya juga bisa: klik di mana saja dalam kode, gerakkan kursor dengan keyboard, atau pilih sepotong kode, maka node terdalam yang memuatnya akan dibuka dan disorot di pohon.
    6. Buka JSON ESTree untuk melihat seluruh pohon sebagai JSON, dengan atau tanpa Sertakan posisi (start, end, loc), lalu Salin atau Unduh JSON.

    Penghitung menampilkan jumlah Node, Kedalaman maksimum pohon, dan jumlah Pernyataan tingkat atas.

    Apa itu abstract syntax tree?

    Sebelum mesin JavaScript, linter, atau bundler bisa melakukan apa pun pada kode Anda, teks kode itu di-parse menjadi pohon node. Setiap node punya type (VariableDeclaration, CallExpression, Identifier…) dan node anak yang disimpan dalam properti bernama. Untuk total += size; Anda mendapatkan ExpressionStatement yang expression-nya adalah AssignmentExpression dengan operator +=, identifier left bernama total, dan identifier right bernama size. Tanda kurung, titik koma, dan komentar hilang: pohon hanya menyimpan struktur yang penting, itulah sebabnya disebut abstrak.

    Alat ini memakai Acorn, parser kecil dan cepat yang menjadi dasar banyak alat JavaScript, dengan ecmaVersion: "latest". Hasilnya mengikuti ESTree, format bersama yang juga dihasilkan oleh Espree (ESLint) dan dipahami oleh sebagian besar alat transformasi kode. Mengetahui tipe node yang tepat sangat penting saat Anda menulis aturan ESLint, codemod Babel atau jscodeshift, plugin Prettier, atau skrip apa pun yang menganalisis kode.

    Posisi, rentang, dan ekspor JSON

    Setiap node membawa start dan end, yaitu offset karakter pertamanya dan offset satu karakter setelah karakter terakhirnya di sumber, serta objek loc berisi baris (mulai dari 1) dan kolom. Di JSON, kolom dimulai dari 0 seperti pada keluaran Acorn; panel Node terpilih menampilkannya mulai dari 1, seperti kebanyakan editor. Hapus centang Sertakan posisi (start, end, loc) untuk mendapatkan JSON yang lebih ringan dan lebih mudah dibandingkan antara dua versi kode.

    Beberapa nilai tidak bisa ditulis sebagai JSON: literal regular expression mendapat "value": null (properti regex-nya tetap menyimpan pola dan flag) dan literal BigInt ditulis sebagai string, sesuai rekomendasi spesifikasi ESTree.

    Batasan dan privasi

    Kode di-parse di browser Anda dan tidak pernah dijalankan atau dikirim ke mana pun: parser hanya membaca teksnya. Masukan dibatasi satu juta karakter. Pohon yang sangat besar ditampilkan sesuai kebutuhan, sekelompok node anak setiap kali, dan JSON yang terlalu besar untuk dipratinjau tetap bisa diunduh. JSX dan TypeScript bukan JavaScript standar, sehingga Acorn melaporkannya sebagai kesalahan sintaksis.

    Pertanyaan yang sering diajukan

    Mengapa muncul “Kesalahan sintaksis di baris 1, kolom 1”?

    Kode tersebut bukan JavaScript yang valid untuk jenis sumber yang dipilih. Pesannya menyebutkan baris, kolom, dan penjelasan dari Acorn. Penyebab umum adalah import atau export saat Script (klasik) dipilih, atau anotasi TypeScript dan JSX, yang tidak di-parse oleh Acorn.

    Apa bedanya Module dan Script?

    Modul selalu berjalan dalam strict mode, mengizinkan import, export, dan await tingkat atas, serta melarang with atau literal oktal. Script adalah mode <script> klasik. Pohon juga mencatat pilihan ini di properti sourceType pada node Program.

    Apakah kodenya dijalankan?

    Tidak. Parsing hanya mengubah teks menjadi struktur data. Tidak ada yang dievaluasi, tidak ada fungsi yang dipanggil, dan tidak ada permintaan jaringan, sehingga aman untuk memeriksa kode yang tidak tepercaya, bahkan kode berbahaya.

    Apakah komentar ditampilkan di pohon?

    Tidak. ESTree tidak menempelkan komentar ke node, jadi komentar bukan bagian dari pohon, tetapi Anda tetap bisa melihatnya di teks sumber node pada panel Node terpilih.

    Versi JavaScript mana yang didukung?

    Acorn diatur ke versi ECMAScript terbaru yang dikenalnya, termasuk optional chaining, nullish coalescing, BigInt, class field dan private method, await tingkat atas, flag regular expression seperti v, serta sintaks baru lainnya.

    Alat terkait