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

Es ist schwierig, den Überblick über die neuen Funktionen von JavaScript (ECMAScript) zu behalten. Und es ist noch schwieriger, nützliche Codebeispiele zu finden.

In diesem Artikel werde ich 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 jedoch leicht zu lesen sein sollte. Stellen Sie sich dies als "Netflix-Binge-Reading" vor. Zum Schluss verspreche ich Ihnen, dass Sie eine Menge Wissen über all diese Funktionen haben werden.

OK, lassen Sie uns diese nacheinander durchgehen.

1. Array.prototype.includes

Includes 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, deren Namen sie enthalten wollten, wurde anscheinend bereits von Mootools verwendet, sodass sie Includes verwendete.

2. Potenzierungs-Infix-Operator

Mathematische Operationen wie Addition und Subtraktion haben Infix-Operatoren wie + und -. Ähnlich wie bei ihnen wird der Operator ** infix häufig für die Exponentenoperation verwendet. In ECMAScript 2016 wurde das ** anstelle von Math.pow 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 objekteigenen Eigenschaften 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, gibt jedoch nicht nur Schlüssel, sondern sowohl Schlüssel als auch Werte in der Art eines Arrays zurück. Dadurch ist 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) - Konvertieren von Objekten in Karten mithilfe von Object.entries ()

3. Saitenpolsterung

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 bzw. 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 nützlich, wenn Sie Dinge in Szenarien wie hübschem Druck oder Terminaldruck ausrichten möchten.

3.1 padStart Beispiel:

Im folgenden Beispiel haben wir eine Liste mit 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 besonders praktisch, wenn wir mehrere Objekte unterschiedlicher Länge drucken und diese richtig ausrichten möchten.

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

ECMAScript 2017 - Beispiel für 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 enthält
  // 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 - - - - - - Count: 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. Daher funktionieren padStart und padEnd möglicherweise nicht wie erwartet!

Beispiel: Nehmen wir an, wir versuchen, das Zeichenfolgenherz aufzufüllen, um 10 Zeichen mit dem Emoji zu erreichen. Das Ergebnis wird wie folgt aussehen:

// Beachte, dass es anstelle von 5 Herzen nur 2 Herzen und 1 Herz gibt, das seltsam aussieht!
'heart'.padStart (10, ""); // druckt .. '❤heart'

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

So enden wir mit: ❤Herz

PS: Über diesen Link können Sie Unicode-Zeichen-Konvertierungen auschecken.

4. Object.getOwnPropertyDescriptors

Diese Methode gibt alle Details (einschließlich der Methoden getter und setter set) 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 Get- und Setter-Funktionen kopiert.

Object.assign shallow kopiert alle Details mit Ausnahme der Get- 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 ursprüngliches Objekt Car in ein neues Objekt ElectricCar zu kopieren. Sie werden feststellen, dass mithilfe von Object.getOwnPropertyDescriptors auch die Funktionen zum Abrufen und Festlegen von Rabatten in das Zielobjekt kopiert werden.

VOR…

Vor der Verwendung von Object.assign

NACH…

ECMAScript 2017 (ES8) - Object.getOwnPropertyDescriptors
var Car = {
 Name: „BMW“,
 Preis: 1000000,
 Rabatt festlegen (x) {
  this.d = x;
 },
 Rabatt erhalten () {
  return this.d;
 },
};
// Gibt Details der 'Rabatt'-Eigenschaft des Autoobjekts aus
console.log (Object.getOwnPropertyDescriptor (Car, 'discount'));
// druckt ..
// {
// get: [Funktion: get],
// set: [Function: set],
// Aufzählung: wahr,
// konfigurierbar: wahr
//}
// Kopieren der Fahrzeugeigenschaften nach ElectricCar mithilfe von Object.assign
const ElectricCar = Object.assign ({}, Car);
// Details der 'discount'-Eigenschaft des ElectricCar-Objekts ausgeben
console.log (Object.getOwnPropertyDescriptor (ElectricCar, 'discount'));
// druckt ..
// {
// Wert: undefiniert,
// beschreibbar: wahr,
// Aufzählung: wahr,
// konfigurierbar: wahr
  
