39 Posts getaggt mit "ECMAScript"

JSON.stringify wurde zuvor so spezifiziert, dass es schlecht geformte Unicode-Zeichenketten zurückgibt, wenn die Eingabe einsame Surrogate enthält:

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

Der Vorschlag „Gut geformtes JSON.stringify“ ändert JSON.stringify so, dass es Escape-Sequenzen für einsame Surrogate ausgibt, wodurch seine Ausgabe gültiges Unicode wird (und in UTF-8 darstellbar ist):

JavaScript-Module werden jetzt in allen großen Browsern unterstützt!

Dieser Artikel erklärt, wie man JS-Module verwendet, wie man sie verantwortungsbewusst einsetzt und wie das Chrome-Team daran arbeitet, Module in Zukunft noch besser zu machen.

Was sind JS-Module?​

JS-Module (auch bekannt als „ES-Module“ oder „ECMAScript-Module“) sind eine wichtige neue Funktion oder vielmehr eine Sammlung neuer Funktionen. Vielleicht haben Sie in der Vergangenheit ein benutzerdefiniertes JavaScript-Modulsystem verwendet. Vielleicht haben Sie CommonJS wie in Node.js verwendet, oder vielleicht AMD oder etwas anderes. All diese Modulsysteme haben eines gemeinsam: Sie ermöglichen es Ihnen, Dinge zu importieren und zu exportieren.

BigInts sind eine neue numerische Primitive in JavaScript, die Ganzzahlen mit beliebiger Genauigkeit darstellen können. Mit BigInts können Sie große Ganzzahlen sicher speichern und bearbeiten, sogar über die sichere Ganzzahlen-Grenze von Numbers hinaus. Dieser Artikel erklärt einige Anwendungsfälle und vergleicht die neue Funktionalität in Chrome 67 mit Numbers in JavaScript.

Die catch-Klausel von try-Anweisungen erforderte früher eine Bindung:

try {
  doSomethingThatMightThrow();
} catch (exception) {
  //     ^^^^^^^^^
  // Wir müssen die Bindung benennen, auch wenn wir sie nicht verwenden!
  handleException();
}

In ES2019 kann catch jetzt ohne eine Bindung verwendet werden. Dies ist nützlich, wenn Sie das exception-Objekt im Code, der die Ausnahme behandelt, nicht benötigen.

try {
  doSomethingThatMightThrow();
} catch { // → Keine Bindung!
  handleException();
}

Unterstützung für optionale catch-Bindung​

ES2019 führt String.prototype.trimStart() und String.prototype.trimEnd() ein:

const string = '  hallo welt  ';
string.trimStart();
// → 'hallo welt  '
string.trimEnd();
// → '  hallo welt'
string.trim(); // ES5
// → 'hallo welt'

Diese Funktionalität war zuvor über die nicht standardisierten Methoden trimLeft() und trimRight() verfügbar, welche aus Gründen der Abwärtskompatibilität weiterhin als Aliase für die neuen Methoden bestehen bleiben.

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

Function.prototype.toString() gibt jetzt exakte Ausschnitte des Quelltextes zurück, einschließlich Leerzeichen und Kommentare. Hier ist ein Beispiel, das das alte und das neue Verhalten vergleicht:

Dynamisches import() führt eine neue, funktionsähnliche Form von import ein, die im Vergleich zum statischen import neue Möglichkeiten bietet. Dieser Artikel vergleicht beide und gibt einen Überblick über die neuen Funktionen.

Promise.prototype.finally ermöglicht das Registrieren eines Rückrufs, der ausgeführt wird, wenn ein Versprechen abgeschlossen ist (d.h. entweder erfüllt oder abgelehnt).

Stellen Sie sich vor, Sie möchten einige Daten abrufen, um sie auf der Seite anzuzeigen. Oh, und Sie möchten einen Ladekreisel anzeigen, wenn die Anfrage startet, und ihn ausblenden, wenn die Anfrage abgeschlossen ist. Wenn etwas schiefgeht, zeigen Sie stattdessen eine Fehlermeldung an.

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

Bevor wir über Objekt-Rest- und Spread-Eigenschaften sprechen, machen wir eine Reise in die Vergangenheit und erinnern uns an ein sehr ähnliches Merkmal.

ES2015 Array-Rest- und Spread-Elemente​

Das gute alte ECMAScript 2015 führte Rest-Elemente für die Array-Destrukturierung und Spread-Elemente für Array-Literale ein.

// Rest-Elemente für Array-Destrukturierungszuweisung:
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-Elemente für Array-Literale:
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

ES2018: Objekt-Rest- und Spread-Eigenschaften 🆕​

Was gibt es also Neues? Nun, ein Vorschlag erlaubt auch Rest- und Spread-Eigenschaften für Objektliterale.

// Rest-Eigenschaften für Objekt-Destrukturierungszuweisung:
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' }