JavaScript ECMAScript 2020

Obsah

Zobrazit obsah

Čísla verzí JavaScriptu

Staré verze JS jsou pojmenovány podle čísel: ES5 (2009) a ES6 (2015).

Od roku 2016 jsou verze pojmenovány podle roku: ECMAScript 2016, 2017, 2018, 2019, ...

Nové funkce v ES2020

BigInt
String matchAll()
Nullish Coalescing Operator (??)
Volitelný operátor řetězení (?.)
Logický operátor A přiřazení (&&=)
Logické OR přiřazení (||=)
Nullish Coalescing Assignment (??=)
Promise allSettled():
style="word-wrap: break-word;">Promise.allSettled([prom1,prom2,prom3]).then {}
Dynamický import

Varování

Tyto funkce jsou relativně nové.

Starší prohlížeče mohou potřebovat alternativní kód (Polyfill)

JavaScript BigInt

Proměnné BigInt JavaScriptu se používají k ukládání hodnot velkých celých čísel které jsou příliš velké na to, aby je reprezentovalo běžné číslo JavaScriptu.

Celá čísla JavaScriptu jsou přesná pouze do 15 číslic.

Příklad celého čísla

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

Zkuste to sami →

<!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>

Příklad BigInt

let x = 9999999999999999;
let y = 9999999999999999n;

Zkuste to sami →

<!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>

Chcete-li vytvořit BigInt, připojte n na konec celého čísla nebo volání BigInt():

Příklad

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

Zkuste to sami →

<!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>

JavaScript typeof a BigInt je "bigint":

Příklad

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

Zkuste to sami →

<!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 je podporován ve všech moderních prohlížečích od září 2020:


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

JavaScript řetězec matchAll()

Před ES2020 neexistovala žádná řetězcová metoda, kterou by bylo možné použít k vyhledání všech výskytů struna v struně.

Příklad

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

Zkuste to sami →

<!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>

Pokud je parametrem regulární výraz, musí být nastaven globální příznak (g), jinak je vyvolána chyba TypeError.

Příklad

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

Zkuste to sami →

<!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>

Pokud chcete vyhledávat bez ohledu na velikost písmen, musí být nastaven příznak necitlivosti (i):

Příklad

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

Zkuste to sami →

<!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>

Poznámka

ES2021 zavedl řetězcovou metodu replaceAll().

Nullish Coalescing Operator (??)

Operátor ?? vrátí první argument, pokud není nulový (null nebo nedefinováno).

Jinak vrátí druhý.

Příklad

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

Zkuste to sami →

<!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>

Operátor Nullish je podporován ve všech moderních prohlížečích od března 2020:


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

Volitelný operátor řetězení (?.)

Volitelný operátor řetězení vrátí undefined, pokud je objekt undefined nebo null (místo vyvolání chyby).

Příklad

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

Zkuste to sami →

<!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>

Operátor ?.= je od března 2020 podporován ve všech moderních prohlížečích:


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

Operátor &&=

Logický operátor přiřazení AND se používá mezi dvěma hodnotami.

Pokud je první hodnota true, je přiřazena druhá hodnota.

Příklad logického A přiřazení

let x = 10;
x &&= 5;

Zkuste to sami →

<!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>

Operátor &&= je od září 2020 podporován ve všech moderních prohlížečích:


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

Operátor ||=

Logický operátor OR přiřazení se používá mezi dvěma hodnotami.

Pokud je první hodnota false, je přiřazena druhá hodnota.

Příklad logického OR přiřazení

let x = 10;
x ||= 5;

Zkuste to sami →

<!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>

Operátor ||= je od září 2020 podporován ve všech moderních prohlížečích:


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

Operátor ??=

Mezi dvěma hodnotami se používá Nullish Coalescing Assignment Operator.

Pokud je první hodnota undefined nebo null, je přiřazena druhá hodnota.

Příklad přiřazení Nullish Coalescing

let x;
x ??= 5;

Zkuste to sami →

<!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>

Operátor ??= je od září 2020 podporován ve všech moderních prohlížečích:


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