//}
// Bitte beachten Sie, dass im ElectricCar-Objekt für 'discount'-Eigenschaft Get- und Setter fehlen! 
// Die Eigenschaften des Fahrzeugs mit Object.defineProperties nach ElectricCar2 kopieren
// und extrahiere die Eigenschaften von Car mit Object.getOwnPropertyDescriptors
const ElectricCar2 = Object.defineProperties ({}, Object.getOwnPropertyDescriptors (Car));
// Details der 'discount'-Eigenschaft des ElectricCar2-Objekts ausgeben
console.log (Object.getOwnPropertyDescriptor (ElectricCar2, 'discount'));
// druckt ..
// {get: [Function: get], 
// set: [Function: set], 
// Aufzählung: wahr,
// konfigurierbar: wahr
//}
// Beachten Sie, dass Getter und Setter im ElectricCar2-Objekt für die Eigenschaft 'discount' vorhanden sind!

5. Fügen Sie in den Funktionsparametern nachstehende Kommas hinzu

Dies ist ein kleines Update, bei dem nach dem letzten Funktionsparameter ein Komma nachgestellt werden kann. Warum? Um mit Tools wie Git Schuld zu helfen, um sicherzustellen, dass nur neue Entwickler Schuld bekommen.

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

ECMAScript 2017 (ES 8) - Nachgestelltes Komma im Funktionsparameter
Hinweis: Sie können Funktionen auch mit Anführungszeichen aufrufen!

6. Async / Await

Dies ist bei weitem das wichtigste und nützlichste Merkmal, wenn Sie mich fragen. Mit Async-Funktionen können wir die Rückruf-Hölle umgehen und den gesamten Code einfach aussehen lassen.

Das Schlüsselwort async weist den JavaScript-Compiler an, die Funktion anders zu behandeln. Der Compiler wird angehalten, wenn das Schlüsselwort await in dieser Funktion erreicht ist. Es wird davon ausgegangen, dass der Ausdruck after await ein Versprechen zurückgibt und wartet, bis das Versprechen aufgelöst oder abgelehnt wurde, bevor er fortgesetzt wird.

Im folgenden Beispiel ruft die Funktion getAmount zwei asynchrone Funktionen getUser und getBankBalance auf. Wir können dies versprechen, aber asynchrone Wartezeiten sind eleganter und einfacher.

ECMAScript 2017 (ES 8) - Async Erwarten Sie ein einfaches Beispiel

6.1 Async-Funktionen selbst geben ein Versprechen zurück.

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

Im folgenden Beispiel möchten wir das Ergebnis mit console.log, jedoch nicht mit doubleAndAdd protokollieren. 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 Versprechen zurück

6.2 Async aufrufen / parallel warten

Im vorherigen Beispiel rufen wir zweimal wait auf, aber jedes Mal warten wir 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 / await

6.3 Fehlerbehandlung bei Async / Warten-Funktionen

Es gibt verschiedene Möglichkeiten, um Fehler zu behandeln, wenn Sie async await verwenden.

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 Funktion
asynchrone Funktion doubleAndAdd (a, b) {
 Versuchen {
  a = warte auf doubleAfter1Sec (a);
  b = warte auf doubleAfter1Sec (b);
 } catch (e) {
  return NaN; //etwas zurückbringen
 }
return a + b;
}
// Verwendung:
doubleAndAdd ('one', 2) .then (console.log); // NaN
doubleAndAdd (1, 2) .then (console.log); // 6
Funktion doubleAfter1Sec (param) {
 neues Versprechen zurückgeben ((lösen, ablehnen) => {
  setTimeout (function () {
   sei val = param * 2;
   isNaN (val)? ablehnen (NaN): auflösen (val);
  }, 1000);
 });
}

Option 2 - Fange jeden erwarteten Ausdruck ein

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

