ES6, ES8, ES20201: что такое ECMAScript и чем он отличается от JavaScript

Если вы тоже путаете или вообще не понимаете, чем ECMAScript отличается от JavaScript и что это такое, то это статья для вас. С небольшим углублением в историю и на конкретных примерах мы разберем, где здесь стандарт, где спецификация, а где — реализация.

Содержание:
1. История ECMAScript
2. ECMAScript и совместимость с браузерами
3. Что такое ES
4. Что в итоге

1. История ECMAScript

Чтобы понять, что такое ECMAScript и чем он отличается от JavaScript, нужно немного углубиться в терминологию. Начнем издалека — это важно, потому что иначе разобраться будет еще сложнее.

Есть такая организация — Ecma International. Она создает стандарты для разных технологий. Самый простой пример стандарта — клавиатура QWERTY. Дизайн может быть любым, но расположение клавиш обычно QWERTY.

Ecma International разработала ECMA-262. Это стандарт скриптового языка.

В стандарте ECMA-262 описана спецификация скриптового языка общего назначения. Эта спецификация называется ECMAScript.

В спецификации ECMAScript содержатся рекомендации, сведения и правила, которые должны соблюдаться, чтобы скриптовый язык считался совместимым с ECMAScript.

И, наконец, JavaScript — это скриптовый язык, который соответствует спецификации ECMAScript. Можно даже говорить, что это диалект. Большую часть лексики и синтаксиса JS взял из ECMAScript. Он отличается от своего «родителя», при этом правила и рекомендации спецификации соблюдаются. По крайней мере, в стандарте ECMA-262 сказано, что JS в основном реализует спецификацию ECMAScript, но с некоторыми отличиями.

• Спецификация ECMAScript расскажет вам, как создать свой скриптовый язык.
• Документация JavaScript объяснит, как пользоваться скриптовым языком.
Курс-професія "Motion Designer" від Skvot.
Навчіться створювати 2D- та 3D-анімації у софтах After Effects, Cinema 4D та Octane Render. Протягом курсу ви створите 14 моушн-роликів, 2 з яких — для реального клієнта.
Детальніше про курс

Забавный факт: JavaScript появился в 1996 году. Но стандартизировать его предложили только в 1997 году. Так появился ECMAScript. Но фактически ECMAScript сейчас — это основа JavaScript, который является лишь одной из реализаций, пусть и самой популярной.

2. ECMAScript и совместимость с браузерами

Еще один неочевидный момент. В браузерах за распознавание JS-кода отвечают JavaScript-движки — например, V8 в Chrome, SpiderMonkey в Firefox. При этом, описывая поддержку браузера, обычно говорят о совместимости с ECMAScript. Выглядит запутано, но на самом деле объяснение логичное.

ECMAScript — спецификация, которая описывает, каким может быть скриптовый язык. Но появление новой версии спецификации не добавляет автоматически все новые функции в языки, сделанные на основе этой спецификации. Это относится и к JS-движкам. Все зависит от их разработчиков.

Например, новая спецификация позволяет использовать метод Array.prototype.includes для проверки того, содержится ли аргумент в массиве. Но условные разработчики SpiderMonkey не торопятся добавлять такую возможность в свой движок. Поэтому в браузере такая возможность какое-то время не поддерживается.

Отсутствовать могут даже вещи, которые добавлены в спецификацию давно. Например, тот же метод Array.prototype.includes появился еще в 2016 году. Но в Internet Explorer и Opera Mini поддержки нет и не будет.

Скриншот с сайта CaniUse

Поэтому в отношении браузеров уточняют, какую версию спецификации ECMAScript они поддерживают. На сайте CanIUSe в примечаниях указано, что под полной поддержкой подразумевается доступность не менее 95% спецификации. Частичная поддержка — это когда можно использовать не менее 10% спецификации.

Когда появляется новая версия спецификации ECMAScript, новые возможности в JS-движки добавляются постепенно (или не добавляются вообще).

3. Что такое ES

Разобрались с отличиями ECMAScript от JavaScript. Осталось раскрыть последнюю тайну — что значит аббревиатура ES с разными цифрами. И здесь тоже все максимально просто — это лишь указание на очередную редакцию стандарта.

История версий ES

Ecma International постоянно обновляет стандарт ECMA-262, в котором описана спецификация ECMAScript. Версия ES1 была выпущена в 1997 году, ES2 — в 1998 году, ES3 — в 1999 году, а ES4 так и не приняли. Первые три версии ECMAScript давно устарели. В 2009 году появилась ES5. В ней, например, появились:

• поддержка strict mode;
• getters и setters;
• поддержка JSON;
• многострочные строковые литералы и многое другое.

ES5 — это последняя версия спецификации ECMAScript, которую полностью поддерживают все браузеры. Да, и даже Internet Explorer.

Но в 2015 году выпустили ES6. Тогда с браузерной совместимостью возникли проблемы. Для их исправления разработали Babel — это инструмент, который преобразует код ES6 в ES5. Так фронтендеры решили вопрос с поддержкой старых браузеров.

ES6 — тоже знаковое обновление. В нем, например, были добавлены стрелочные функции, появились промисы, let и const, которые стали альтернативой var для объявления переменных, заработали функции-генераторы, которые используют yield для создания последовательности элементов.

Вы также можете встретить утверждение, что Babel преобразует код ES2015 в ES5. И здесь тоже все верно. ES2015 == ES6. Просто в 2015 году компания Ecma International стала называть версию спецификации в соответствии с годом выпуска. И перешла на ежегодные обновления. Соответственно, ES2017 == ES8, ES2021 == ES12.

Примеры изменений

Последняя версия спецификации — ES2021. Ее выпустили в июне 2021 года. Например, в ней наконец-то улучшили операторы логического присваивания. В трех операторах (&& =, || = и ?? =) объединены логическое сравнение и присваивание. Раньше нужно было писать имя переменной дважды:

// ES2020 x && (x = y), x || (х = у), х = х ?? y

В новой версии достаточно указать имя переменной один раз:

// ES2021 x && = y; х || = у; х ?? = у;

Благодаря этому снижается повторяемость кода. По сути, у логических операторов теперь такая же интеграция присваивания, как у математических операторов — +=, -=, *=.

Еще одно усовершенствование — добавление метода String.prototype.replaceAll(). Он значительно упростил замену всех вхождений строки другим строковым значением. Раньше для этого приходилось использовать регулярные выражения.

Например:

const str = "Highload High High";
const newStr = str.replace("High", "Hi");
console.log(newStr); // "Hiload High High"

Метод replace находит и заменяет только первое вхождение. Второе и последующие значения уже не учитываются. Это можно исправить, если в качестве шаблона для замены давать не строку, а регулярное выражение:

const str = "Highload High High";
const newStr = str.replace(/High/, "Hi");
console.log(newStr); // "Hiload Hi Hi"

Метод String.prototype.replaceAll() пытается заменить все вхождения, даже если в качестве шаблона подается строка:

const str = "Highload High High";
const newStr = str.replaceAll("High", "Hi");
console.log(newStr); // "Hiload Hi Hi"

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

4. Что в итоге

1. ECMAScript — это спецификация, которая рассказывает, как создать скриптовый язык.
2. JavaScript — это скриптовый язык, который в основном соблюдает правила спецификации ECMAScript. Не без исключений, но глобально его можно считать самым популярным диалектом ECMAScript.
3. ES — это просто сокращенное указание очередной врсии ECMAScript. С 2015 года они выходят каждый год.

Если хотите узнать про JS-мир еще больше, посмотрите это насыщенное ценными деталями интервью с Senior JavaScript Developer: