JavaScript ECMAScript 2021


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 ES2021

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

  • String replaceAll()

  • Numeriska avgränsare (_)


Nya funktioner i ES2022

  • Array at()

  • Sträng vid()

  • RegExp /d

  • Object.hasOwn()

  • fel.orsak

  • väntar på import

  • Privata metoder och fält

  • Klassfältdeklarationer

Varning

Dessa funktioner är relativt nya.

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


JavaScript String ReplaceAll()

ES2021 introducerade strängmetoden replaceAll():

Exempel

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

Prova själv →

<!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() låter dig ange en reguljärt uttryck istället för en sträng som ska ersättas.

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

Exempel

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

Prova själv →

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

Notera

ES2020 introducerade strängmetoden matchAll().



Numerisk avgränsare för JavaScript (_)

ES2021 introducerade den numeriska separatorn (_) för att göra siffror mer läsbara:

Exempel

const num = 1_000_000_000;

Prova själv →

<!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 numeriska avgränsaren är endast för visuell användning.

Exempel

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

Prova själv →

<!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 numeriska avgränsaren kan placeras var som helst i ett nummer:

Exempel

const num1 = 1_2_3_4_5;

Prova själv →

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

Notera

Den numeriska avgränsaren är inte tillåten i början eller slutet av ett nummer.

I JavaScript kan endast variabler börja med _.

Den numeriska separatorn stöds i alla moderna webbläsare sedan januari 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 inducerade arraymetoden at():

Exempel

Få den tredje delen av frukt:

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

Prova själv →

<!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å den tredje delen av frukt:

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

Prova själv →

<!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() returnerar ett indexerat element från en array.

Metoden at() returnerar samma som [].

Metoden at() stöds i alla moderna webbläsare sedan mars 2022:

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

Notera

Många språk tillåter indexering av negativ parentes som [-1] för att komma åt element från slutet av en objekt/array/sträng.

Detta är inte möjligt i JavaScript, eftersom [] används för att komma åt både arrayer och objekt. obj[-1] hänvisar till värdet på nyckel -1, inte till objektets sista egenskap.

Metoden at() introducerades i ES2022 för att lösa detta problem.


JavaScript-sträng at()

ES2022 inducerade strängmetoden at():

Exempel

Få den tredje bokstaven i namnet:

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

Prova själv →

<!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å den tredje bokstaven i namnet:

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

Prova själv →

<!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() returnerar ett indexerat element från en sträng.

Metoden at() returnerar samma som [].

Metoden at() stöds i alla moderna webbläsare sedan mars 2022:

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