JavaScript ECMAScript 2021


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 ES2021

  • Promise any():
    style="word-wrap: break-word;">const first=waiting Promise.any([prom1,prom2,prom3]);

  • String replaceAll()

  • Numerische Trennzeichen (_)


Neue Funktionen in ES2022

  • Array bei()

  • String at()

  • RegExp /d

  • Object.hasOwn()

  • Fehlerursache

  • Warten auf den Import

  • Private Methoden und Felder

  • Klassenfelddeklarationen

Warnung

Diese Funktionen sind relativ neu.

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


JavaScript-String ReplacementAll()

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

Beispiel

text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

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

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Mit der Methode replaceAll() können Sie a angeben regulärer Ausdruck anstelle einer zu ersetzenden Zeichenfolge.

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

Beispiel

text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

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

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular";
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Notiz

ES2020 hat die String-Methode matchAll() eingeführt.



JavaScript-Numerisches Trennzeichen (_)

ES2021 hat das numerische Trennzeichen (_) eingeführt, um Zahlen besser lesbar zu machen:

Beispiel

const num = 1_000_000_000;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>

<p>ES2021 intoduced the numeric separator (_) to make numbers more readable:</p>
<p id="demo"></p>

<script>
const num = 1_000_000_000;
document.getElementById("demo").innerHTML = num;
</script>

</body>
</html>

Das numerische Trennzeichen dient nur der visuellen Verwendung.

Beispiel

const num1 = 1_000_000_000;
const num2 = 1000000000;
(num1 === num2); 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>

<p>ES2021 intoduced the numeric separator (_) to make numbers more readable:</p>

<p>Is 1_000_000_000 the same as 1000000000?</p>
<p id="demo"></p>

<script>
const num1 = 1_000_000_000;
const num2 = 1000000000;
document.getElementById("demo").innerHTML = (num1 === num2);
</script>

</body>
</html>

Das numerische Trennzeichen kann an einer beliebigen Stelle in einer Zahl platziert werden:

Beispiel

const num1 = 1_2_3_4_5;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>

<p>ES2021 intoduced the numeric separator (_) to make numbers more readable:</p>
<p id="demo"></p>

<script>
const num = 1_2_3_4_5;
document.getElementById("demo").innerHTML = num;
</script>

</body>
</html>

Notiz

Das numerische Trennzeichen ist weder am Anfang noch am Ende einer Zahl zulässig.

In JavaScript können nur Variablen mit _ beginnen.

Das numerische Trennzeichen wird seit Januar 2020 in allen modernen Browsern unterstützt:

Chrome 75 Edge 79 Firefox 74 Safari 13.1 Opera 67
Jun 2019 Jan 2020 Oct 2019 Sep 2019 Jun 2019

JavaScript-Array at()

ES2022 hat die Array-Methode at() eingeführt:

Beispiele

Holen Sie sich das dritte Element Früchte:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The at() Method</h2>

<p>The at() method returns an indexed element from an array:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);

document.getElementById("demo").innerHTML = fruit;
</script>

</body>
</html>

Holen Sie sich das dritte Element Früchte:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Notation</h2>

<p>The bracked notation [] returns an indexed element from an array:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

document.getElementById("demo").innerHTML = fruit;
</script>

</body>
</html>

Die Methode at() gibt ein indiziertes Element aus einem Array zurück.

Die Methode at() gibt dasselbe zurück wie [].

Die Methode at() wird seit März 2022 in allen modernen Browsern unterstützt:

Chrome 92 Edge 92 Firefox 90 Safari 15.4 Opera 78
Apr 2021 Jul 2021 Jul 2021 Mar 2022 Aug 2021

Notiz

Viele Sprachen erlauben eine negative Klammerindizierung wie [-1], um auf Elemente vom Ende eines aus zuzugreifen Objekt/Array/String.

Dies ist in JavaScript nicht möglich, da [] sowohl für den Zugriff auf Arrays als auch auf Objekte verwendet wird. obj[-1] bezieht sich auf den Wert von Schlüssel -1, nicht auf die letzte Eigenschaft des Objekts.

Um dieses Problem zu lösen, wurde in ES2022 die Methode at() eingeführt.


JavaScript-String at()

ES2022 hat die String-Methode at() eingeführt:

Beispiele

Holen Sie sich den dritten Buchstaben des Namens:

const name = "W3Schools";
let letter = name.at(2);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

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

<p>The at() method returns an indexed element from a string:</p>

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

<script>
const name = "W3Schools";
let letter = name.at(2);

document.getElementById("demo").innerHTML = letter;
</script>

</body>
</html>

Holen Sie sich den dritten Buchstaben des Namens:

const name = "W3Schools";
let letter = name[2];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>Bracket Notation</h2>

<p>The bracked notation [] returns an indexed element from a string:</p>

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

<script>
const name = "W3Schools";
let letter = name[2];

document.getElementById("demo").innerHTML = letter;
</script>

</body>
</html>

Die Methode at() gibt ein indiziertes Element aus einer Zeichenfolge zurück.

Die Methode at() gibt dasselbe zurück wie [].

Die Methode at() wird seit März 2022 in allen modernen Browsern unterstützt:

Chrome 92 Edge 92 Firefox 90 Safari 15.4 Opera 78
Apr 2021 Jul 2021 Jul 2021 Mar 2022 Aug 2021