JavaScript AST истражувач

Q: Која е разликата меѓу модул и скрипта?

Модулите се секогаш во строг режим, дозволуваат import , export и await на највисоко ниво, а забрануваат with и октални литерали. Скриптите се класичниот режим на <script . Изборот се запишува и во својството sourceType на јазолот Program .

Залепете JavaScript и истражете го неговото апстрактно синтаксно дрво (ESTree, Acorn) во прелистувачот. Кликнете на јазли и извезете го AST како JSON.

JavaScript код

Модул (import/export, строг режим) Скрипта (класична)

Јазли: –
Максимална длабочина: –
Наредби од највисоко ниво: –

Синтаксно дрво

Кликнете на јазол за да го означите неговиот код. Кликнете или поместете го курсорот во кодот за да го најдете неговиот јазол.

Избран јазол

Изберете јазол во дрвото или кликнете во кодот.

ESTree JSON

Вклучи позиции (start, end, loc)

Како да истражите JavaScript AST

Залепете го вашиот код во полето JavaScript код или кликнете Вчитај пример за да започнете со мал модул.
Изберете Тип на изворен код: Модул (import/export, строг режим) за ES модули или Скрипта (класична) за обични скрипти што може да користат функции од нестрогиот режим, како with.
Дрвото се освежува кратко откако ќе престанете да пишувате. Кликнете Анализирај за веднаш да го извршите анализирањето.
Во Синтаксно дрво кликнете на малата стрелка за да го проширите или соберете јазолот. Кликнете на името на јазолот за да го означите соодветниот код во уредникот. Панелот Избран јазол го прикажува неговиот тип, својството на кое му припаѓа, опсегот на знаци, редот и колоната, едноставните својства (име, оператор, сурова вредност…) и изворниот текст.
Работи и во обратна насока: кликнете каде било во кодот, поместете го курсорот со тастатурата или означете дел од кодот, и најдлабокиот јазол што го содржи ќе биде проширен и истакнат во дрвото.
Отворете ESTree JSON за да го видите целото дрво како JSON, со или без Вклучи позиции (start, end, loc), а потоа кликнете Копирај или Преземи JSON.

Бројачите ги прикажуваат бројот на Јазли, Максимална длабочина на дрвото и бројот на Наредби од највисоко ниво.

Што е апстрактно синтаксно дрво?

Пред JavaScript-моторот, линтерот или пакувачот да направат нешто со вашиот код, тие го претвораат текстот во дрво од јазли. Секој јазол има type (VariableDeclaration, CallExpression, Identifier…) и подредени јазли зачувани во именувани својства. За total += size; се добива ExpressionStatement чиј expression е AssignmentExpression со оператор +=, лев идентификатор total и десен идентификатор size. Заградите, точките-запирки и коментарите исчезнуваат: дрвото ја задржува само структурата што е важна, па затоа се нарекува апстрактно.

Оваа алатка користи Acorn, мал и брз парсер што стои зад многу JavaScript алатки, со ecmaVersion: "latest". Резултатот го следи ESTree, заедничкиот формат што го создава и Espree (ESLint) и го разбираат повеќето алатки за трансформација на код. Познавањето на точните типови на јазли е клучно кога пишувате ESLint правило, Babel или jscodeshift codemod, додаток за Prettier или каква било скрипта што го анализира кодот.

Позиции, опсези и извоз во JSON

Секој јазол има start и end, односно поместувања на неговиот прв знак и на знакот по последниот во изворниот код, како и објект loc со редови (од 1) и колони. Во JSON колоните почнуваат од 0, како во излезот на Acorn; панелот Избран јазол ги прикажува од 1, како повеќето уредници. Отштиклирајте Вклучи позиции (start, end, loc) за полесен JSON што полесно се споредува меѓу две верзии на кодот.

Некои вредности не можат да се запишат како JSON: литералите на регуларни изрази добиваат "value": null (својството regex ги чува шаблонот и знамињата), а BigInt литералите се запишуваат како текст, според препораката на спецификацијата ESTree.

Ограничувања и приватност

Кодот се анализира во вашиот прелистувач и никогаш не се извршува ниту се испраќа некаде: парсерот го чита само текстот. Внесот е ограничен на еден милион знаци. Многу големите дрва се прикажуваат на барање, по група деца-јазли, а JSON што е преголем за преглед сепак може да се преземе. JSX и TypeScript не се стандарден JavaScript, па Acorn ги пријавува како синтаксни грешки.

Често поставувани прашања

Зошто добивам „Синтаксна грешка на ред 1, колона 1“?

Кодот не е валиден JavaScript за избраниот тип на изворен код. Пораката ги дава редот, колоната и објаснувањето на Acorn. Честа причина е import или export со избрана Скрипта (класична), или TypeScript анотации и JSX, што Acorn не ги анализира.

Која е разликата меѓу модул и скрипта?

Модулите се секогаш во строг режим, дозволуваат import, export и await на највисоко ниво, а забрануваат with и октални литерали. Скриптите се класичниот режим на <script>. Изборот се запишува и во својството sourceType на јазолот Program.

Дали кодот се извршува?

Не. Анализирањето само го претвора текстот во податочна структура. Ништо не се оценува, ниту една функција не се повикува и не се праќа мрежно барање, па е безбедно да се прегледува недоверлив, па дури и злонамерен код.

Дали коментарите се прикажуваат во дрвото?

Не. ESTree не ги закачува коментарите на јазлите, па тие не се дел од дрвото, но сепак можете да ги видите во изворниот текст на јазолот во панелот Избран јазол.

Која верзија на JavaScript е поддржана?

Acorn е поставен на најновата верзија на ECMAScript што ја познава, што вклучува опционално синџирење, nullish coalescing, BigInt, полиња на класи и приватни методи, await на највисоко ниво, знамиња на регуларни изрази како v и друга нова синтакса.