39 postagens marcadas com "ECMAScript"

JSON.stringify anteriormente era especificado para retornar strings Unicode malformadas se a entrada contivesse algum surrogate solitário:

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

A proposta “JSON.stringify Bem-formado” altera JSON.stringify para que ele gere sequências de escape para surrogates solitários, tornando sua saída Unicode válido (e representável em UTF-8):

Os módulos JavaScript agora estão suportados em todos os principais navegadores!

Este artigo explica como usar módulos JS, como implantá-los de forma responsável e como a equipe do Chrome está trabalhando para tornar os módulos ainda melhores no futuro.

O que são módulos JS?​

Os módulos JS (também conhecidos como “módulos ES” ou “módulos do ECMAScript”) são uma nova grande funcionalidade, ou melhor, uma coleção de novas funcionalidades. Você pode ter usado um sistema de módulo JavaScript de terceiros antes. Talvez você tenha usado CommonJS como no Node.js, ou talvez AMD, ou algo do tipo. Todos esses sistemas de módulos têm uma coisa em comum: eles permitem que você importe e exporte funcionalidades.

BigInts são um novo tipo numérico em JavaScript que pode representar inteiros com precisão arbitrária. Com BigInts, você pode armazenar e operar com segurança em grandes inteiros, mesmo além do limite seguro de inteiros para Numbers. Este artigo explora alguns casos de uso e explica a nova funcionalidade no Chrome 67 comparando BigInts com Numbers em JavaScript.

A cláusula catch de instruções try costumava exigir um vínculo:

try {
  doSomethingThatMightThrow();
} catch (exception) {
  //     ^^^^^^^^^
  // Precisamos nomear o vínculo, mesmo que não o utilizemos!
  handleException();
}

No ES2019, catch agora pode ser usado sem um vínculo. Isso é útil se você não precisar do objeto exception no código que lida com a exceção.

try {
  doSomethingThatMightThrow();
} catch { // → Sem vínculo!
  handleException();
}

Suporte ao vínculo opcional catch​

ES2019 introduz String.prototype.trimStart() e String.prototype.trimEnd():

const string = '  olá mundo  ';
string.trimStart();
// → 'olá mundo  '
string.trimEnd();
// → '  olá mundo'
string.trim(); // ES5
// → 'olá mundo'

Essa funcionalidade estava anteriormente disponível através dos métodos não padronizados trimLeft() e trimRight(), que permanecem como aliases dos novos métodos para compatibilidade retroativa.

const string = '  olá mundo  ';
string.trimStart();
// → 'olá mundo  '
string.trimLeft();
// → 'olá mundo  '
string.trimEnd();
// → '  olá mundo'
string.trimRight();
// → '  olá mundo'
string.trim(); // ES5
// → 'olá mundo'

Function.prototype.toString() agora retorna trechos exatos do texto do código-fonte, incluindo espaços em branco e comentários. Aqui está um exemplo comparando o comportamento antigo e o novo:

Importação Dinâmica import() introduz uma nova forma semelhante a uma função de import que desbloqueia novas capacidades em comparação com a importação estática. Este artigo compara os dois e oferece uma visão geral do que há de novo.

Promise.prototype.finally permite registrar um callback para ser chamado quando uma promessa é resolvida (ou seja, concluída com sucesso ou rejeitada).

Imagine que você deseja buscar alguns dados para mostrar na página. Ah, e você quer mostrar um indicador de carregamento quando a requisição começar e ocultá-lo quando a requisição for concluída. Quando algo der errado, você exibe uma mensagem de erro no lugar.

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

Antes de discutir propriedades de descanso e espalhamento de objeto, vamos dar uma volta pela memória e relembrar um recurso muito semelhante.

Elementos de descanso e espalhamento de array do ES2015​

O bom e velho ECMAScript 2015 introduziu elementos de descanso para a atribuição de destruturação de array e elementos de espalhamento para literais de array.

// Elementos de descanso para atribuição de destruturação de array:
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]

// Elementos de espalhamento para literais de array:
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

ES2018: propriedades de descanso e espalhamento de objeto 🆕​

Então, o que há de novo? Bem, uma proposta permite propriedades de descanso e espalhamento para literais de objeto também.

// Propriedades de descanso para atribuição de destruturação de objeto:
const person = {
    firstName: 'Sebastian',
    lastName: 'Markbåge',
    country: 'USA',
    state: 'CA',
};
const { firstName, lastName, ...rest } = person;
console.log(firstName); // Sebastian
console.log(lastName); // Markbåge
console.log(rest); // { country: 'USA', state: 'CA' }