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, ...
String.trimStart()
String.trimEnd()
Object.fromEntries
Optionale Fangbindung
Array.flat()
Array.flatMap()
Überarbeitetes Array.Sort()
JSON.stringify() überarbeitet
In Zeichenfolgenliteralen zulässige Trennzeichen
Überarbeitete Function.toString()
Diese Funktionen sind relativ neu.
Ältere Browser benötigen möglicherweise einen alternativen Code (Polyfill)
ES2019 hat die String-Methode trimStart()
zu JavaScript hinzugefügt. <p>Die Methode trimStart()
funktioniert wie trim()
, entfernt jedoch Leerzeichen nur am Anfang von ein Faden.
let text1 = " Hello World! ";
let text2 = text1.trimStart();
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The trimStart() Method</h2>
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trimStart();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</body>
</html>
Der JavaScript-String trimStart()
wird seit Januar 2020 in allen modernen Browsern unterstützt:
Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |
ES2019 hat die String-Methode trimEnd()
zu JavaScript hinzugefügt. <p>Die Methode trimEnd()
funktioniert wie trim()
, entfernt jedoch Leerzeichen nur am Ende von ein Faden.
let text1 = " Hello World! ";
let text2 = text1.trimEnd();
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The trimEnd() Method</h2>
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trimEnd();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</body>
</html>
Der JavaScript-String trimEnd()
wird seit Januar 2020 in allen modernen Browsern unterstützt:
Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |
ES2019 hat die Objektmethode fromEntries()
zu JavaScript hinzugefügt. <p>Die Methode fromEntries()
erstellt ein Objekt aus iterierbaren Schlüssel-/Wertpaaren.
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];
const myObj = Object.fromEntries(fruits);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<h2>The fromEntries() Method</h2>
<p>The number of pears are:</p>
<p id="demo"></p>
<script>
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];
const myObj = Object.fromEntries(fruits);
document.getElementById("demo").innerHTML = myObj.pears;
</script>
</body>
</html>
Das JavaScript-Objekt fromEntries()
wird seit Januar 2020 in allen modernen Browsern unterstützt:
Chrome 73 | Edge 79 | Firefox 63 | Safari 12.1 | Opera 60 |
Mar 2019 | Jan 2020 | Oct 2018 | Mar 2019 | Apr 2019 |
Ab ES2019 können Sie den Catch-Parameter weglassen, wenn Sie ihn nicht benötigen:.
Vor 2019:
try {
// code
} catch (err) {
// code
}
Nach 2019:
try {
// code
} catch {
// code
}
Die optionale Catch-Bindung wird seit Januar 2020 in allen modernen Browsern unterstützt:
Chrome 66 | Edge 79 | Firefox 58 | Safari 11.1 | Opera 53 |
Apr 2018 | Jan 2020 | Jan 2018 | Mar 2018 | May 2018 |
ES2019 hat JavaScript die Methode Array flat()
hinzugefügt.
Die Methode flat()
erstellt ein neues Array, indem sie ein verschachteltes Array reduziert.
const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>
<p id="demo"></p>
<script>
const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>
</body>
</html>
Das JavaScript-Array flat()
wird seit Januar 2020 in allen modernen Browsern unterstützt:
Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
Sep 2018 | Jan 2020 | Sep 2018 | Sep 2018 | Sep 2018 |
ES2019 hat die Array-Methode flatMap()
zu JavaScript hinzugefügt.
Die Methode flatMap()
bildet zunächst alle Elemente eines Arrays ab und erstellt dann ein neues Array durch Reduzieren des Arrays.
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>
<p id="demo"></p>
<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>
</body>
</html>
ES2019 überarbeitet die Array sort()
-Methode.
Vor 2019 erlaubte die Spezifikation instabile Sortieralgorithmen wie QuickSort.
Nach ES2019 müssen Browser einen stabilen Sortieralgorithmus verwenden:
Beim Sortieren von Elementen nach einem Wert müssen die Elemente ihre relative Position zu anderen Elementen mit demselben Wert beibehalten.
const myArr = [
{name:"X00",price:100 },
{name:"X01",price:100 },
{name:"X02",price:100 },
{name:"X03",price:100 },
{name:"X04",price:110 },
{name:"X05",price:110 },
{name:"X06",price:110 },
{name:"X07",price:110 }
];
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Stable Sort</h1>
<p>From ES2019, browsers must use a stable sorting algorithm.</p>
<p>When sorting elements on a key, the elements must keep their relative position to other objects with the same key.</p>
<p id="demo"></p>
<script>
const myArr = [
{name:"X00",price:100 },
{name:"X01",price:100 },
{name:"X02",price:100 },
{name:"X03",price:100 },
{name:"X04",price:110 },
{name:"X05",price:110 },
{name:"X06",price:110 },
{name:"X07",price:110 },
{name:"X08",price:120 },
{name:"X09",price:120 },
{name:"X10",price:120 },
{name:"X11",price:120 },
{name:"X12",price:130 },
{name:"X13",price:130 },
{name:"X14",price:130 },
{name:"X15",price:130 },
{name:"X16",price:140 },
{name:"X17",price:140 },
{name:"X18",price:140 },
{name:"X19",price:140 }
];
myArr.sort( (p1, p2) => {
if (p1.price < p2.price) return -1;
if (p1.price > p2.price) return 1;
return 0;
});
let txt = "";
myArr.forEach(myFunction);
function myFunction(value) {
txt += value.name + " " + value.price + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
Im obigen Beispiel darf das Ergebnis bei der Sortierung nach Preis nicht mit den Namen in einer anderen relativen Position wie z. B. ausgegeben werden so was:
X01 100
X03 100
X00 100
X03 100
X05 110
X04 110
X06 110
X07 110
ES2019 überarbeitet die JSON-Methode stringify()
.
Vor 2019 konnte JSON keine mit\codierten Zeichen in Strings umwandeln.
let text = JSON.stringify("\u26D4");
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript JSON</h1>
<h2>Revised stringify()</h2>
<p id="demo"></p>
<script>
let text = JSON.stringify("\u26D4");
document.getElementById("demo").innerHTML = JSON.parse(text);
</script>
</body>
</html>
Vor ES2019: Verwendung von JSON.stringify()
JSON für UTF-8-Codepunkte (U+D800 bis U+DFFF) zurückgegebene fehlerhafte Unicode-Zeichen wie ����.
Nach dieser Überarbeitung werden Zeichenfolgen mit UTF-8-Codepunkten sicher mit JSON.stringify()
konvertiert. und zurück zum Original mit JSON.parse()
.
Vor 2019 wurden diese als Zeilenabschlusszeichen behandelt und führten zu Fehlerausnahmen:
// This is valid in ES2019:
let text = "\u2028";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>From ES2019, line and paragraph separator symbols (\u2028 and \u2029) are allowed in string literals:</p>
<p id="demo"></p>
<script>
let text = "\u2028";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Jetzt gelten für JavaScript und JSON die gleichen Regeln.
Vor ES2019:
text=JSON.parse('"\u2028"') würde nach '' analysieren.
text='"\u2028"' würde einen Syntaxfehler ergeben.
ES2019 überarbeitet die Function toString()
-Methode.
Die Methode toString()
gibt einen String zurück, der den Quellcode einer Funktion darstellt.
Ab 2019 muss toString() den Quellcode der Funktion inklusive Kommentaren zurückgeben, Leerzeichen und Syntaxdetails.
Vor 2019 gaben verschiedene Browser unterschiedliche Varianten der Funktion zurück (z. B. ohne Kommentare und Leerzeichen). Ab 2019 sollte die Funktion genau so zurückgegeben werden, wie sie geschrieben ist.
function myFunction(p1, p2) {
return p1 * p2;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns the function as a string:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>