JavaScript ECMAScript 2020


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

JavaScript-Versionsnummern

Alte JS-Versionen werden nach Nummern benannt: ES5 (2009) und ES6 (2015).

Ab 2016 sind die Versionen nach Jahr benannt: ECMAScript 2016, 2017, 2018, 2019, ...

Neue Funktionen in ES2020

  • BigInt

  • String matchAll()

  • Der Nullish Coalescing Operator (??)

  • Der optionale Verkettungsoperator (?.)

  • Logischer AND-Zuweisungsoperator (&&=)

  • Logische ODER-Zuweisung (||=)

  • Nullish Coalescing-Auftrag (??=)

  • Promise allSettled():
    style="word-wrap: break-word;">Promise.allSettled([prom1,prom2,prom3]).then {}

  • Dynamischer Import

Warnung

Diese Funktionen sind relativ neu.

Ältere Browser benötigen möglicherweise einen alternativen Code (Polyfill)

JavaScript BigInt

JavaScript-BigInt-Variablen werden zum Speichern großer Ganzzahlwerte verwendet die zu groß sind, um durch eine normale JavaScript-Zahl dargestellt zu werden.

JavaScript-Ganzzahlen sind nur bis zu etwa 15 Stellen genau.

Beispiel für eine Ganzzahl

let x = 999999999999999;
let y = 9999999999999999; // too big

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer Precision</h2>

<p>Integers (numbers without a period or exponent notation) are accurate up to 15 digits:</p>

<p id="demo"></p>

<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>


BigInt-Beispiel

let x = 9999999999999999;
let y = 9999999999999999n;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer and BigInt</h2>

<p id="demo"></p>

<script>
let x = 9999999999999999;
let y = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>


Um einen BigInt zu erstellen, hängen Sie n an das Ende einer Ganzzahl oder eines Aufrufs an BigInt():

Beispiel

let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Create a BigInt</h2>

<p id="demo"></p>

<script>
let x = 123456789012345678901234567890n;
let y = BigInt("123456789012345678901234567890");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>


Der JavaScript-typeof a BigInt ist „bigint“:

Beispiel

let x = BigInt(999999999999999);
let type = typeof x;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>BigInt typeof</h2>

<p>The typeof a BigInt is:</p>
<p id="demo"></p>

<script>
let x = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = typeof x;
</script>

</body>
</html>


BigInt wird seit September 2020 in allen modernen Browsern unterstützt:

Chrome 67 Edge 79 Firefox 68 Safari 14 Opera 54
May 2018 Jan 2020 Jul 2019 Sep 2020 Jun 2018

JavaScript-String matchAll()

Vor ES2020 gab es keine String-Methode, mit der nach allen Vorkommen gesucht werden konnte einer Zeichenfolge in einer Zeichenfolge.

Beispiel

const iterator = text.matchAll("Cats");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Wenn der Parameter ein regulärer Ausdruck ist, muss andernfalls das globale Flag (g) gesetzt sein Es wird ein TypeError ausgelöst.

Beispiel

const iterator = text.matchAll(/Cats/g);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Wenn Sie bei der Suche die Groß-/Kleinschreibung ignorieren möchten, muss das Insensitive-Flag (i) gesetzt sein:

Beispiel

const iterator = text.matchAll(/Cats/gi);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Notiz

ES2021 führte die String-Methode replaceAll() ein.



Der Nullish Coalescing Operator (??)

Der Operator ?? gibt das erste Argument zurück, wenn es nicht null ist (null oder undefiniert).

Andernfalls wird die Sekunde zurückgegeben.

Beispiel

let name = null;
let text = "missing";
let result = name ?? text;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?? Operator</h2>
<p>The ?? operator returns the first argument if it is not nullish (null or undefined). Otherwise it returns the second.</p>

<p id="demo"></p>

<script>
let name = null;
let text = "missing";
let result = name ?? text;
document.getElementById("demo").innerHTML = "The name is " + result; 
</script>

</body>
</html>


Der nullish-Operator wird seit März 2020 in allen modernen Browsern unterstützt:

Chrome 80 Edge 80 Firefox 72 Safari 13.1 Opera 67
Feb 2020 Feb 2020 Jan 2020 Mar 2020 Mar 2020

Der optionale Verkettungsoperator (?.)

Der Optionale Verkettungsoperator gibt undefiniert zurück, wenn ein Objekt vorhanden ist undefiniert oder null (anstatt einen Fehler auszulösen).

Beispiel

const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?. Operator</h2>
<p>The ?. operator returns undefined if an object is undefined or null (instead of throwing an error).</p>

<p>Car name is:</p>
<p id="demo"></p>

<script>
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;
document.getElementById("demo").innerHTML = name;
</script>

</body>
</html>

Der Operator ?.= wird seit März 2020 in allen modernen Browsern unterstützt:

Chrome 80 Edge 80 Firefox 74 Safari 13.1 Opera 67
Feb 2020 Feb 2020 Mar 2020 Mar 2020 Mar 2020

Der &&=-Operator

Der Logische UND-Zuweisungsoperator wird zwischen zwei Werten verwendet.

Wenn der erste Wert true ist, wird der zweite Wert zugewiesen.

Beispiel für eine logische UND-Zuweisung

let x = 10;
x &&= 5;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &amp;&amp;= Operator</h3>
<p>If the first value is true, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x = 100;
x &&= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

Der Operator &&= wird seit September 2020 in allen modernen Browsern unterstützt:

Chrome 85 Edge 85 Firefox 79 Safari 14 Opera 71
Aug 2020 Aug 2020 Mar 2020 Sep 2020 Sep 2020

Der ||=-Operator

Der Logische ODER-Zuweisungsoperator wird zwischen zwei Werten verwendet.

Wenn der erste Wert false ist, wird der zweite Wert zugewiesen.

Beispiel für eine logische ODER-Zuweisung

let x = 10;
x ||= 5;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical OR Assignment</h2>
<h3>The ||= Operator</h3>

<p>If the first value is false, the second value is assigned:</p>
<p id="demo"></p>

<script>
let x = undefined;
x ||= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

Der Operator ||= wird seit September 2020 in allen modernen Browsern unterstützt:

Chrome 85 Edge 85 Firefox 79 Safari 14 Opera 71
Aug 2020 Aug 2020 Mar 2020 Sep 2020 Sep 2020

Der ??=-Operator

Der Nullish Coalescing Assignment Operator wird zwischen zwei Werten verwendet.

Wenn der erste Wert undefiniert oder null ist, wird der zweite Wert zugewiesen.

Beispiel für eine Nullish-Coalescing-Zuweisung

let x;
x ??= 5;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The ??= operator is used between two values. If the first value is undefined or null, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x;
document.getElementById("demo").innerHTML = x ??= 5; 
</script>

</body>
</html>

Der Operator ??= wird seit September 2020 in allen modernen Browsern unterstützt:

Chrome 85 Edge 85 Firefox 79 Safari 14 Opera 71
Aug 2020 Aug 2020 Mar 2020 Sep 2020 Sep 2020