Vanhat JS-versiot on nimetty numeroilla: ES5 (2009) ja ES6 (2015).
Vuodesta 2016 alkaen versiot on nimetty vuosien mukaan: ECMAScript 2016, 2017, 2018, 2019, ...
String.trimStart()
String.trimEnd()
Object.fromEntries
Valinnainen kiinnityssidonta
Array.flat()
Array.flatMap()
Tarkistettu Array.Sort()
Päivitetty JSON.stringify()
Erotinsymbolit sallittu merkkijonokirjaimessa
Tarkistettu Function.toString()
Nämä ominaisuudet ovat suhteellisen uusia.
Vanhemmat selaimet saattavat tarvita vaihtoehtoisen koodin (Polyfill)
ES2019 lisäsi JavaScriptiin merkkijonomenetelmän trimStart()
. <p>trimStart()
-menetelmä toimii kuten trim()
, mutta poistaa välilyönnit vain nauha.
let text1 = " Hello World! ";
let text2 = text1.trimStart();
Kokeile itse →
<!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>
JavaScript-merkkijonoa trimStart()
on tuettu kaikissa nykyaikaisissa selaimissa tammikuusta 2020 lähtien:
Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |
ES2019 lisäsi JavaScriptiin merkkijonomenetelmän trimEnd()
. <p>trimEnd()
-menetelmä toimii kuten trim()
, mutta poistaa välilyönnit vain nauha.
let text1 = " Hello World! ";
let text2 = text1.trimEnd();
Kokeile itse →
<!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>
JavaScript-merkkijonoa trimEnd()
on tuettu kaikissa nykyaikaisissa selaimissa tammikuusta 2020 lähtien:
Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |
ES2019 lisäsi Object-menetelmän fromEntries()
JavaScriptiin. <p>fromEntries()
-menetelmä luo objektin iteroitavista avain/arvo-pareista.
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];
const myObj = Object.fromEntries(fruits);
Kokeile itse →
<!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>
JavaScript-objektia fromEntries()
on tuettu kaikissa nykyaikaisissa selaimissa tammikuusta 2020 lähtien:
Chrome 73 | Edge 79 | Firefox 63 | Safari 12.1 | Opera 60 |
Mar 2019 | Jan 2020 | Oct 2018 | Mar 2019 | Apr 2019 |
ES2019:stä voit jättää catch-parametrin pois, jos et tarvitse sitä:.
Ennen vuotta 2019:
try {
// code
} catch (err) {
// code
}
Vuoden 2019 jälkeen:
try {
// code
} catch {
// code
}
Valinnainen catch-sidonta on tuettu kaikissa nykyaikaisissa selaimissa tammikuusta 2020 lähtien:
Chrome 66 | Edge 79 | Firefox 58 | Safari 11.1 | Opera 53 |
Apr 2018 | Jan 2020 | Jan 2018 | Mar 2018 | May 2018 |
ES2019 lisäsi taulukon flat()
-menetelmän JavaScriptiin.
flat()
-menetelmä luo uuden taulukon tasoittamalla sisäkkäisen taulukon.
const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
Kokeile itse →
<!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>
JavaScript Array flat()
on tuettu kaikissa nykyaikaisissa selaimissa tammikuusta 2020 lähtien:
Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
Sep 2018 | Jan 2020 | Sep 2018 | Sep 2018 | Sep 2018 |
ES2019 lisäsi Array flatMap()
-menetelmän JavaScriptiin.
flatMap()
-menetelmä kartoittaa ensin kaikki taulukon elementit ja luo sitten uuden taulukon tasoittamalla taulukon.
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);
Kokeile itse →
<!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 tarkisti Array sort()
-menetelmän.
Ennen vuotta 2019 spesifikaatio salli epävakaat lajittelualgoritmit, kuten QuickSort.
ES2019:n jälkeen selaimien on käytettävä vakaata lajittelualgoritmia:
Kun lajitellaan elementtejä arvon perusteella, elementtien on säilytettävä suhteellinen asemansa muihin saman arvon omaaviin elementteihin nähden.
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 }
];
Kokeile itse →
<!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>
Yllä olevassa esimerkissä hinnan mukaan lajittelussa tulos ei saa tulla ulos nimien kanssa toisessa suhteellisessa asemassa, kuten kuten tämä:
X01 100
X03 100
X00 100
X03 100
X05 110
X04 110
X06 110
X07 110
ES2019 tarkisti JSON-menetelmän stringify()
.
Ennen vuotta 2019 JSON ei voinut joustaa \-koodattuja merkkejä.
let text = JSON.stringify("\u26D4");
Kokeile itse →
<!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>
Ennen ES2019:tä JSON.stringify()
JSON-käytöllä UTF-8-koodipisteissä (U+D800 - U+DFFF) palautti rikkinäisiä Unicode-merkkejä, kuten ���.
Tämän version jälkeen merkkijonot, joissa on UTF-8-koodipisteitä, muunnetaan turvallisesti JSON.stringify()
-komennolla, ja takaisin alkuperäiseen komennolla JSON.parse()
.
Ennen vuotta 2019 näitä käsiteltiin linjapäätteinä ja ne johtivat virhepoikkeuksiin:
// This is valid in ES2019:
let text = "\u2028";
Kokeile itse →
<!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>
Nyt JavaScriptillä ja JSONilla on samat säännöt.
Ennen ES2019:
text=JSON.parse('"\u2028"') jäsentäisi muotoon ''.
text='"\u2028"' antaisi syntaksivirheen.
ES2019 tarkisti funktion toString()
-menetelmän.
Metodi toString()
palauttaa merkkijonon, joka edustaa funktion lähdekoodia.
Vuodesta 2019 alkaen toString():n on palautettava funktion lähdekoodi, mukaan lukien kommentit, välilyönnit ja syntaksitiedot.
Ennen 2019 eri selaimet palauttivat toiminnon eri muunnelmia (kuten ilman kommentteja ja välilyöntejä). Vuodesta 2019 alkaen funktio tulee palauttaa täsmälleen sellaisena kuin se on kirjoitettu.
function myFunction(p1, p2) {
return p1 * p2;
}
Kokeile itse →
<!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>