ECMAScript 2017 - Verwenden Sie try catch für jeden erwarteten Ausdruck
// Option 2 - * Catch * -Fehler in jeder Wartezeile
// da jeder wait-Ausdruck 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;
}
// Verwendung:
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 ((lösen, ablehnen) => {
  setTimeout (function () {
   sei val = param * 2;
   isNaN (val)? verwerfen (NaN): auflösen (val);
  }, 1000);
 });
}

Option 3 - Fangen Sie die gesamte Async-Funktion ab

ECMAScript 2017 - Fängt die gesamte Async / Warten-Funktion am Ende ab
// Option 3 - Mach nichts anderes als außerhalb der Funktion zu handeln
// Da async / await ein Versprechen zurückgibt, können wir den Fehler der gesamten Funktion abfangen
asynchrone Funktion doubleAndAdd (a, b) {
 a = warte auf doubleAfter1Sec (a);
 b = warte auf doubleAfter1Sec (b);
 return a + b;
}
// Verwendung:
doubleAndAdd ('one', 2)
.then (console.log)
.catch (console.log); //  <------- benutze "catch"
Funktion doubleAfter1Sec (param) {
 neues Versprechen zurückgeben ((lösen, ablehnen) => {
  setTimeout (function () {
   sei val = param * 2;
   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 beschriebenen Funktionen befinden sich in Phase 4 und werden Teil von ECMAScript 2018 sein.

1. Shared Memory und Atomics

Dies ist eine riesige, ziemlich fortschrittliche Funktion und eine wesentliche Verbesserung für JS-Engines.

Die Hauptidee ist, JavaScript mit einer Art Multithreading-Funktion auszustatten, damit JS-Entwickler in Zukunft leistungsstarke, gleichzeitige Programme schreiben können, indem sie die Speicherverwaltung selbst durchführen können, anstatt die JS-Engine den Speicher verwalten zu lassen.

Dies geschieht durch einen neuen Typ eines globalen Objekts mit dem Namen SharedArrayBuffer, in dem Daten im Wesentlichen in einem gemeinsam genutzten Speicherbereich gespeichert werden. Diese Daten können also zwischen dem Haupt-JS-Thread und den Web-Worker-Threads geteilt werden.

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

Sie verwenden einfach SharedArrayBuffer und auf die Daten können sofort sowohl der Haupt-Thread als auch mehrere Web-Worker-Threads zugreifen.

Das Teilen des Speichers zwischen Threads kann jedoch zu Racebedingungen führen. Um Wettkampfbedingungen 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. Außerdem werden Methoden zum sicheren Aktualisieren solcher Daten in diesem gemeinsam genutzten Speicher bereitgestellt.

Es wird empfohlen, diese Funktion über eine Bibliothek zu verwenden. Derzeit gibt es jedoch keine Bibliotheken, die auf dieser Funktion aufbauen.

Wenn Sie interessiert sind, empfehle ich zu lesen:

  1. Von den Arbeitern zum gemeinsamen Speicher - lucasfcosta
  2. Ein Cartoon-Intro zu SharedArrayBuffers - Lin Clark
  3. Shared Memory und Atomics - Dr. Axel Rauschmayer

2. Die Literalbeschränkung für markierte Vorlagen wurde 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 anpassen können, wie Zeichenfolgen interpoliert werden. Zum Beispiel werden Strings in der Standardmethode wie folgt interpoliert ...

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

Das folgende Beispiel zeigt, dass unsere benutzerdefinierte "Tag" -Funktion die Uhrzeit wie "Guten Morgen!", "Guten Tag" usw. an das Zeichenfolgenliteral anfügt und eine benutzerdefinierte Zeichenfolge zurückgibt.

Beispiel für eine Tag-Funktion, die eine benutzerdefinierte String-Interpolation zeigt
// Eine "Tag" -Funktion gibt ein benutzerdefiniertes Zeichenfolgenliteral zurück.
// In diesem Beispiel ruft greet timeGreet () auf, um je nach Tageszeit Good // Morning / Afternoon / Evening anzufügen.
Funktion greet (hardCodedPartsArray, ... replacementPartsArray) {
 console.log (hardCodedPartsArray); //[ 'Hallo ', '!' ]
 console.log (replacementPartsArray); // ['Raja']
let str = '';
 hardCodedPartsArray.forEach ((string, i) => {
  if (i 
// Verwendung:
const firstName = 'Raja';
const greetings = greet`Hello $ {firstName}! `; //  <- Literal mit Tags
console.log (Grüße); // 'Hallo Raja! Guten Morgen!' 
Funktion timeGreet () {
 const hr = new Date (). getHours ();
 return hr <12
  ? 'Guten Morgen!'
  : hr <18? 'Guten Tag!' : 'Guten Abend!';
}

Nachdem wir uns nun mit den „Tagged“ -Funktionen befasst haben, möchten viele Benutzer diese Funktion in verschiedenen Domänen verwenden, z. B. in Terminal für Befehle und HTTP-Anforderungen zum Erstellen von URIs.

Das Problem mit dem Tagged String-Literal

Das Problem ist, dass ES2015- und ES2016-Spezifikationen die Verwendung von Escape-Zeichen wie "\ u" (Unicode), "\ x" (hexadezimal) nur zulassen, wenn sie genau wie "\ u00A9" oder "\ u {2F804} oder \ xA9" aussehen.

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

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 Eigenschaft "cooked" (wobei ungültige Zeichen "undefiniert" sind) und dann einer Eigenschaft "raw" ( mit was immer du willst).

Funktion myTagFunc (str) {
 return {"gekocht": "undefiniert", "roh": str.raw [0]}
}

var str = myTagFunc `hi \ ubla123abla`; // rufe myTagFunc auf

str // {cooked: "undefined", raw: "hi \\ unicode"}

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

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

Zum Beispiel:

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

Diese Verbesserung ermöglicht es dem Punktoperator, jedem einzelnen Zeichen zu entsprechen. Damit dies nicht zu Problemen führt, 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 gesamte API aus dem Vorschlagsdokument:

ECMAScript 2018 - Die Regex dotAll-Funktion ermöglicht den Abgleich auch \ n über das Flag

4. RegExp Named Group Captures

Diese Verbesserung bringt eine nützliche RegExp-Funktion aus anderen Sprachen wie Python, Java usw. namens "Benannte Gruppen". Mit dieser Funktion können Entwickler, die RegExp schreiben, Namen (Bezeichner) im Format (? ...) für verschiedene Teile bereitstellen der Gruppe in der RegExp. Sie können diesen Namen dann verwenden, um mit Leichtigkeit die Gruppe zu finden, die sie benötigen.

4.1 Beispiel für grundlegende benannte Gruppen

Im folgenden Beispiel werden die Namen (? ) (? ) und (? ) verwendet, um verschiedene Teile des Datums RegEx zu gruppieren. Das resultierende Objekt enthält jetzt eine Eigenschaft groups mit den Eigenschaften year, month und day mit entsprechenden Werten.

ECMAScript 2018 - Beispiel für benannte Regex-Gruppen

4.2 Benannte Gruppen in regex selbst verwenden

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

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

4.3 Benannte Gruppen in String.prototype.replace verwenden

Das benannte Gruppen-Feature ist jetzt in die Ersetzungsinstanzmethode von String eingebunden. So können wir Wörter in der Zeichenkette leicht austauschen.

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

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

5. Rest Eigenschaften für Objekte

Mit dem Operator "Rest" (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 durch Ruhe

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

ECMAScript 2018 - Objektzerstörung durch Ruhe

6. Verteilen Sie die Eigenschaften für Objekte

Spread-Eigenschaften sehen auch genauso aus wie Rest-Eigenschaften mit drei Punkten. Der Unterschied besteht jedoch darin, dass Sie Spread verwenden, um neue Objekte zu erstellen (neu zu strukturieren).

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 des 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 Aussage zu suchen.

Außerdem können Sie (?

Positive Behauptung: Nehmen wir an, wir möchten sicherstellen, dass das # -Zeichen vor dem Wort Winning (dh # Winning) vorhanden ist, und möchten, 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 ein € -Zeichen und kein $ -Zeichen vor diesen Zahlen haben.

ECMAScript 2018 - (? <!…) Für negative Behauptungen

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 für jedes Symbol (Zeichen) Metadaten-Eigenschaften hinzufügt und diese 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 dem gleichen Wert Devanagari. Also 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 alle diese indischen Zeichen abzugleichen. Das heißt, wir können in RegEx Folgendes verwenden: \ p {Script = Devanagari}, um alle Devanagari-Zeichen abzugleichen.

ECMAScript 2018 - zeigt \ p
// Das Folgende stimmt mit mehreren Hindi-Zeichen überein
/ ^ \ p {Script = Devanagari} + $ / u.test ('हिन्हिन'); //wahr
// 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 in RegEx Folgendes verwenden: \ p {Script = Greek}, um alle griechischen Zeichen abzugleichen.

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

Ferner speichert die Unicode-Datenbank verschiedene Arten von Emojis unter den booleschen Eigenschaften Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier und Emoji_Modifier_Base mit Eigenschaftswerten wie "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 \ p {Emoji}, \ Emoji_Modifier usw. verwenden, um verschiedene Arten von Emojis zuzuordnen.

Das folgende Beispiel verdeutlicht alles.

ECMAScript 2018 - zeigt, wie \ p für verschiedene Emojis verwendet werden kann
// Folgendes entspricht einem Emoji-Zeichen
/\p{Emoji}/u.test(' '); //wahr
// Folgendes schlägt fehl, weil gelbe Emojis Emoji_Modifier nicht benötigen / haben!
/\p{Emoji}\p{Emoji_Modifier}/u.test('️ '); //falsch
// Das Folgende entspricht einem Emoji-Zeichen \ 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 braune, schwarze oder andere Variationen desselben Emojis verwenden, werden sie berücksichtigt
// als Variationen des ursprünglichen Emoji und werden mit zwei Unicode-Zeichen dargestellt.
// Eins für das ursprüngliche Emoji, gefolgt von einem weiteren Unicode-Zeichen für die Farbe.
//
// Obwohl wir im folgenden Beispiel nur ein einziges braunes Sieges-Emoji sehen,
// Es werden zwei Unicode-Zeichen verwendet, eines für das Emoji und eines für das andere
// 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 richtig und
// Passe vollständig zum braunen Emoji.
/\p{Emoji}\p{Emoji_Modifier}/u.test(' '); //wahr

Als letztes können wir das Escape-Zeichen "P" (\ P) anstelle des kleinen p (\ p) verwenden, um die Übereinstimmungen zu negieren.

Verweise:

  1. Vorschlag 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 ist, die Ausführung eines Rückrufs nach dem Auflösen oder Zurückweisen zuzulassen, um die Bereinigung zu unterstützen. Der finally-Callback wird ohne Wert aufgerufen und immer ausgeführt, egal was passiert.

Betrachten wir verschiedene Fälle.

ECMAScript 2018 - finally () in der AuflösungssacheECMAScript 2018 - finally () im AblehnungsfallECMASCript 2018 - finally () im Fehlerfall PromiseECMAScript 2018 - Fehler aus ** catch ** -Fall geworfen

9. Asynchrone Iteration

Dies ist eine äußerst nützliche Funktion. Im Grunde erlaubt es uns, mit Leichtigkeit Schleifen aus asynchronem Code zu erstellen!

Diese Funktion fügt eine neue "for-await-of" -Schleife hinzu, mit der wir asynchrone Funktionen aufrufen können, die Versprechungen (oder Arrays mit einer Reihe von Versprechungen) in einer Schleife zurückgeben. Das Coole daran 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 auf die Schaltfläche unten, um Ihre Unterstützung anzuzeigen! ⬇⬇⬇ ⬇⬇⬇

Meine anderen Beiträge

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

Verwandte Beiträge zu ECMAScript 2015+

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