Hier finden Sie Beispiele für alles Neue in ECMAScript 2016, 2017 und 2018

Es ist schwierig zu verfolgen, was in JavaScript (ECMAScript) neu ist. Und es ist noch schwieriger, nützliche Codebeispiele zu finden.

In diesem Artikel werde ich daher alle 18 Funktionen behandeln, die in den fertigen Vorschlägen des TC39 aufgeführt sind, die in ES2016, ES2017 und ES2018 (endgültiger Entwurf) hinzugefügt wurden, und sie mit nützlichen Beispielen zeigen.

Dies ist ein ziemlich langer Beitrag, der aber leicht zu lesen sein sollte. Stellen Sie sich dies als "Netflix-Binge-Reading" vor. Am Ende verspreche ich, dass Sie eine Menge Wissen über all diese Funktionen haben werden.

OK, lassen Sie uns diese nacheinander durchgehen.

1. Array.prototype.includes

include ist eine einfache Instanzmethode für das Array und hilft dabei, leicht zu finden, ob sich ein Element im Array befindet (einschließlich NaN im Gegensatz zu indexOf).

ECMAScript 2016 oder ES7 - Array.prototype.includes ()
Wissenswertes: Die JavaScript-Spezifikation, die die Leute nennen wollten, enthält sie, aber diese wurde anscheinend bereits von Mootools verwendet, sodass sie Includes verwendeten.

2. Exponentiation-Infix-Operator

Mathematische Operationen wie Addition und Subtraktion haben Infixoperatoren wie + bzw. -. Ähnlich wie bei ihnen wird der Infix-Operator ** häufig für die Exponentenoperation verwendet. In ECMAScript 2016 wurde anstelle von Math.pow das ** eingeführt.

ECMAScript 2016 oder ES7 - ** Exponenten-Infix-Operator

1. Object.values ​​()

Object.values ​​() ist eine neue Funktion, die Object.keys () ähnelt, jedoch alle Werte der eigenen Eigenschaften des Objekts mit Ausnahme aller Werte in der prototypischen Kette zurückgibt.

ECMAScript 2017 (ES8) - Object.values ​​()

2. Object.entries ()

Object.entries () ist mit Object.keys verwandt, aber anstatt nur Schlüssel zurückzugeben, werden sowohl Schlüssel als auch Werte in Array-Form zurückgegeben. Dies macht es sehr einfach, Objekte in Schleifen zu verwenden oder Objekte in Maps zu konvertieren.

Beispiel 1:

ECMAScript 2017 (ES8) - Verwenden von Object.entries () in Schleifen

Beispiel 2:

ECMAScript 2017 (ES8) - Verwenden von Object.entries () zum Konvertieren von Object in Map

3. Stringauffüllung

String wurden zwei Instanzmethoden hinzugefügt - String.prototype.padStart und String.prototype.padEnd - mit denen entweder eine leere Zeichenfolge oder eine andere Zeichenfolge an den Anfang oder das Ende der ursprünglichen Zeichenfolge angehängt / vorangestellt werden kann.

'someString'.padStart (numberOfCharcters [, stringForPadding]); 
'5'.padStart (10) //' 5 '' 5'.padStart (10, '= *') // '= * = * = * = * = 5'
'5'.padEnd (10) //' 5 '' 5'.padEnd (10, '= *') // '5 = * = * = * = * ='
Dies ist praktisch, wenn wir Dinge in Szenarien wie hübscher Druckanzeige oder Terminaldruck ausrichten möchten.

3.1 padStart Beispiel:

Im folgenden Beispiel haben wir eine Liste von Nummern unterschiedlicher Länge. Wir möchten "0" voranstellen, damit alle Elemente zu Anzeigezwecken die gleiche Länge von 10 Stellen haben. Wir können padStart (10, '0') verwenden, um dies einfach zu erreichen.

ECMAScript 2017 - PadStart-Beispiel

3.2 padEnd Beispiel:

padEnd ist sehr praktisch, wenn wir mehrere Elemente unterschiedlicher Länge drucken und sie richtig ausrichten möchten.

