JavaScript ECMAScript 2021

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Αριθμοί έκδοσης JavaScript

Οι παλιές εκδόσεις JS ονομάζονται με αριθμούς: ES5 (2009) και ES6 (2015).

Από το 2016, οι εκδόσεις ονομάζονται ανά έτος: ECMAScript 2016, 2017, 2018, 2019, ...

Νέες δυνατότητες στο ES2021

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

  • String replaceAll()

  • Αριθμητικά διαχωριστικά (_)

Νέες δυνατότητες στο ES2022

  • Πίνακας στο()

  • Συμβολοσειρά στο()

  • RegExp /d

  • Object.hasOwn()

  • σφάλμα.αιτία

  • αναμονή εισαγωγής

  • Ιδιωτικές μέθοδοι και πεδία

  • Δηλώσεις πεδίου τάξης

Προειδοποίηση

Αυτά τα χαρακτηριστικά είναι σχετικά νέα.

Τα παλαιότερα προγράμματα περιήγησης ενδέχεται να χρειάζονται εναλλακτικό κωδικό (Polyfill)

Συμβολοσειρά JavaScript ReplaceAll()

Το ES2021 εισήγαγε τη μέθοδο συμβολοσειράς replaceAll():

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος replaceAll() σάς επιτρέπει να καθορίσετε ένα κανονική έκφραση αντί για συμβολοσειρά που θα αντικατασταθεί.

Εάν η παράμετρος είναι κανονική έκφραση, πρέπει να οριστεί η καθολική σημαία (g), διαφορετικά εμφανίζεται ένα TypeError.

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Σημείωση

Το ES2020 εισήγαγε τη μέθοδο συμβολοσειράς matchAll().

Αριθμητικό διαχωριστικό JavaScript (_)

Το ES2021 δημιούργησε τον αριθμητικό διαχωριστή (_) για να κάνει τους αριθμούς πιο ευανάγνωστους:

Παράδειγμα

const num = 1_000_000_000;

Δοκιμάστε το μόνοι σας →

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

Το διαχωριστικό αριθμών είναι μόνο για οπτική χρήση.

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Ο αριθμητικός διαχωριστής μπορεί να τοποθετηθεί οπουδήποτε σε έναν αριθμό:

Παράδειγμα

const num1 = 1_2_3_4_5;

Δοκιμάστε το μόνοι σας →

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

Σημείωση

Το αριθμητικό διαχωριστικό δεν επιτρέπεται στην αρχή ή στο τέλος ενός αριθμού.

Στο JavaScript μόνο οι μεταβλητές μπορούν να ξεκινούν με _.

Το διαχωριστικό αριθμών υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Ιανουάριο του 2020:

Chrome 75 Edge 79 Firefox 74 Safari 13.1 Opera 67
Jun 2019 Jan 2020 Oct 2019 Sep 2019 Jun 2019

Συστοιχία JavaScript at()

Το ES2022 εισήγαγε τη μέθοδο πίνακα at():

Παραδείγματα

Αποκτήστε το τρίτο στοιχείο των φρούτων:

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

Δοκιμάστε το μόνοι σας →

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

Αποκτήστε το τρίτο στοιχείο των φρούτων:

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

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος at() επιστρέφει ένα στοιχείο με ευρετήριο από έναν πίνακα.

Η μέθοδος at() επιστρέφει το ίδιο με το [].

Η μέθοδος at() υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Μάρτιο του 2022:

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

Σημείωση

Πολλές γλώσσες επιτρέπουν στην ευρετηρίαση αρνητικών αγκύλων όπως [-1] να έχουν πρόσβαση σε στοιχεία από το τέλος ενός αντικείμενο/πίνακας/συμβολοσειρά.

Αυτό δεν είναι δυνατό στη JavaScript, επειδή το [] χρησιμοποιείται για πρόσβαση τόσο σε πίνακες όσο και σε αντικείμενα. Το obj[-1] αναφέρεται στην τιμή του κλειδιού -1, όχι στην τελευταία ιδιότητα του αντικειμένου.

Η μέθοδος at() εισήχθη στο ES2022 για την επίλυση αυτού του προβλήματος.

Συμβολοσειρά JavaScript at()

Το ES2022 εισήγαγε τη μέθοδο συμβολοσειράς at():

Παραδείγματα

Λάβετε το τρίτο γράμμα του ονόματος:

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

Δοκιμάστε το μόνοι σας →

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

Λάβετε το τρίτο γράμμα του ονόματος:

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

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος at() επιστρέφει ένα στοιχείο με ευρετήριο από μια συμβολοσειρά.

Η μέθοδος at() επιστρέφει το ίδιο με το [].

Η μέθοδος at() υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης από τον Μάρτιο του 2022:

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