Друзья, всем привет! В данной статье рассказываю про новый стандарт языка программирования JavaScript - 2020/ES11. Появилось много интересных функций и новых возможностей для комфортного создания веб-приложений. Готовы? Тогда поехали =)
1. import media
Это объект который указывает мета данные JS модуля в зависимости от контекста. Содержит информацию о модуле.
Создадим модуль файла main.js
<script type="module" src="main.js"></script>
Далее в консоль выведем команду: console.log(import.meta) и запустим live сервер. В консоли мы получим объект с мета информацией о данном модуле, его адресом. Вариантов может быть много, это может быть адрес подгрузи модуля, а также каких-либо инлайновых скриптов.
Чтобы увидеть это, необходимо загружать ваш файл именно с live сервера.
2. BigInt
Появление нового типа данных - BigInt. Это одно из самых ожидаемых нововведений в JavaScript. Он позволяет получить разработчикам большее целочисленное представление в JS коде для обработки данных.
Для того, чтобы создать BigInt число, нам нужно просто добавить ч числу букву - n. К примеру: const bn = 3000n Выведем это в консоль и получим 3000n
Стоит отметить, что BigInt нельзя использовать с другими типами данных на прямую. Если мы выведем в консоль console.log(5 + bn) то получим ошибку. Чтобы ошибки не было, необходимо привести тип данных Number к BigInt. Это можно сделать путем оборачивания числа в круглые скобки, вот так: BigInt(7) или если число присвоено переменной const numberSeven = 7, то так BigInt(numberSeven)
3. Добавление в прототип объекта String нового метода matchAll
Предназначен для работы с регулярными выражениями. Он возвращает все подходящие группы в строке. Приведу пример. Создадим переменную testGexp и str, присвоим им значения. const testGexp = /[a - c]/g; const str = 'test-string'; создадим переменную iterator и присвоим ей ранее созданную переменную со строкой str, вызовем у нее метод mathAll т е const iterator = str.mathAll() далее в круглые скобки поместим testGexp, получается const iterator = str.mathAll(testGexp) далее с помощью выведем все в консоль Array.from(iterator, result => console.log(result)) так мы сможем увидеть все совпадения регулярных выражений включая группы. Получим массив данных с вхождениями.
4. Экспорт модуля
Тут все очень просто =) Теперь чтобы экспортировать какой-либо файл в корневой, или соседний JS приложения, нужно прописать команду import {form} form - как пример
5. Оператор опциональной последовательности
Позволяет получить доступ к глубоко вложенным свойствам объекта не думая о том, существует свойство или нет.
Приведу пример. Есть у нас объект с методом:
При вызове данного объекта в консоль у нас будет 18 и undefined
За счет знака вопроса поставленного перед точкой, мы не получили ошибку
6. Динамический импорт
Пишем такую запись и все import(./common.js)
7. Свойство globalThis
Благодаря этому свойству появилась возможность стандартного доступа к глобальному объекту window, вне зависимости от среды разработки. globalThis гарантировано будет работать как в среде разработки где есть глобальный объект window, так и где его нет.
Заключение
Мы ознакомились с основными нововведениями языка JavaScript 2020. Пользуйтесь ими, активно применяйте на практике, оптимизируйте ваши веб-приложения применяя новый стандарт.
Спасибо за внимание =) Обязательно подписывайся на канал, оставляй комментарии, задавай вопросы. С удовольствием на них отвечу =)