Das folgende Beispiel ist ein gutes realistisches Beispiel dafür, wie padEnd, padStart und Object.entries zusammenkommen, um eine schöne Ausgabe zu erzielen.

ECMAScript 2017 - Beispiel padEnd, padStart und Object.Entries
const cars = {'BMW': '10', 'Tesla': '5', 'Lamborghini': '0'}
Object.entries (cars) .map (([name, count]) => {// padEnd hängt '-' an, bis der Name 20 Zeichen beträgt // padStart stellt '0' voran, bis die Anzahl 3 Zeichen beträgt. Console.log ( $ {name.padEnd (20, '-')} Count: $ {count.padStart (3, '0')} `)});
// Druckt .. // BMW - - - - - - - Anzahl: 010 // Tesla - - - - - - Anzahl: 005 // Lamborghini - - - Anzahl: 000

3.3 padStart und padEnd auf Emojis und anderen Doppelbyte-Zeichen

Emojis und andere Doppelbyte-Zeichen werden mit mehreren Unicode-Bytes dargestellt. PadStart und padEnd funktionieren also möglicherweise nicht wie erwartet!

Zum Beispiel: Nehmen wir an, wir versuchen, das String-Herz aufzufüllen, um mit dem -Emoji 10 Zeichen zu erreichen. Das Ergebnis sieht wie folgt aus:

// Beachten Sie, dass es anstelle von 5 Herzen nur 2 Herzen und 1 Herz gibt, die seltsam aussehen! 'heart'.padStart (10, ""); // druckt .. '❤Herz'

Dies liegt daran, dass 2 Codepunkte lang ist ('\ u2764 \ uFE0F')! Das Wort Herz selbst besteht aus 5 Zeichen, sodass wir nur noch insgesamt 5 Zeichen zum Auffüllen haben. Was also passiert ist, dass JS zwei Herzen mit '\ u2764 \ uFE0F' auffüllt und das erzeugt. Für das letzte wird einfach das erste Byte des Herzens verwendet, das ❤ erzeugt

Am Ende haben wir also: eartHerz

PS: Über diesen Link können Sie Unicode-Zeichenkonvertierungen überprüfen.

4. Object.getOwnPropertyDescriptors

Diese Methode gibt alle Details (einschließlich Getter-Get- und Setter-Set-Methoden) für alle Eigenschaften eines bestimmten Objekts zurück. Die Hauptmotivation, dies hinzuzufügen, besteht darin, das flache Kopieren / Klonen eines Objekts in ein anderes Objekt zu ermöglichen, das im Gegensatz zu Object.assign auch Getter- und Setter-Funktionen kopiert.

Object.assign flat kopiert alle Details mit Ausnahme der Getter- und Setter-Funktionen des ursprünglichen Quellobjekts.

Das folgende Beispiel zeigt den Unterschied zwischen Object.assign und Object.getOwnPropertyDescriptors zusammen mit Object.defineProperties, um ein Originalobjekt Car in ein neues Objekt ElectricCar zu kopieren. Sie werden sehen, dass mithilfe von Object.getOwnPropertyDescriptors auch Rabatt-Getter- und Setter-Funktionen in das Zielobjekt kopiert werden.

VOR…

Vorher - Verwenden von Object.assign

NACH DEM…

ECMAScript 2017 (ES8) - Object.getOwnPropertyDescriptors
var Car = {Name: 'BMW', Preis: 1000000, Set Discount (x) {this.d = x; }, get discount () {return this.d; },};
// Details der Eigenschaft 'discount' des Autoobjekts ausgeben console.log (Object.getOwnPropertyDescriptor (Car, 'discount')); // druckt .. // {// get: [Funktion: get], // set: [Funktion: set], // enumerable: true, // konfigurierbar: true //}
// Eigenschaften des Autos mit Object.assign in ElectricCar kopieren const ElectricCar = Object.assign ({}, Car);
// Details der Eigenschaft 'discount' des ElectricCar-Objekts ausgeben console.log (Object.getOwnPropertyDescriptor (ElectricCar, 'discount')); // druckt .. // {// Wert: undefiniert, // beschreibbar: wahr, // aufzählbar: wahr, // konfigurierbar: wahr //} // Beachten Sie, dass Getter und Setter im ElectricCar-Objekt für 'Rabatt fehlen 'Eigentum! 
// Kopieren Sie die Eigenschaften des Autos mit Object.defineProperties nach ElectricCar2 // und extrahieren Sie die Eigenschaften des Autos mit Object.getOwnPropertyDescriptors const ElectricCar2 = Object.defineProperties ({}, Object.getOwnPropertyDescriptors (Car));
// Details der Eigenschaft 'discount' des ElectricCar2-Objekts drucken console.log (Object.getOwnPropertyDescriptor (ElectricCar2, 'discount')); // druckt .. // {get: [Funktion: get],  // set: [Funktion: set],  // aufzählbar: wahr, // konfigurierbar: wahr / /} // Beachten Sie, dass Getter und Setter im ElectricCar2-Objekt für die Eigenschaft 'discount' vorhanden sind!

5. Fügen Sie nachfolgende Kommas in die Funktionsparameter ein

Dies ist ein kleines Update, mit dem nach dem letzten Funktionsparameter nachgestellte Kommas gesetzt werden können. Warum? Um mit Tools wie Git Blame zu helfen, um sicherzustellen, dass nur neue Entwickler beschuldigt werden.

Das folgende Beispiel zeigt das Problem und die Lösung.

ECMAScript 2017 (ES 8) - Nachkomma im Funktionsparameter
Hinweis: Sie können Funktionen auch mit nachgestellten Kommas aufrufen!

6. Async / Warten

Dies ist bei weitem die wichtigste und nützlichste Funktion, wenn Sie mich fragen. Mit asynchronen Funktionen können wir uns nicht mit der Rückrufhölle befassen und den gesamten Code einfach aussehen lassen.

Das Schlüsselwort async weist den JavaScript-Compiler an, die Funktion anders zu behandeln. Der Compiler hält an, wenn er das Schlüsselwort await innerhalb dieser Funktion erreicht. Es wird davon ausgegangen, dass der Ausdruck nach dem Warten ein Versprechen zurückgibt und wartet, bis das Versprechen gelöst oder abgelehnt wurde, bevor er weitergeht.

Im folgenden Beispiel ruft die Funktion getAmount zwei asynchrone Funktionen getUser und getBankBalance auf. Wir können dies vielversprechend tun, aber die Verwendung von Async Wait ist eleganter und einfacher.

ECMAScript 2017 (ES 8) - Async Await Basisbeispiel

6.1 Asynchrone Funktionen geben selbst ein Versprechen zurück.

Wenn Sie auf das Ergebnis einer asynchronen Funktion warten, müssen Sie die Syntax von Promise verwenden, um das Ergebnis zu erfassen.

Im folgenden Beispiel möchten wir das Ergebnis mit console.log protokollieren, jedoch nicht innerhalb von doubleAndAdd. Wir möchten also warten und dann die Syntax verwenden, um das Ergebnis an console.log zu übergeben.

ECMAScript 2017 (ES 8) - Async Await selbst gibt Promise zurück

6.2 Paralleles Aufrufen von async / await

Im vorherigen Beispiel rufen wir zweimal an, aber jedes Mal warten wir auf eine Sekunde (insgesamt 2 Sekunden). Stattdessen können wir es parallelisieren, da a und b mit Promise.all nicht voneinander abhängig sind.

ECMAScript 2017 (ES 8) - Verwenden von Promise.all zum Parallelisieren von Async / Warten

6.3 Fehler beim Behandeln von Async / Wait-Funktionen

Es gibt verschiedene Möglichkeiten, Fehler bei der Verwendung von Async Wait zu behandeln.

Option 1 - Verwenden Sie try catch innerhalb der Funktion

ECMAScript 2017 - Verwenden Sie try catch in der Funktion async / await
// Option 1 - Verwenden Sie try catch innerhalb der asynchronen Funktion doubleAndAdd (a, b) {try {a = warte auf doubleAfter1Sec (a); b = warte auf doubleAfter1Sec (b); } catch (e) {return NaN; //etwas zurückbringen }
return a + b; } // Usage: doubleAndAdd ('one', 2) .then (console.log); // NaN doubleAndAdd (1, 2) .then (console.log); // 6
Funktion doubleAfter1Sec (param) {neues Versprechen zurückgeben ((auflösen, ablehnen) => {setTimeout (function () {val = param * 2 lassen; isNaN (val)? ablehnen (NaN): auflösen (val);}, 1000) ;}); }}

