39 записей с тегом "ECMAScript"

JSON.stringify ранее был определен так, что возвращал некорректные строки Unicode, если входные данные содержали одиночные суррогаты:

JSON.stringify('\uD800');
// → '"�"'

Предложение «хорошо сформированного JSON.stringify» изменяет JSON.stringify, чтобы он выводил экранированные последовательности для одиночных суррогатов, делая его вывод валидным Unicode (и представимым в UTF-8):

Модули JavaScript теперь поддерживаются во всех основных браузерах!

Эта статья объясняет, как использовать JS-модули, как их ответственно развертывать, и как команда Chrome работает над их дальнейшим улучшением в будущем.

Что такое JS-модули?​

JS-модули (также известные как «ES-модули» или «модули ECMAScript») — это большая новая функция или, скорее, набор новых функций. Возможно, вы ранее использовали пользовательскую систему модулей JavaScript. Возможно, вы использовали CommonJS, как в Node.js, или, возможно, AMD, или что-то другое. У всех этих систем модулей есть одна общая черта: они позволяют импортировать и экспортировать данные.

BigInts — это новый числовой примитив в JavaScript, который может представлять целые числа произвольной точности. С помощью BigInts можно безопасно хранить и оперировать большими целыми числами даже за пределами допустимой границы для Number. В этой статье рассматриваются возможные случаи использования и объясняется новая функциональность в Chrome 67 путем сравнения BigInts с Numbers в JavaScript.

Конструкция catch в инструкции try ранее требовала связывание:

try {
  doSomethingThatMightThrow();
} catch (exception) {
  //     ^^^^^^^^^
  // Мы должны указать связывание, даже если не используем его!
  handleException();
}

В ES2019 catch теперь может использоваться без связывания. Это полезно, если объект exception не требуется в коде, обрабатывающем исключение.

try {
  doSomethingThatMightThrow();
} catch { // → Без связывания!
  handleException();
}

Поддержка необязательного связывания catch​

ES2019 представляет String.prototype.trimStart() и String.prototype.trimEnd():

const string = '  hello world  ';
string.trimStart();
// → 'hello world  '
string.trimEnd();
// → '  hello world'
string.trim(); // ES5
// → 'hello world'

Эта функциональность ранее была доступна через нестандартные методы trimLeft() и trimRight(), которые остаются алиасами для новых методов для обратной совместимости.

const string = '  hello world  ';
string.trimStart();
// → 'hello world  '
string.trimLeft();
// → 'hello world  '
string.trimEnd();
// → '  hello world'
string.trimRight();
// → '  hello world'
string.trim(); // ES5
// → 'hello world'

Function.prototype.toString() теперь возвращает точно такие же фрагменты текста исходного кода, включая пробелы и комментарии. Вот пример, сравнивающий старое и новое поведение:

Динамический import() представляет новую форму import, похожую на функцию, которая открывает новые возможности по сравнению со статическим import. В этой статье сравниваются оба варианта и представлен обзор новшеств.

Promise.prototype.finally позволяет зарегистрировать обратный вызов, который вызывается при завершении промиса (то есть при выполнении или отклонении).

Представьте, что вы хотите получить данные, чтобы показать их на странице. Ах да, вы хотите показать индикатор загрузки, когда запрос начинается, и скрыть его, когда запрос завершается. Когда что-то идет не так, вы показываете сообщение об ошибке вместо этого.

const fetchAndDisplay = ({ url, element }) => {
  showLoadingSpinner();
  fetch(url)
    .then((response) => response.text())
    .then((text) => {
      element.textContent = text;
      hideLoadingSpinner();
    })
    .catch((error) => {
      element.textContent = error.message;
      hideLoadingSpinner();
    });
};

Прежде чем обсуждать объектные свойства rest и spread, давайте вспомним очень похожую функцию из прошлого.

ES2015: элементы rest и spread для массивов​

Хороший старый ECMAScript 2015 ввел элементы rest для деструктурирующего присваивания массивов и элементы spread для литералов массивов.

// Элементы rest для деструктурирующего присваивания массивов:
const primes = [2, 3, 5, 7, 11];
const [first, second, ...rest] = primes;
console.log(first); // 2
console.log(second); // 3
console.log(rest); // [5, 7, 11]

// Элементы spread для литералов массивов:
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

ES2018: объектные свойства rest и spread 🆕​

Что же нового? _пропоузал добавляет возможность использовать свойства rest и spread для литералов объектов.

// Свойства rest для деструктурирующего присваивания объектов:
const person = {
    firstName: 'Себастьян',
    lastName: 'Маркбåге',
    country: 'США',
    state: 'Калифорния',
};
const { firstName, lastName, ...rest } = person;
console.log(firstName); // Себастьян
console.log(lastName); // Маркбåге
console.log(rest); // { country: 'США', state: 'Калифорния' }