Utilia
Mga kategorya ▾
Wika: fil ▾

JavaScript AST Explorer

I-paste ang JavaScript at tuklasin ang abstract syntax tree nito (ESTree, Acorn) sa iyong browser. I-click ang mga node at i-export ang AST bilang JSON.

Uri ng source
Mga node
–
Pinakamalalim na antas
–
Mga top-level statement
–
Syntax tree

I-click ang isang node para piliin ang code nito. I-click o igalaw ang cursor sa code para mahanap ang node nito.

    Napiling node

    Pumili ng node sa tree o mag-click sa code.

    ESTree JSON

    Paano mag-explore ng JavaScript AST

    1. I-paste ang iyong code sa JavaScript code, o i-click ang Ilagay ang halimbawa para magsimula sa isang maliit na module.
    2. Piliin ang Uri ng source: Module (import/export, strict mode) para sa mga ES module, o Script (classic) para sa mga karaniwang script na maaaring gumamit ng sloppy-mode na feature gaya ng with.
    3. Nag-a-update ang tree ilang sandali matapos kang huminto sa pag-type. I-click ang I-parse para patakbuhin ito agad.
    4. Sa Syntax tree, i-click ang maliit na arrow para i-expand o i-collapse ang isang node. I-click ang pangalan ng node para piliin ang katugmang code sa editor. Ipinapakita ng panel na Napiling node ang uri nito, ang property kung saan ito kabilang, ang saklaw ng character, ang linya at column, ang mga simpleng property (pangalan, operator, raw value…) at ang source text nito.
    5. Gumagana rin ito pabalik: mag-click kahit saan sa code, igalaw ang cursor gamit ang keyboard o pumili ng bahagi ng code, at ang pinakamalalim na node na naglalaman nito ay ie-expand at iha-highlight sa tree.
    6. Buksan ang ESTree JSON para makita ang buong tree bilang JSON, mayroon man o walang Isama ang mga posisyon (start, end, loc), saka ito Kopyahin o I-download ang JSON.

    Ipinapakita ng mga counter ang bilang ng Mga node, ang Pinakamalalim na antas ng tree at ang bilang ng Mga top-level statement.

    Ano ang abstract syntax tree?

    Bago makagawa ng anuman ang isang JavaScript engine, linter o bundler sa iyong code, ipapa-parse muna nito ang text bilang isang tree ng mga node. Bawat node ay may type (VariableDeclaration, CallExpression, Identifier…) at mga child node na nakalagay sa mga may pangalang property. Para sa total += size;, makakakuha ka ng isang ExpressionStatement na ang expression ay isang AssignmentExpression na may operator na +=, isang left identifier na total at isang right identifier na size. Nawawala ang mga panaklong, semicolon at komento: pinananatili lang ng tree ang istrukturang mahalaga, kaya tinatawag itong abstract.

    Gumagamit ang tool na ito ng Acorn, ang maliit at mabilis na parser sa likod ng maraming JavaScript tool, na may ecmaVersion: "latest". Sumusunod ang output sa ESTree, ang karaniwang format na ginagawa rin ng Espree (ESLint) at naiintindihan ng karamihan sa mga tool na nagta-transform ng code. Mahalagang alam mo ang eksaktong mga uri ng node kapag gumagawa ka ng ESLint rule, Babel o jscodeshift codemod, Prettier plugin o anumang script na nag-a-analyze ng code.

    Mga posisyon, saklaw at JSON export

    Bawat node ay may start at end, ang mga offset ng una at ng huling character (dagdag isa) sa source, at isang loc object na may mga linya (simula sa 1) at mga column. Sa JSON, nagsisimula sa 0 ang mga column gaya ng output ng Acorn. Ipinapakita naman ng panel na Napiling node ang mga ito mula 1, tulad ng karamihan sa mga editor. Alisin ang check sa Isama ang mga posisyon (start, end, loc) para makakuha ng mas magaan na JSON na mas madaling ikumpara sa pagitan ng dalawang bersyon ng code.

    May ilang value na hindi maisusulat bilang JSON: ang mga regular expression literal ay nagiging "value": null (nananatili sa property na regex ang pattern at mga flag nito), at ang mga BigInt literal ay isinusulat bilang string, ayon sa rekomendasyon ng ESTree specification.

    Mga limitasyon at privacy

    Pina-parse ang code sa iyong browser at hindi kailanman pinapatakbo o ipinapadala kahit saan: binabasa lang ng parser ang text. Hanggang isang milyong character ang input. Ang napakalalaking tree ay ini-render kapag kailangan, isang batch ng mga child bawat beses, at ang JSON na masyadong malaki para i-preview ay maaari pa ring i-download. Hindi standard na JavaScript ang JSX at TypeScript, kaya iuulat ng Acorn ang mga ito bilang syntax error.

    Mga madalas itanong

    Bakit lumalabas ang "Syntax error sa linya 1, column 1"?

    Hindi valid na JavaScript ang code para sa napiling uri ng source. Ibinibigay ng mensahe ang linya, ang column at ang paliwanag ng Acorn. Karaniwang sanhi ang import o export habang nakapili ang Script (classic), o mga TypeScript annotation at JSX, na hindi kayang i-parse ng Acorn.

    Ano ang pagkakaiba ng Module at Script?

    Palaging nasa strict mode ang mga module, pinapayagan nila ang import, export at top-level await, at ipinagbabawal ang with o mga octal literal. Ang mga script ay ang klasikong mode ng <script>. Itinatala rin ng tree ang pinili mo sa property na sourceType ng node na Program.

    Pinapatakbo ba ang code?

    Hindi. Ang pag-parse ay ginagawang data structure lang ang text. Walang ine-evaluate, walang tinatawag na function at walang ginagawang network request, kaya ligtas suriin ang code na hindi mo pinagkakatiwalaan o kahit nakakapinsala pa.

    Ipinapakita ba ang mga komento sa tree?

    Hindi. Hindi ikinakabit ng ESTree ang mga komento sa mga node, kaya hindi sila bahagi ng tree, pero makikita mo pa rin ang mga ito sa source text ng node sa panel na Napiling node.

    Aling bersyon ng JavaScript ang sinusuportahan?

    Naka-set ang Acorn sa pinakabagong bersyon ng ECMAScript na alam nito, kasama ang optional chaining, nullish coalescing, BigInt, class field at private method, top-level await, mga flag ng regular expression gaya ng v, at iba pang bagong syntax.

    Mga kaugnay na tool