Option 2 - Fangen Sie jeden erwarteten Ausdruck ab

Da jeder Warte-Ausdruck ein Versprechen zurückgibt, können Sie Fehler in jeder Zeile wie unten gezeigt abfangen.

ECMAScript 2017 - Verwenden Sie try catch für jeden erwarteten Ausdruck
// Option 2 - * Catch * -Fehler in jeder Wartezeile // da jeder Warteausdruck ein Versprechen für sich ist asynchrone Funktion doubleAndAdd (a, b) {a = warte auf doubleAfter1Sec (a) .catch (e => console.log ( '"a" ist NaN')); //  b = warte auf doubleAfter1Sec (b) .catch (e => console.log ('"b" ist NaN')); //  if (! A ||! B) {return NaN; } return a + b; }}
// Usage: doubleAndAdd ('one', 2) .then (console.log); // NaN und Protokolle: "a" ist NaN doubleAndAdd (1, 2) .then (console.log); // 6
Funktion doubleAfter1Sec (param) {neues Versprechen zurückgeben ((auflösen, ablehnen) => {setTimeout (function () {val = param * 2 lassen; isNaN (val)? ablehnen (NaN): auflösen (val);}, 1000) ;}); }}

Option 3 - Erfassen Sie die gesamte Async-Wait-Funktion

