JavaScript ECMAScript 2020


Innehållsförteckning

    Visa innehållsförteckning

JavaScript-versionsnummer

Gamla JS-versioner namnges med nummer: ES5 (2009) och ES6 (2015).

Från 2016 är versionerna namngivna efter år: ECMAScript 2016, 2017, 2018, 2019, ...

Nya funktioner i ES2020

  • BigInt

  • String matchAll()

  • The Nullish Coalescing Operator (??)

  • Den valfria kedjeoperatören (?.)

  • Logical AND Assignment Operator (&&=)

  • Logisk ELLER tilldelning (||=)

  • Nullish Coalescing Assignment (??=)

  • Promise allSettled():
    style="word-wrap: break-word;">Promise.allSettled([bal1,bal2,bal3]).sedan {}

  • Dynamisk import

Varning

Dessa funktioner är relativt nya.

Äldre webbläsare kan behöva en alternativ kod (Polyfill)

JavaScript BigInt

JavaScript BigInt-variabler används för att lagra stora heltalsvärden som är för stora för att representeras av ett normalt JavaScript nummer.

JavaScript-heltal är endast korrekta upp till cirka 15 siffror.

Heltalsexempel

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

Prova själv →

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

let x = 9999999999999999;
let y = 9999999999999999n;

Prova själv →

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


För att skapa en BigInt, lägg till n i slutet av ett heltal eller anrop BigInt():

Exempel

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

Prova själv →

<!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-typen typ en BigInt är "bigint":

Exempel

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

Prova själv →

<!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 stöds i alla moderna webbläsare sedan september 2020:

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

JavaScript String matchAll()

Före ES2020 fanns det ingen strängmetod som kunde användas för att söka efter alla förekomster av ett snöre i ett snöre.

Exempel

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

Prova själv →

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

Om parametern är ett reguljärt uttryck måste den globala flaggan (g) sättas in, annars ett TypeError visas.

Exempel

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

Prova själv →

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

Om du vill söka skiftlägesokänslig måste den okänsliga flaggan (i) ställas in:

Exempel

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

Prova själv →

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

Notera

ES2021 introducerade strängmetoden replaceAll().



The Nullish Coalescing Operator (??)

Operatorn ?? returnerar det första argumentet om det inte är nullish (null eller odefinierad).

Annars returnerar den den andra.

Exempel

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

Prova själv →

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


Nullish-operatören stöds i alla moderna webbläsare sedan mars 2020:

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

Den valfria kedjeoperatören (?.)

Den valfria kedjeoperatören returnerar odefinierad om ett objekt är odefinierad eller null (istället för att skapa ett fel).

Exempel

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

Prova själv →

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

Operatören ?.= stöds i alla moderna webbläsare sedan mars 2020:

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

&&=-operatören

Logical AND Assignment Operator används mellan två värden.

Om det första värdet är true, tilldelas det andra värdet.

Logiskt OCH tilldelningsexempel

let x = 10;
x &&= 5;

Prova själv →

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

Operatören &&= stöds i alla moderna webbläsare sedan september 2020:

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

Operatören ||=

Logical OR Assignment Operator används mellan två värden.

Om det första värdet är false, tilldelas det andra värdet.

Logiskt ELLER Tilldelningsexempel

let x = 10;
x ||= 5;

Prova själv →

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

Operatören ||= stöds i alla moderna webbläsare sedan september 2020:

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

??= Operatören

Nullish Coalescing Assignment Operator används mellan två värden.

Om det första värdet är odefinierat eller null, tilldelas det andra värdet.

Nullish Coalescing Assignment Exempel

let x;
x ??= 5;

Prova själv →

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

Operatören ??= stöds i alla moderna webbläsare sedan september 2020:

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