JavaScript ECMAScript 2021


Indholdsfortegnelse

    Vis indholdsfortegnelse

JavaScript-versionsnumre

Gamle JS-versioner er navngivet med numre: ES5 (2009) og ES6 (2015).

Fra 2016 er versionerne navngivet efter år: ECMAScript 2016, 2017, 2018, 2019, ...

Nye funktioner i ES2021

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

  • String replaceAll()

  • Numeriske skilletegn (_)


Nye funktioner i ES2022

  • Array ved()

  • Streng ved()

  • RegExp /d

  • Object.hasOwn()

  • fejl.årsag

  • afvente import

  • Private metoder og felter

  • Klasse felterklæringer

Advarsel

Disse funktioner er relativt nye.

Ældre browsere kan have brug for en alternativ kode (Polyfill)


JavaScript String ReplaceAll()

ES2021 introducerede strengmetoden replaceAll():

Eksempel

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

Prøv det selv →

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

Metoden replaceAll() giver dig mulighed for at angive en regulært udtryk i stedet for en streng, der skal erstattes.

Hvis parameteren er et regulært udtryk, skal det globale flag (g) ellers indstilles en TypeError vises.

Eksempel

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

Prøv det selv →

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

Bemærk

ES2020 introducerede strengmetoden matchAll().



JavaScript Numerisk Separator (_)

ES2021 introducerede den numeriske separator (_) for at gøre tal mere læsbare:

Eksempel

const num = 1_000_000_000;

Prøv det selv →

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

Den numeriske separator er kun til visuel brug.

Eksempel

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

Prøv det selv →

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

Den numeriske separator kan placeres hvor som helst i et tal:

Eksempel

const num1 = 1_2_3_4_5;

Prøv det selv →

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

Bemærk

Den numeriske separator er ikke tilladt i begyndelsen eller slutningen af et tal.

I JavaScript kan kun variabler starte med _.

Den numeriske separator er understøttet i alle moderne browsere siden januar 2020:

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 inducerede array-metoden at():

Eksempler

Få det tredje element af frugter:

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

Prøv det selv →

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

Få det tredje element af frugter:

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

Prøv det selv →

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

Metoden at() returnerer et indekseret element fra et array.

Metoden at() returnerer det samme som [].

Metoden at() er understøttet i alle moderne browsere siden marts 2022:

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

Bemærk

Mange sprog tillader negativ indeksering af parentes såsom [-1] for at få adgang til elementer fra slutningen af en objekt/array/streng.

Dette er ikke muligt i JavaScript, fordi [] bruges til at få adgang til både arrays og objekter. obj[-1] henviser til værdien af nøgle -1, ikke til objektets sidste egenskab.

Metoden at() blev introduceret i ES2022 for at løse dette problem.


JavaScript-streng at()

ES2022 inducerede strengmetoden at():

Eksempler

Få det tredje bogstav i navnet:

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

Prøv det selv →

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

Få det tredje bogstav i navnet:

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

Prøv det selv →

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

Metoden at() returnerer et indekseret element fra en streng.

Metoden at() returnerer det samme som [].

Metoden at() er understøttet i alle moderne browsere siden marts 2022:

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