ECMAScript 2017 - Fangen Sie am Ende die gesamte Async / Wait-Funktion ab
// Option 3 - Tun Sie nichts anderes als das Behandeln außerhalb der Funktion // da async / await ein Versprechen zurückgibt, können wir den Fehler der gesamten Funktion abfangen async function doubleAndAdd (a, b) {a = warte auf doubleAfter1Sec (a); b = warte auf doubleAfter1Sec (b); return a + b; }}
// Usage: doubleAndAdd ('one', 2) .then (console.log) .catch (console.log); //  <------- benutze "catch"
Funktion doubleAfter1Sec (param) {neues Versprechen zurückgeben ((auflösen, ablehnen) => {setTimeout (function () {val = param * 2 lassen; isNaN (val)? ablehnen (NaN): auflösen (val);}, 1000) ;}); }}
ECMAScript befindet sich derzeit im endgültigen Entwurf und wird im Juni oder Juli 2018 veröffentlicht. Alle unten aufgeführten Funktionen befinden sich in Phase 4 und werden Teil von ECMAScript 2018 sein.

1. Shared Memory und Atomics

Dies ist eine riesige, ziemlich erweiterte Funktion und eine Kernverbesserung für JS-Engines.

Die Hauptidee besteht darin, eine Art Multithreading-Funktion in JavaScript zu integrieren, damit JS-Entwickler in Zukunft leistungsstarke, gleichzeitige Programme schreiben können, indem sie die Speicherverwaltung selbst ermöglichen, anstatt die JS-Engine die Speicherverwaltung zuzulassen.

Dies geschieht durch einen neuen Typ eines globalen Objekts namens SharedArrayBuffer, der im Wesentlichen Daten in einem gemeinsam genutzten Speicherbereich speichert. Diese Daten können also zwischen dem JS-Hauptthread und den Webworker-Threads gemeinsam genutzt werden.

Bisher mussten wir die Daten kopieren und mit postMessage an den anderen Thread senden, wenn wir Daten zwischen dem Haupt-JS-Thread und den Web-Workern austauschen möchten. Nicht mehr!

Sie verwenden einfach SharedArrayBuffer und die Daten sind sofort sowohl für den Hauptthread als auch für mehrere Webworker-Threads zugänglich.

