В этой статье вы узнаете про интересные нововведения в JavaScript, которые ожидают нас в 2021 году. Не все конечно, но тут собраны и описаны самые интересные из них.
\n\n\n\n\n\n\n\nКаждый год в JavaScript добавляется новый функционал. В этом году был зарелизен ES2020 или ES11, теперь мы ожидаем релиза ES2021(ES12), который намечается на середину 2021-го года.
\n\n\n\nНовый функционал, каждый год добавляемый в JS, проходит через четыре стадии рассмотрения. В этой статье мы обсудим тот функционал, который уже находится на 4-й стадии, то есть на последней и который уже был успешно добавлен в Google Chrome V8.
\n\n\n\nФункционал, который мы будем обсуждать в этой статье:
\n\n\n\nString.prototype.replaceAll
Promise.any
Логические операторы и выражения присваивания
\n\n\n\nЧисловые разделители
\n\n\n\nIntl.ListFormat
dateStyle и timeStyle для Intl.DateTimeFormat
В JavaScript метод replace() заменяет только первый совпадающий элемент в строке. Если нам понадобится заменить все совпадения, то мы сможем сделать только только с помощью регулярных выражений.
Предложенный в ES2020 метод replaceAll() отдаёт новую строку, где все подходящие символы будут заменены на другие. Это могут быть строки или регулярные выражения, а заменять можно будет на строку или функцию, которая будет отрабатывать при каждом совпадении.
let str = 'I use linux, I love linux'\nstr = str.replaceAll('linux', 'windows');\n\nconsole.log(str)\n\n/**** Output ****/\n// I use windows, I love windowsВ ES2020 нам представят метод Promise.any(), который резко останавливается и сразу отдаёт значение, как только выполнится первый промис из списка выполняемых промисов. Если выполнение всех промисов закончится неудачей, то будет выдана ошибка.
Этот метод конечно же отличается от Promise.race() тем, что последний останавливается и выдает промис вне зависимости от результата его выполнения.
Пример 1а: Несмотря на то, что неудачно завершившийся промис заканчивает работу раньше, чем успешно завершившийся. Promise.any() отдаст первый из успешно завершившихся.
Promise.any([\n new Promise((resolve, reject) => setTimeout(reject, 200, 'Third')),\n new Promise((resolve, reject) => setTimeout(resolve, 1000, 'Second')),\n new Promise((resolve, reject) => setTimeout(resolve, 2000, 'First')),\n])\n.then(value => console.log(`Result: ${value}`))\n.catch (err => console.log(err))\n\n/**** Output ****/\n// Result: SecondПример 1б: Когда все промисы неудачно завершаются, то выдает AggregatorError.
\n\n\n\nPromise.any([\n Promise.reject('Error 1'),\n Promise.reject('Error 2'),\n Promise.reject('Error 3')\n])\n.then(value => console.log(`Result: ${value}`))\n.catch (err => console.log(err))\n\n/**** Output ****/\n// AggregateError: All promises were rejected\nВ JavaScript существует много выражений присваивания и логических операторов, например как тут:
\n\n\n\n// Выражение присвивания\nlet num = 5\nnum+=10\nconsole.log(num) // 15\n\n// Логический оператор\nlet num1 = 6\nlet num2 = 3\nconsole.log(num1 === 6 && num2 === 2) // false\nconsole.log(num1 === 6 || num2 === 2) // trueС помощью нового функционала мы сможем комбинировать логические операторы и выражения присваивания. Ниже вы увидите несколько примеров с &&, || и ??:
Тут мы выставляем значение левосторонней переменной только в том случае, если правая имеет значение true.
let num1 = 5\nlet num2 = 10\n\nnum1 &&= num2\n\nconsole.log(num1) // 10\n\n// можно записать как\n// 1. num1 && (num1 = num2)\n// 2. if (num1) num1 = num2Тут мы выставляем значение num1 на левую переменную только в том случае, если последняя будет false.
let num1\nlet num2 = 10\n\nnum1 ||= num2\n\nconsole.log(num1) // 10\n\n// можно записать как\n// 1. num1 || (num1 = num2)\n// 2. if (!num1) num1 = num2В ES2020 был представлен Nullish Coalescing оператор, который можно совмещать с оператором назначения. Он назначает правую переменную левой переменной только в случае, если последняя имеет значение undefined или null.
let num1\nlet num2 = 10\n\nnum1 ??= num2\nconsole.log(num1) // 10\n\nnum1 = false\nnum1 ??= num2\nconsole.log(num1) // false\n\n// можно записать как\n// num1 ?? (num1 = num2)С приходом числовых разделителей станет куда проще читать и воспринимать числовые значения, применяя _(нижнее подчеркивание), раздавая разделители группам цифр. Для примера:
let number = 100_000 \n\nconsole.log(number)\n\n/**** Output ****/\n// 100000Этот объект принимает два параметра, каждый из которых является опциональным. Первый это заданный язык(локаль), а второй это объект с параметрами у которых есть два свойства — стиль и тип.
\n\n\n\nnew Intl.ListFormat([locales[, options]])
В Intl.ListFormat есть метод под названием format(), который получает массив как аргумент и форматирует его разными способами в зависимости от языка.
Ниже есть несколько примеров в которых показаны различные комбинации для локалей.
\n\n\n\nconst arr = ['Pen', 'Pencil', 'Paper']\n\nlet obj = new Intl.ListFormat('en', { style: 'short', type: 'conjunction' })\nconsole.log(obj.format(arr)) \n\n/**** Output ****/\n// Pen, Pencil, & Paper\n\n\nobj = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })\nconsole.log(obj.format(arr)) \n\n/**** Output ****/\n// Pen, Pencil, and Paper\n\n\nobj = new Intl.ListFormat('en', { style: 'narrow', type: 'conjunction' })\nconsole.log(obj.format(arr)) \n\n/**** Output ****/\n// Pen, Pencil, Paper\n\n\n// Итальянский\nobj = new Intl.ListFormat('it', { style: 'short', type: 'conjunction' })\nconsole.log(obj.format(arr)) \n\n/**** Output ****/\n// Pen, Pencil e Paper\n\n\n// Немецкий\nobj = new Intl.ListFormat('de', { style: 'long', type: 'conjunction' })\nconsole.log(obj.format(arr)) \n\n/**** Output ****/\n// Pen, Pencil und PaperIntl.DateTimeFormat это объект конструктор для объектов, которые включают в себя формат даты и отображения времени зависимые от используемого языка. dateStyle и timeStyle опции могут быть использованы для запроса специфического отображения даты или времени в заданной длине.
// Только время в коротком формате\nlet o = new Intl.DateTimeFormat('en' , { timeStyle: 'short' })\nconsole.log(o.format(Date.now()))\n// 11:27 PM\n\n\n// Только время в обычном формате\no = new Intl.DateTimeFormat('en' , { timeStyle: 'medium'})\nconsole.log(o.format(Date.now()))\n// 11:27:57 PM\n\n\n// Время в расширенном формате\no = new Intl.DateTimeFormat('en' , { timeStyle: 'long' })\nconsole.log(o.format(Date.now()))\n// 11:27:57 PM GMT+11\n\n\n// Только дата в сокращенном формате\no = new Intl.DateTimeFormat('en' , { dateStyle: 'short'})\nconsole.log(o.format(Date.now()))\n// 10/6/20\n\n\n// Только дата в обычном формате\no = new Intl.DateTimeFormat('en' , { dateStyle: 'medium'})\nconsole.log(o.format(Date.now()))\n// Oct 6, 2020\n\n\n// Только дата в расширенном формате\no = new Intl.DateTimeFormat('en' , { dateStyle: 'long'})\nconsole.log(o.format(Date.now()))\n// October 6, 2020dateStyle и timeStyle используются вместе с разными лингвистическими тегами, как показано на примере ниже:
let abc\n\n// Английский\nabc = new Intl.DateTimeFormat('en' , { timeStyle: 'short', dateStyle: 'long'})\nconsole.log(abc.format(Date.now()))\n// October 6, 2020 at 11:40 PM\n\n\n// Итальянский\nabc = new Intl.DateTimeFormat('it' , { timeStyle: 'short', dateStyle: 'long'})\nconsole.log(abc.format(Date.now()))\n// 6 ottobre 2020 23:40\n\n\n// Немецкий\nabc = new Intl.DateTimeFormat('de' , { timeStyle: 'short', dateStyle: 'long'})\nconsole.log(abc.format(Date.now()))\n// 6. Oktober 2020 um 23:40В этой статье вы узнаете про интересные нововведения в JavaScript, которые ожидают нас в 2021 году. Не все конечно, но в этой тут собраны и описаны самые интересные из них.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/10/DglYtvO7Bn0-2.jpg"},"interesting":[{"title":"Интересные нововведения в JavaScript ES2021","slug":"interesnie-novovvedeniya-v-javascript-es2021","type":"js"}]}},"staticQueryHashes":["3576131997","63159454"]}