Zum Hauptinhalt springen

BigInt: Ganzzahlen mit beliebiger Genauigkeit in JavaScript

· 10 Minuten Lesezeit
Mathias Bynens ([@mathias](https://twitter.com/mathias))

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.

Optionale `catch`-Bindung

· Eine Minute Lesezeit
Mathias Bynens ([@mathias](https://twitter.com/mathias))

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

`String.prototype.trimStart` und `String.prototype.trimEnd`

· Eine Minute Lesezeit
Mathias Bynens ([@mathias](https://twitter.com/mathias))

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'

Dynamisches `import()`

· 5 Minuten Lesezeit
Mathias Bynens ([@mathias](https://twitter.com/mathias))

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`

· 2 Minuten Lesezeit
Mathias Bynens ([@mathias](https://twitter.com/mathias))

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();
});
};

`Intl.PluralRules`

· 4 Minuten Lesezeit
Mathias Bynens ([@mathias](https://twitter.com/mathias))

Iñtërnâtiônàlizætiøn ist schwierig. Das korrekte Behandeln von Pluralen ist eines von vielen Problemen, die einfach erscheinen, bis man erkennt, dass jede Sprache ihre eigenen Pluralisierungsregeln hat.

Für die englische Pluralisierung gibt es nur zwei mögliche Ergebnisse. Nehmen wir das Wort „cat“ als Beispiel:

  • 1 cat, d.h. die 'one'-Form, bekannt als Singular im Englischen
  • 2 cats, aber auch 42 cats, 0.5 cats, usw., d.h. die 'other'-Form (die einzige weitere), bekannt als Plural im Englischen.

Die brandneue Intl.PluralRules API sagt Ihnen, welche Form in einer Sprache Ihrer Wahl basierend auf einer gegebenen Zahl zutrifft.

const pr = new Intl.PluralRules('en-US');
pr.select(0); // 'other' (z. B. '0 cats')
pr.select(0.5); // 'other' (z. B. '0.5 cats')
pr.select(1); // 'one' (z. B. '1 cat')
pr.select(1.5); // 'other' (z. B. '0.5 cats')
pr.select(2); // 'other' (z. B. '0.5 cats')

Objekt Rest- und Spread-Eigenschaften

· 2 Minuten Lesezeit
Mathias Bynens ([@mathias](https://twitter.com/mathias))

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' }