Das Teilen des Speichers zwischen Threads kann jedoch zu Race-Bedingungen führen. Um Rennbedingungen zu vermeiden, wird das globale Objekt „Atomics“ eingeführt. Atomics bietet verschiedene Methoden zum Sperren des gemeinsam genutzten Speichers, wenn ein Thread seine Daten verwendet. Es bietet auch Methoden zum sicheren Aktualisieren solcher Daten in diesem gemeinsam genutzten Speicher.

Es wird empfohlen, diese Funktion über eine Bibliothek zu verwenden. Derzeit sind jedoch keine Bibliotheken auf dieser Funktion aufgebaut.

Wenn Sie interessiert sind, empfehle ich zu lesen:

  1. Vom Arbeiter zum gemeinsamen Gedächtnis - lucasfcosta
  2. Ein Cartoon-Intro zu SharedArrayBuffers - Lin Clark
  3. Shared Memory und Atomics - Dr. Axel Rauschmayer

2. Markierte Template-Literal-Einschränkung entfernt

Zunächst müssen wir klären, was ein "Tagged Template-Literal" ist, damit wir diese Funktion besser verstehen können.

In ES2015 + gibt es eine Funktion namens Tagged Template Literal, mit der Entwickler die Interpolation von Zeichenfolgen anpassen können. Zum Beispiel werden Strings auf die übliche Weise wie folgt interpoliert…

Im markierten Literal können Sie eine Funktion schreiben, um die fest codierten Teile des String-Literal zu empfangen, z. B. ['Hallo', '!' ] und die Ersetzungsvariablen, z. B. ['Raja'], als Parameter in eine benutzerdefinierte Funktion (z. B. Begrüßung) und geben von dieser benutzerdefinierten Funktion alles zurück, was Sie möchten.

Das folgende Beispiel zeigt, dass unsere benutzerdefinierte Begrüßungsfunktion "Tag" die Tageszeit wie "Guten Morgen!" "Guten Tag" usw. abhängig von der Tageszeit zum Zeichenfolgenliteral und gibt eine benutzerdefinierte Zeichenfolge zurück.

Beispiel für eine Tag-Funktion, die eine benutzerdefinierte Zeichenfolgeninterpolation zeigt
// Eine "Tag" -Funktion gibt ein benutzerdefiniertes String-Literal zurück. // In diesem Beispiel ruft greet timeGreet () auf, um je nach Tageszeit Guten Morgen / Nachmittag / Abend anzuhängen.
Funktion greet (hardCodedPartsArray, ... replacePartsArray) {console.log (hardCodedPartsArray); //[ 'Hallo ', '!' ] console.log (replacePartsArray); // ['Raja']
sei str = ''; hardCodedPartsArray.forEach ((string, i) => {if (i 
// Usage: const firstName = 'Raja'; const greetings = greet`Hello $ {firstName}! `; //  <- Markiertes Literal
console.log (Grüße); // 'Hallo Raja! Guten Morgen!' 
Funktion timeGreet () {const hr = neues Datum (). getHours (); Rückgabe hr <12? 'Guten Morgen!' : h <18? 'Guten Tag!' : 'Guten Abend!'; }}

Nachdem wir nun besprochen haben, was "Tagged" -Funktionen sind, möchten viele Benutzer diese Funktion in verschiedenen Domänen verwenden, z. B. im Terminal für Befehle und HTTP-Anforderungen zum Erstellen von URIs usw.

Das Problem mit dem Tagged String-Literal

Das Problem ist, dass die ES2015- und ES2016-Spezifikationen die Verwendung von Escape-Zeichen wie "\ u" (Unicode), "\ x" (hexadezimal) nicht zulassen, es sei denn, sie sehen genau wie "\ u00A9" oder \ u {2F804} oder \ xA9 aus.

Wenn Sie also eine Tagged-Funktion haben, die intern die Regeln einer anderen Domäne verwendet (z. B. die Regeln des Terminals), die möglicherweise \ ubla123abla verwenden muss, das nicht wie \ u0049 oder \ u {@ F804} aussieht, wird ein Syntaxfehler angezeigt .

In ES2018 werden die Regeln gelockert, um solche scheinbar ungültigen Escape-Zeichen zuzulassen, solange die Tagged-Funktion die Werte in einem Objekt mit einer "gekochten" Eigenschaft (wobei ungültige Zeichen "undefiniert" sind) und dann einer "rohen" Eigenschaft ( mit was auch immer du willst).

Funktion myTagFunc (str) {return {"gekocht": "undefiniert", "roh": str.raw [0]}} var str = myTagFunc `hi \ ubla123abla`; // myTagFunc str aufrufen // {gekocht: "undefiniert", roh: "hi \\ unicode"}

3. "dotall" -Flag für regulären Ausdruck

Derzeit in RegEx, obwohl der Punkt (".") Mit einem einzelnen Zeichen übereinstimmen soll, stimmt er nicht mit neuen Zeilenzeichen wie \ n \ r \ f usw. überein.

Beispielsweise:

// Vor /first.second/.test('first\nsecond '); //falsch

Diese Verbesserung ermöglicht es dem Punktoperator, mit jedem einzelnen Zeichen übereinzustimmen. Um sicherzustellen, dass dies nichts kaputt macht, müssen wir beim Erstellen des RegEx das Flag \ s verwenden, damit dies funktioniert.

// ECMAScript 2018 /first.second/s.test('first\nsecond '); // true Hinweis: / s 

Hier ist die Gesamt-API aus dem Vorschlagsdokument:

ECMAScript 2018 - Die Regex dotAll-Funktion ermöglicht das Abgleichen von geraden \ n über

4. RegExp Named Group Captures

Diese Erweiterung bringt eine nützliche RegExp-Funktion aus anderen Sprachen wie Python, Java usw. mit dem Namen "Named Groups". Mit dieser Funktion können Entwickler, die RegExp schreiben, Namen (Bezeichner) im Format (? ...) für verschiedene Teile der Gruppe im RegExp. Mit diesem Namen können sie dann problemlos die gewünschte Gruppe auswählen.

4.1 Grundlegendes Beispiel für eine benannte Gruppe

Im folgenden Beispiel verwenden wir (? ) (? ) und (? ) Namen, um verschiedene Teile des Datums RegEx zu gruppieren. Das resultierende Objekt enthält jetzt eine Gruppeneigenschaft mit den Eigenschaften Jahr, Monat und Tag mit entsprechenden Werten.

ECMAScript 2018 - Beispiel für Regex-benannte Gruppen

4.2 Benannte Gruppen in Regex selbst verwenden

Wir können das \ k verwenden Format, um auf die Gruppe innerhalb des regulären Ausdrucks selbst zu verweisen. Das folgende Beispiel zeigt, wie es funktioniert.

ECMAScript 2018 - Regex benannte Gruppen, die über \ k zurückverweisen <group name>

4.3 Verwenden benannter Gruppen in String.prototype.replace

Die benannte Gruppenfunktion ist jetzt in die Ersetzungsinstanzmethode von String integriert. So können wir leicht Wörter in der Zeichenfolge austauschen.

Ändern Sie beispielsweise "Vorname, Nachname" in "Nachname, Vorname".

ECMAScript 2018 - Verwenden der RegEx-Funktion für benannte Gruppen in der Ersetzungsfunktion

5. Resteigenschaften für Objekte

Mit dem Restoperator ... (drei Punkte) können Objekteigenschaften extrahiert werden, die noch nicht extrahiert wurden.

5.1 Mit rest können Sie nur die gewünschten Eigenschaften extrahieren

ECMAScript 2018 - Objektzerstörung über Ruhe

5.2 Noch besser, Sie können unerwünschte Gegenstände entfernen!

ECMAScript 2018 - Objektzerstörung über Ruhe

6. Verteilen Sie Eigenschaften für Objekte

Spread-Eigenschaften sehen genauso aus wie Rest-Eigenschaften mit drei Punkten ... aber der Unterschied besteht darin, dass Sie Spread verwenden, um neue Objekte zu erstellen (umzustrukturieren).

Tipp: Der Spread-Operator wird auf der rechten Seite des Gleichheitszeichens verwendet. Der Rest wird auf der linken Seite des Gleichheitszeichens verwendet.
ECMAScript 2018 - Objektumstrukturierung über Spread

7. RegExp Lookbehind Assertions

Dies ist eine Erweiterung von RegEx, mit der wir sicherstellen können, dass eine Zeichenfolge unmittelbar * vor * einer anderen Zeichenfolge vorhanden ist.

Sie können jetzt eine Gruppe (? <=…) (Fragezeichen, kleiner als, gleich) verwenden, um nach einer positiven Behauptung zu suchen.

Weiter können Sie verwenden (?

Positive Behauptung: Nehmen wir an, wir möchten sicherstellen, dass das # -Zeichen vor dem Wort "Winning" (dh "#winning") vorhanden ist und dass der reguläre Ausdruck nur die Zeichenfolge "Winning" zurückgibt. So würden Sie es schreiben.

ECMAScript 2018 - (? <=…) Für eine positive Aussage

Negative Behauptung: Nehmen wir an, wir möchten Zahlen aus Zeilen extrahieren, die vor diesen Zahlen € -Zeichen und keine $ -Zeichen haben.

ECMAScript 2018 - (?

8. RegExp Unicode Property Escapes

Es war nicht einfach, RegEx so zu schreiben, dass es mit verschiedenen Unicode-Zeichen übereinstimmt. Dinge wie \ w, \ W, \ d usw. stimmen nur mit englischen Zeichen und Zahlen überein. Aber was ist mit Zahlen in anderen Sprachen wie Hindi, Griechisch und so weiter?

Hier kommen Unicode-Eigenschafts-Escapes ins Spiel. Es stellt sich heraus, dass Unicode Metadateneigenschaften für jedes Symbol (Zeichen) hinzufügt und es zum Gruppieren oder Charakterisieren verschiedener Symbole verwendet.

Beispielsweise gruppiert die Unicode-Datenbank alle Hindi-Zeichen (हिन्दी) unter einer Eigenschaft namens Script mit dem Wert Devanagari und einer anderen Eigenschaft namens Script_Extensions mit demselben Wert Devanagari. So können wir nach Script = Devanagari suchen und alle Hindi-Zeichen erhalten.

Devanagari kann für verschiedene indische Sprachen wie Marathi, Hindi, Sanskrit usw. verwendet werden.

Ab ECMAScript 2018 können wir \ p verwenden, um Zeichen zusammen mit {Script = Devanagari} zu maskieren, um all diesen indischen Zeichen zu entsprechen. Das heißt, wir können Folgendes verwenden: \ p {Script = Devanagari} im RegEx, um alle Devanagari-Zeichen abzugleichen.

ECMAScript 2018 - zeigt \ p
// Das Folgende stimmt mit mehreren Hindi-Zeichen überein / ^ \ p {Script = Devanagari} + $ / u.test ('हिन्दी'); // true // PS: Es gibt 3 Hindi-Zeichen h

In ähnlicher Weise gruppiert die Unicode-Datenbank alle griechischen Zeichen unter der Eigenschaft Script_Extensions (und Script) mit dem Wert Greek. So können wir mit Script_Extensions = Greek oder Script = Greek nach allen griechischen Zeichen suchen.

Das heißt, wir können Folgendes verwenden: \ p {Script = Greek} im RegEx, um alle griechischen Zeichen abzugleichen.

ECMAScript 2018 - zeigt \ p
// Das Folgende stimmt mit einem einzelnen griechischen Zeichen überein /\p{Script_Extensions=Greek}/u.test('π '); // wahr

Darüber hinaus speichert die Unicode-Datenbank verschiedene Arten von Emojis unter den booleschen Eigenschaften Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier und Emoji_Modifier_Base mit den Eigenschaftswerten "true". So können wir nach allen Emojis suchen, indem wir einfach Emoji auswählen, um wahr zu sein.

Das heißt, wir können Folgendes verwenden: \ p {Emoji}, \ Emoji_Modifier usw., um verschiedene Arten von Emojis abzugleichen.

Das folgende Beispiel macht alles klar.

ECMAScript 2018 - zeigt, wie \ p für verschiedene Emojis verwendet werden kann
// Das Folgende stimmt mit einem Emoji-Zeichen überein /\p{Emoji}/u.test(' '); //wahr
// Folgendes schlägt fehl, weil gelbe Emojis keinen Emoji_Modifier benötigen / haben! /\p{Emoji}\p{Emoji_Modifier}/u.test('️ '); //falsch
// Das Folgende stimmt mit einem Emoji-Zeichen überein \ p {Emoji} gefolgt von \ p {Emoji_Modifier} /\p{Emoji}\p{Emoji_Modifier}/u.test(' '); //wahr
// Erklärung: // Standardmäßig ist das Sieges-Emoji gelb. // Wenn wir eine braune, schwarze oder andere Variation desselben Emoji verwenden, werden sie // als Variationen des ursprünglichen Emoji betrachtet und mit zwei Unicode-Zeichen dargestellt. // Eines für das ursprüngliche Emoji, gefolgt von einem weiteren Unicode-Zeichen für die Farbe. // // Im folgenden Beispiel werden zwar nur ein einziges braunes Sieg-Emoji angezeigt, // es werden jedoch tatsächlich zwei Unicode-Zeichen verwendet, eines für das Emoji und eines für die braune Farbe. // // In der Unicode-Datenbank haben diese Farben die Emoji_Modifier-Eigenschaft. // Wir müssen also sowohl \ p {Emoji} als auch \ p {Emoji_Modifier} verwenden, um // das braune Emoji richtig und vollständig abzugleichen. /\p{Emoji}\p{Emoji_Modifier}/u.test(' '); //wahr

Zuletzt können wir das Escapezeichen "P" (\ P) anstelle des kleinen p (\ p) verwenden, um die Übereinstimmungen zu negieren.

Verweise:

  1. Vorschlag für ECMAScript 2018
  2. https://mathiasbynens.be/notes/es-unicode-property-escapes

8. Promise.prototype.finally ()

finally () ist eine neue Instanzmethode, die Promise hinzugefügt wurde. Die Hauptidee besteht darin, das Ausführen eines Rückrufs nach dem Auflösen oder Ablehnen zuzulassen, um das Aufräumen zu erleichtern. Der endgültige Rückruf wird ohne Wert aufgerufen und immer ausgeführt, egal was passiert.

Schauen wir uns verschiedene Fälle an.

ECMAScript 2018 - endlich () im LösungsfallECMAScript 2018 - endlich () im AblehnungsfallECMASCript 2018 - finally () in Fehler aus Promise-FallECMAScript 2018 - Fehler aus dem Fall ** catch **

9. Asynchrone Iteration

Dies ist eine * äußerst * nützliche Funktion. Grundsätzlich können wir damit mühelos asynchrone Codeschleifen erstellen!

Diese Funktion fügt eine neue "for-await-of" -Schleife hinzu, mit der wir asynchrone Funktionen aufrufen können, die Versprechen (oder Arrays mit einer Reihe von Versprechen) in einer Schleife zurückgeben. Das Coole ist, dass die Schleife darauf wartet, dass jedes Versprechen aufgelöst wird, bevor sie zur nächsten Schleife übergeht.

ECMAScript 2018 - Async Iterator über for-await-of

Das wars so ziemlich!

Wenn dies nützlich war, klicken Sie bitte einige Male unten auf die Schaltfläche "Klatschen", um Ihre Unterstützung zu zeigen! ⬇⬇⬇

Meine anderen Beiträge

https://medium.com/@rajaraodv/latest

Verwandte ECMAScript 2015+ Beiträge

  1. Lesen Sie diese nützlichen Tipps und Tricks zu ECMAScript 2015 (ES6)
  2. 5 JavaScript-fehlerhafte Teile, die in ES6 behoben wurden
  3. Ist "Klasse" in ES6 der neue "schlechte" Teil?