Neue ES2018 enthält Alle JavaScript-Entwickler Wissen Sollte

0
42

Die neunte edition der ECMAScript-standard, offiziell bekannt als ECMAScript 2018 (oder ES2018 kurz), war veröffentlicht im Juni 2018. Beginnend mit ES2016, neue Versionen von ECMAScript-Spezifikationen sind veröffentlicht jährlich anstatt alle paar Jahre, und fügen Sie weniger features als die großen Editionen verwendet. Die neueste Ausgabe der standard weiterhin die jährlichen release-Zyklus durch das hinzufügen von vier neuen RegExp-Funktionen, rest/spread Eigenschaften, asynchrone iteration, und Versprechen.der Prototyp.endlich. Darüber hinaus ES2018 fällt die syntax Einschränkung der escape-Sequenzen aus tagged Vorlagen.

Diese neuen änderungen werden nachfolgend in den Unterabschnitten, die Folgen.

Der Rest/Spread-Eigenschaften

Eines der interessantesten features Hinzugefügt, um ES2015 war der spread-operator. Dieser operator macht das kopieren und Zusammenführen von arrays viel einfacher. Eher als Aufruf der concat() oder slice () – Methode, können Sie mit der … – operator:

const arr1 = [10, 20, 30];

// erstellen Sie eine Kopie von arr1
const kopieren = […arr1];

console.log(Kopie); // → [10, 20, 30]

const arr2 = [40, 50];

// Zusammenführen von arr2 mit arr1
const merge = […arr1, …arr2];

console.log(merge); // → [10, 20, 30, 40, 50]

Der spread-operator kommt auch praktisch in Situationen, wenn ein array übergeben werden müssen als separate Argumente an eine Funktion. Zum Beispiel:

const arr = [10, 20, 30]

// äquivalent zu
// console.log(Math.max(10, 20, 30));
console.log(Math.max(…arr)); // → 30

ES2018 erweitert diese syntax durch hinzufügen Verbreitung von Eigenschaften in Objekt-literalen. Mit der Ausbreitung Eigenschaften, die Sie kopieren können eigene aufzählbaren Eigenschaften eines Objekts auf ein neues Objekt. Betrachten Sie das folgende Beispiel:

const obj1 = {
a: 10,
b: 20
};

const obj2 = {
…obj1,
c: 30
};

console.log(obj2); // → {a: 10, b: 20, c: 30}

In diesem code, der … – operator verwendet, um die Eigenschaften abrufen von obj1 und weisen Sie Sie auf obj2. Vor ES2018, der Versuch, so zu tun, würde einen Fehler auslösen. Wenn es mehrere Eigenschaften mit dem gleichen Namen, die Eigenschaft, die kommt zuletzt verwendet:

const obj1 = {
a: 10,
b: 20
};

const obj2 = {
…obj1,
a: 30
};

console.log(obj2); // → {a: 30, b: 20}

Spread Eigenschaften bieten auch eine neue Möglichkeit zum Zusammenführen von zwei oder mehr Objekte, die können verwendet werden als eine alternative zu dem Objekt.assign () – Methode:

const obj1 = {a: 10};
const obj2 = {b: 20};
const obj3 = {c: 30};

// ES2018
console.log({…obj1, obj2…, …obj3}); // → {a: 10, b: 20, c: 30}

// ES2015
console.log(Object.assign({}, obj1, obj2, obj3)); // → {a: 10, b: 20, c: 30}

Beachten Sie jedoch, dass Ausbreitung Eigenschaften erzeugen nicht immer die gleiche Ergebnis als Objekt.assign(). Betrachten Sie den folgenden code:

Objekt.defineProperty(Objekt.Prototyp, ‘a’, {
set(Wert) {
console.log(‘set aufgerufen!’);
}
});

const obj = {a: 10};

console.log({…obj});
// → {a: 10}

console.log(Object.assign({}, obj));
// → festlegen aufgerufen!
// → {}

In diesem code das Objekt.assign () – Methode wird ausgeführt, die geerbt Set-Eigenschaft. Umgekehrt, die Ausbreitung Eigenschaften einfach ignorieren, der setter.

Es ist wichtig, daran zu denken, dass spread Eigenschaften nur kopieren aufzählbaren Eigenschaften. Im folgenden Beispiel wird die type-Eigenschaft wird nicht zeigen, bis in das kopierte Objekt, weil seine enumerable-Attribut auf false festgelegt ist:

const Auto = {
Farbe: ‘blue’
};

Objekt.defineProperty(Auto, ‘Typ’, {
Wert: ‘Coupé’,
enumerable: false
});

console.log({…Auto}); // → {color: “blue”}

Geerbte Eigenschaften werden ignoriert, auch wenn Sie können Durchlaufen werden:

const Auto = {
Farbe: ‘blue’
};

const car2 = Objekt.erstellen(Auto, {
Typ: {
Wert: ‘Coupé’,
enumerable: true,
}
});

console.log(car2.color); // → blau
console.log(car2.hasOwnProperty(‘Farbe’)); // → false

console.log(car2.Typ); // → coupe
console.log(car2.hasOwnProperty(‘type’)); // → wahr

console.log({…car2}); // → {type: “coupe”}

In diesem code, car2 erbt die Eigenschaft Farbe von dem Auto. Da verbreitete Eigenschaften nur kopieren Sie die Eigenschaften eines Objekts, die Farbe ist nicht enthalten in der Rückgabewert.

Beachten Sie, dass die Ausbreitung von Eigenschaften kann nur eine flache Kopie eines Objekts. Wenn eine Eigenschaft enthält ein Objekt, wird nur die Referenz auf das Objekt wird kopiert:

const obj = {x: {y: 10}};
const copy1 = {…obj};
const copy2 = {…obj};

console.log(copy1.x === copy2.x); // → wahr

Die x-Eigenschaft in copy1 bezieht sich auf das gleiche Objekt im Speicher, das x in copy2 bezieht, also der strikte Gleichheits-operator gibt true zurück.

Ein weiteres nützliches feature Hinzugefügt, um ES2015 war rest-Parameter, welche fähigen JavaScript-Programmierer verwenden …, um Werte darzustellen, die als ein array. Zum Beispiel:

const arr = [10, 20, 30];
const [x, …rest] = arr;

console.log(x); // → 10
console.log(rest); // → [20, 30]

Hier, das erste Element in arr zugewiesen wird, x, und die übrigen Elemente zugeordnet sind, der rest variabel. Dieses Muster, genannt array destructuring, wurde so populär, dass die Ecma Technical Committee beschlossen, um eine ähnliche Funktionalität zu Objekten:

const obj = {
a: 10,
b: 20,
c: 30
};

const {a, …der rest} = obj;

console.log(a); // → 10
console.log(rest); // → {b: 20, c: 30}

Dieser code verwendet die übrigen Eigenschaften in einem destructuring assignment, kopieren Sie die verbleibenden eigenen aufzählbaren Eigenschaften zu einem neuen Objekt. Beachten Sie, dass die restlichen Eigenschaften müssen immer an das Ende des Objekts, andernfalls wird ein Fehler geworfen wird:

const obj = {
a: 10,
b: 20,
c: 30
};

const {…der rest, a} = obj; // → SyntaxError: Rest-element muss das Letzte element

Beachten Sie auch, dass die Verwendung mehrerer rest-Syntax, die in einem Objekt verursacht einen Fehler, es sei denn, Sie sind verschachtelt:

const obj = {
a: 10,
b: {
x: 20,
y: 30,
z: 40
}
};

const {b: {x, …rest1}, …rest2} = obj; // kein Fehler

const {…der rest, …rest2} = obj; // → SyntaxError: Rest-element muss das Letzte element
Unterstützung für Rest/Spread-Eigenschaften

Chrome
Firefox
Safari
Edge
60 55 11.1 Keine
Chrome Android
Firefox Android
iOS-Safari
Edge Mobile
Samsung Internet
Android Webview
60 55 11.3 Keine 8.2 60

Node.js:

  • 8.0.0 (erfordert –Harmonie runtime flag)
  • 8.3.0 (volle Unterstützung)

Asynchrone Iteration

Iteration über eine Sammlung von Daten ist ein wichtiger Bestandteil der Programmierung. Vor ES2015, JavaScript bereitgestellt Aussagen wie für, für…, und während, und Methoden wie map(), filter () und forEach() für diesen Zweck. Programmierern ermöglichen, die zur Verarbeitung der Elemente in einer Auflistung zu einem Zeitpunkt, ES2015 eingeführt, die das iterator-interface.

Ein Objekt ist iterierbar, wenn es ein Symbol.”iterator” – Eigenschaft. In ES2015, strings und Sammlungen Objekte wie Set, Map und Array sind mit einem Symbol.”iterator” – Eigenschaft und sind somit durchsuchbar. Der folgende code gibt ein Beispiel, wie auf die Elemente in einem wiederholenden ein zu einer Zeit:

const arr = [10, 20, 30];
const iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // → {Wert: 10, done: false}
console.log(iterator.next()); // → {Wert: 20, done: false}
console.log(iterator.next()); // → {Wert: 30, done: false}
console.log(iterator.next()); // → {value: undefined, done: true}

Symbol.iterator ist ein bekanntes symbol die Angabe einer Funktion gibt einen iterator. Die primäre Methode für die Interaktion mit einem iterator die Methode next (). Diese Methode gibt ein Objekt mit zwei Eigenschaften: value und fertig. Die Eigenschaft value enthält den Wert des nächsten Elements in der Sammlung. Der done-Eigenschaft enthält entweder true oder false angibt, ob oder nicht das Ende der Auflistung erreicht hat.

Standardmäßig wird ein Ebene-Objekt ist nicht durchsuchbar, aber es kann iterierbar, wenn Sie definieren ein Symbol.”iterator” – Eigenschaft, wie in diesem Beispiel:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbol.iterator]() {
const Werte = Objekt.Schlüssel(this);
let i = 0;
return {
weiter: () => {
return {
Wert: diese[Werte[i++]],
getan: ich > Werte.Länge
}
}
};
}
};

const iterator = collection[Symbol.iterator]();

console.log(iterator.next()); // → {Wert: 10, done: false}
console.log(iterator.next()); // → {Wert: 20, done: false}
console.log(iterator.next()); // → {Wert: 30, done: false}
console.log(iterator.next()); // → {value: undefined, done: true}

Dieses Objekt ist iterierbar, weil es definiert ein Symbol.”iterator” – Eigenschaft. Der iterator wird das-Objekt verwendet.keys () – Methode bekommt ein array mit den Objekt-Eigenschaft-Namen und weist auf die Werte konstant. Es definiert auch eine counter-variable und gibt es einen anfänglichen Wert von 0. Wenn der iterator ausgeführt wird, gibt es ein Objekt mit einer next () – Methode. Jedes mal, wenn die next () – Methode aufgerufen wird, gibt es einen {Wert, getan} – paar, wobei der Wert holding das nächste element in der Auflistung und fertig, hält ein boolescher Wert, der angibt, ob der iterator erreicht hat, die Notwendigkeit der Erhebung.

Während dieser code funktioniert perfekt, es ist unnötig kompliziert. Zum Glück, mit einem generator-Funktion kann erheblich vereinfachen den Prozess:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbol.iterator]: function * () {
für (mal-Taste in this) {
Ausbeute das[key];
}
}
};

const iterator = collection[Symbol.iterator]();

console.log(iterator.next()); // → {Wert: 10, done: false}
console.log(iterator.next()); // → {Wert: 20, done: false}
console.log(iterator.next()); // → {Wert: 30, done: false}
console.log(iterator.next()); // → {value: undefined, done: true}

In diesem generator, eine for…in-Schleife wird verwendet, um aufzuzählen, über die Sammlung und Ertrag den Wert jeder Immobilie. Das Ergebnis ist genau das gleiche wie im vorherigen Beispiel, aber es ist erheblich kürzer.

Ein Nachteil von Iteratoren ist, dass Sie nicht geeignet sind für die Darstellung von asynchronen Daten-Quellen. ES2018 die Lösung, diesen zu beheben, ist die asynchrone Iteratoren und asynchrone iterables. Eine asynchrone iterator unterscheidet sich von einem herkömmlichen iterator, der, anstatt eines einfachen Objektes in der form von {Wert, getan}, es gibt ein Versprechen, das erfüllt zu {Wert, getan}. Eine asynchrone iterierbar definiert ein Symbol.asyncIterator-Methode (statt des Symbols ein.iterator), gibt ein asynchrones iterator.

Ein Beispiel soll dies verdeutlichen:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbol.asyncIterator]() {
const Werte = Objekt.Schlüssel(this);
let i = 0;
return {
weiter: () => {
Rendite Versprechen.beheben({
Wert: diese[Werte[i++]],
getan: ich > Werte.Länge
});
}
};
}
};

const iterator = collection[Symbol.asyncIterator]();

console.log(iterator.next().dann(Ergebnis => {
console.log(result); // → {Wert: 10, done: false}
}));

console.log(iterator.next().dann(Ergebnis => {
console.log(result); // → {Wert: 20, done: false}
}));

console.log(iterator.next().dann(Ergebnis => {
console.log(result); // → {Wert: 30, done: false}
}));

console.log(iterator.next().dann(Ergebnis => {
console.log(result); // → {value: undefined, done: true}
}));

Beachten Sie, dass es nicht möglich ist, verwenden Sie einen iterator, der verspricht, das gleiche Ergebnis zu erzielen. Obwohl Sie eine normal -, synchron-iterator kann asynchron die Werte bestimmen, braucht es noch, um zu bestimmen, den Zustand des “fertig” synchron.

Wieder, Sie können den Prozess vereinfachen, indem eine generator-Funktion, wie unten dargestellt:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbol.asyncIterator]: async-function * () {
für (mal-Taste in this) {
Ausbeute das[key];
}
}
};

const iterator = collection[Symbol.asyncIterator]();

console.log(iterator.next().dann(Ergebnis => {
console.log(result); // → {Wert: 10, done: false}
}));

console.log(iterator.next().dann(Ergebnis => {
console.log(result); // → {Wert: 20, done: false}
}));

console.log(iterator.next().dann(Ergebnis => {
console.log(result); // → {Wert: 30, done: false}
}));

console.log(iterator.next().dann(Ergebnis => {
console.log(result); // → {value: undefined, done: true}
}));

Normalerweise, eine generator-Funktion gibt ein generator-Objekt mit einem next () – Methode. Wenn next() aufgerufen wird, gibt es eine {Wert, getan} – pair-Mädchen, deren value-Eigenschaft enthält den Wert ergab. Einen asynchronen generator macht das gleiche, außer dass es gibt ein Versprechen, das erfüllt zu {Wert, getan}.

Eine einfache Möglichkeit zum iterieren über ein Objekt ist iterierbar zu verwenden, die für… – Anweisung, sondern auch für…der funktioniert nicht mit asynchrone iterables als Wert und getan, bestimmt nicht synchron. Aus diesem Grund ES2018 bietet die für…erwarten… – Anweisung. Schauen wir uns ein Beispiel an:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbol.asyncIterator]: async-function * () {
für (mal-Taste in this) {
Ausbeute das[key];
}
}
};

(async function () {
für erwarten (const x collection) {
console.log(x);
}
})();

// protokolliert:
// → 10
// → 20
// → 30

In diesem code, der für…erwarten… – Anweisung implizit fordert das Symbol.asyncIterator-Methode auf das collection-Objekt, um eine async-iterator. Jedes mal durch die Schleife, die Methode next() der iterator aufgerufen, die eine Zusage zurückgibt. Einmal das Versprechen aufgelöst wird, die value-Eigenschaft von dem Gegenstand, der gelesen wird, um die x-variable. Die Schleife wird fortgesetzt, bis die done-Eigenschaft des zurückgegebenen Objekts hat den Wert true.

Beachten Sie, dass die für…erwarten… – Anweisung gilt nur innerhalb der asynchronen Generatoren und asynchrone Funktionen. Die Verletzung dieser Regel führt zu einem SyntaxError.

Die next () – Methode zurückgeben kann einem Versprechen, dass Sie ablehnt. Um ordnungsgemäß zu behandeln die abgelehnte Versprechen, Sie können wickeln Sie das für…erwarten… – Anweisung in einem try…catch-Anweisung wie folgt:

const collection = {
[Symbol.asyncIterator]() {
return {
weiter: () => {
Rendite Versprechen.ablehnen(new Error (“Etwas ging schief.’))
}
};
}
};

(async function() {
try {
für erwarten (const Wert der Sammlung) {}
} catch (error) {
console.log(‘Gefangen:’ + error.message);
}
})();

// protokolliert:
// → Gefangen: Etwas ging schief.
Unterstützung für Asynchrone Iteratoren

Chrome
Firefox
Safari
Edge
63 57 12 Keine
Chrome Android
Firefox Android
iOS-Safari
Edge Mobile
Samsung Internet
Android Webview
63 57 12 Keine 8.2 63

Node.js:

  • 8.10.0 (erfordert –harmony_async_iteration flag)
  • 10.0.0 (volle Unterstützung)

Versprechen.der Prototyp.schließlich

Eine weitere spannende Ergänzung zu ES2018 ist der finally () – Methode. Verschiedene JavaScript-Bibliotheken, die zuvor implementiert eine ähnliche Methode, die sich als nützlich in vielen Situationen. Dies ermutigte die Ecma Technical Committee offiziell schließlich hinzufügen (), um die Spezifikation. Mit dieser Methode, Programmierer ausgeführt werden kann, ein block von code-unabhängig von der Verheißung, Schicksal. Betrachten wir ein einfaches Beispiel:

fetch(‘https://www.google.com’)
.dann((Reaktion) => {
console.log(response.status);
})
.catch((Fehler) => {
console.log(Fehler);
})
.schließlich(() => {
Dokument.querySelector(‘#spinner’).Stil.display = ‘none’;
});

Finally () – Methode in handliches kommt, wenn Sie tun müssen, einige clean-up nach der operation abgeschlossen hat, unabhängig davon, ob es gelang. In diesem code, der schließlich () – Methode einfach versteckt das Ladesymbol, nachdem die Daten abgerufen und verarbeitet werden. Statt duplizieren Sie die Letzte Logik in der dann() und catch () – Methoden, die code registriert eine Funktion, die ausgeführt wird, sobald das Versprechen ist entweder erfüllt oder abgelehnt.

Sie konnte das gleiche Ergebnis erzielen, indem mit Hilfe Versprechen.dann(func, func) eher als Versprechen.schließlich(func), aber Sie hätte wiederholen Sie den gleichen code in beide Erfüllung handler und Ablehnung hf oder eine variable deklarieren:

fetch(‘https://www.google.com’)
.dann((Reaktion) => {
console.log(response.status);
})
.catch((Fehler) => {
console.log(Fehler);
})
.dann(Finale, Finale);

Funktion final() {
Dokument.querySelector(‘#spinner’).Stil.display = ‘none’;
}

Als mit dann ist() und catch(), die schließlich () – Methode gibt immer ein Versprechen, so können Sie die Kette mehr Methoden. Normalerweise, die Sie verwenden möchten endlich() die Letzte Kette, aber in bestimmten Situationen, beispielsweise bei einem HTTP-request, es ist eine gute Praxis, die an die Kette einer anderen catch (), um mit Fehlern umzugehen, die auftreten können, endlich().

Unterstützung Versprechen.der Prototyp.schließlich

Chrome
Firefox
Safari
Edge
63 58 11.1 18
Chrome Android
Firefox Android
iOS-Safari
Edge Mobile
Samsung Internet
Android Webview
63 58 11.1 Keine 8.2 63

Node.js:

10.0.0 (volle Unterstützung)

Neues RegExp-Funktionen

ES2018 fügt vier neue features für das RegExp-Objekt, die weitere Verbesserung der JavaScript-string-Verarbeitungsfunktionen. Diese Funktionen sind wie folgt:

  • s-flag (dotAll)
  • Named capture groups
  • Lookbehind-assertions
  • Unicode-Eigenschaft entweicht

s-Flag (dotAll)

Der Punkt (.) ist ein Sonderzeichen in regulären Ausdrücken, das entspricht einem beliebigen Zeichen außer Zeilenumbruch-Zeichen wie Zeilenvorschub (n) oder carriage return (r). Ein workaround mit allen Zeichen inklusive Zeilenumbrüche zu verwenden, einen Charakter-Klasse, die mit zwei gegenüberliegenden Kürzel wie [dD]. Dieser Charakter Klasse erzählt das Modul für reguläre Ausdrücke, finden Sie ein Zeichen, das entweder eine Ziffer (d) oder eine nicht-Ziffer (D). Als Ergebnis, es entspricht einem beliebigen Zeichen:

console.log (/[dD], zwei/.test(‘einntwo’)); // → wahr

ES2018 stellt einen Modus, in dem die dot kann verwendet werden, um das gleiche Ergebnis zu erzielen. Dieser Modus kann aktiviert werden, auf pro-regex-basis über den s-flag:

console.log (/.zwei/.test(‘einntwo’)); // → false
console.log (/.zwei/s.test(‘einntwo’)); // → wahr

Der Vorteil der Verwendung einer flag-opt-in, um das neue Verhalten ist die Abwärtskompatibilität. Also bestehende Muster für reguläre Ausdrücke, die den Punkt verwenden-Charakter sind nicht betroffen.

Named Capture Groups

In einigen Muster für reguläre Ausdrücke, indem Sie eine Anzahl an verweisen auf eine capture-Gruppe kann verwirrend sein. Nehmen wir zum Beispiel den regulären Ausdruck /(d{4})-(d{2})-(d{2})/, das entspricht einem Datum. Da Datum-Schreibweise im amerikanischen Englisch unterscheidet sich vom britischen Englisch, es ist schwer zu wissen, welche Gruppe bezieht sich auf den Tag und die Gruppe bezieht sich auf den Monat:

const re = /(d{4})-(d{2})-(d{2})/;
const match= re.exec(‘2019-01-10’);

console.log(match[0]); // → 2019-01-10
console.log(match[1]); // → 2019
console.log(match[2]); // → 01
console.log(match[3]); // → 10

ES2018 führt named capture groups verwendet werden (?<name>…) – syntax. Also, das Muster, das auf ein Datum geschrieben werden können, in einer weniger zweideutigen Art und Weise:

const re = /(?<Jahr>d{4})-(?<month>d{2})-(?<day>d{2})/;
const match = re.exec(‘2019-01-10’);

console.log(match.Gruppen); // → {Jahr: “2019”, Monat: “01”, Tag: “10”}
console.log(match.Gruppen.Jahr); // → 2019
console.log(match.Gruppen.Monat); // → 01
console.log(match.Gruppen.Tag); // → 10

Können Sie sich erinnern, eine namens-capture-Gruppe später in die Muster durch mit dem k<name> – syntax. Zum Beispiel, zu finden, aufeinander folgende doppelte Wörter in einem Satz, die Sie verwenden können, /b(?<dup>w+)s+k<dup>b/:

const re = /b(?<dup>w+)s+k<dup>b/;
const match = re.exec(‘Bekommen, dass die Katze vom Tisch!’);

console.log(match.index); // → 4
console.log(match[0]); // → dass

Zum einfügen eines namens capture-Gruppe in den Ersetzungsstring der replace () – Methode, müssen Sie die $<name> – Konstrukt. Zum Beispiel:

const str = ‘red & blue’;

console.log(str.replace(/(rot) und (blau)/, ‘$2 & $1’));
// → blau & rot

console.log(str.replace(/(?<rot – >rot) und (?<blau – >blau)/, ‘$<blau> & $<rot>’));
// → blau & rot
Lookbehind-Assertions

ES2018 bringt lookbehind-assertions zu JavaScript, die schon in anderen regex-Implementierungen für die Jahre. Zuvor, JavaScript nur unterstützt lookahead-assertions. Eine lookbehind-assertion ist gekennzeichnet durch (?<=…), und können Sie einem Muster entsprechen, basierend auf dem Teilstring, der vor dem Muster. Wenn Sie beispielsweise angeben möchten, dass der Preis für ein Produkt-in dollar, Pfund oder euro ohne Aufnahme das symbol der Währung, die Sie verwenden können /(?<=$|£|€)d+(.d*)?/:

const-re = /(?<=$|£|€)d+(.d*)?/;

console.log(re.exec(‘199’));
// → null

console.log(re.exec(‘$199′));
// → [“199”, undefined index: 1 input: “$199”, Gruppen: undefined]

console.log(re.exec (’50 Euro’));
// → [“50”, undefined index: 1 input: “€50”, Gruppen: undefined]

Es gibt auch eine negativ-version von lookbehind, das ist gekennzeichnet durch (?<!…). Eine negative lookbehind können Sie einem Muster entsprechen, nur wenn es nicht vorangestellt Muster innerhalb der lookbehind. Zum Beispiel das Muster /(?<!un -)/ entspricht das Wort zur Verfügung, wenn es nicht “un” vorangestellt:

const re = /(?<!un)/;

console.log(re.exec(‘Wir bedauern, dass dieser Dienst ist zurzeit nicht verfügbar’));
// → null

console.log(re.exec (“Dienst ist verfügbar”));
/ / → [“”, index: 15, – Eingang: “Der Dienst verfügbar ist”, Gruppen: undefined]
Unicode-Eigenschaft Entweicht

ES2018 bietet eine neue Art von escape-Sequenz, bekannt als Unicode-escape-Eigenschaft, die bietet Unterstützung für Unicode in regulären Ausdrücken. Angenommen, Sie möchten entsprechend die Unicode-Zeichen ㉛ in einem string. Obwohl ㉛ ist als eine Zahl, Sie kann nicht übereinstimmen mit der d-Kürzel Charakter-Klasse, weil es unterstützt nur ASCII [0-9] Zeichen. Unicode-Eigenschaft entgeht, auf der anderen Seite, können verwendet werden, für eine beliebige Dezimalzahl in Unicode:

const str = ‘㉛’;

console.log(/d/u.test(str)); // → false
console.log(/p{Number}/u.test(str)); // → wahr

Ebenso, wenn Sie möchten, passen zu jedem Unicode-word-Charakter, die Sie verwenden können, p{Alpha}:

const str = ‘ض’;

console.log(/p{Alpha}/u.test(str)); // → wahr

// das w-Kürzel zuordnen kann ض
console.log(/w/u.test(str)); // → false

Es gibt auch eine negierte version von p{…}, die ist gekennzeichnet durch P{…}:

console.log(/P{Number}/u.test(‘㉛’)); // → false
console.log(/P{Number}/u.test(‘ض’)); // → wahr

console.log(/P{Alpha}/u.test(‘㉛’)); // → wahr
console.log(/P{Alpha}/u.test(‘ض’)); // → false

Neben Buchstaben und der Zahl, gibt es einige weitere Eigenschaften, die verwendet werden können in Unicode-Eigenschaft entweicht. Sie finden eine Liste der unterstützten Unicode-Eigenschaften, die in der aktuellen Spezifikation Vorschlag.

Unterstützung für Neue RegExp-Funktionen

Chrome
Firefox
Safari
Edge

s-Flag (dotAll) 62 Keine 11.1 Keine
Named Capture Groups 64 Keine 11.1 Keine
Lookbehind-Assertions 62 Keine Keine Keine
Unicode-Eigenschaft Entweicht 64 Keine 11.1 Keine

Chrome (Android)
Firefox (Android)
iOS-Safari
Edge Mobile
Samsung Internet
Android Webview

s-Flag (dotAll) 62 Keine 11.3 Keine 8.2 62
Named Capture Groups 64 Keine 11.3 Keine Keine 64
Lookbehind-Assertions 62 Keine Keine Keine 8.2 62
Unicode-Eigenschaft Entweicht 64 Keine 11.3 Keine Keine 64

Node.js:

  • 8.3.0 (erfordert –Harmonie runtime flag)
  • 8.10.0 (Unterstützung für s-flag (dotAll) und lookbehind assertions)
  • 10.0.0 (volle Unterstützung)

Vorlage Wörtliche Revision

Wenn eine Vorlage literal ist, unmittelbar vorangestellt ist ein Ausdruck, ist es als tagged Vorlage wörtlich. Eine tagged-Vorlage kommt in handliches, wenn Sie wollen, um zu analysieren, eine Vorlage literal mit einer Funktion. Betrachten Sie das folgende Beispiel:

Funktion fn(string ersetzen) {
if(Ersatz === ‘ES6’) {
Ersatz = ‘ES2015’
}
return Ersatz + string[1];
}

const version = ‘ES6’;
const result = fn`${version} war ein major update`;

console.log(result); // → ES2015 war ein major update

In diesem code, ein tag Ausdruck — ist eine reguläre Funktion wird aufgerufen und übergeben der Vorlage wörtlich. Die Funktion einfach modifiziert den dynamischen Teil der Zeichenfolge und gibt diese zurück.

Vor ES2018, tagged Vorlage Literale hatte syntaktische Beschränkungen in Bezug auf escape-Sequenzen. Ein backslash gefolgt von einem bestimmten Folge von Zeichen als Sonderzeichen behandelt: a x interpretiert wird als hex escape, a u interpretiert als unicode-escape, und ein gefolgt von einer Ziffer interpretiert als oktal-escape. Als Ergebnis, Zeichenfolgen wie “C:xxxuuu” oder “ubuntu” wurden als ungültige escape-Sequenzen durch den Dolmetscher und würde werfen Sie einen SyntaxError.

ES2018 entfernt diese Einschränkungen von tagged Vorlagen und statt der Ausgabe einer Fehlermeldung, ungültige escape-Sequenzen, die als nicht definiert:

Funktion fn(string ersetzen) {
console.log (- Ersatz); // → escape-Sequenzen:
console.log(string[1]); // → undefined
}

const str = ‘escape-Sequenzen:’;
const result = fn`${str} ubuntu C:xxxuuu`;

Beachten Sie, dass die Verwendung von illegal escape-Sequenzen in einer normalen Vorlage literal noch ein Fehler verursacht wird:

const result = `ubuntu`;
// → SyntaxError: Invalid Unicode-escape-Sequenz
Unterstützung für die Vorlage Wörtliche Revision

Chrome
Firefox
Safari
Edge
62 56 11 Keine
Chrome Android
Firefox Android
iOS-Safari
Edge Mobile
Samsung Internet
Android Webview
62 56 11 Keine 8.2 62

Node.js:

  • 8.3.0 (erfordert –Harmonie runtime flag)
  • 8.10.0 (volle Unterstützung)

Zusammenfassung

Wir haben einen guten Blick auf mehrere wichtige Funktionen, die im ES2018 einschließlich asynchrone iteration, Ruhe – /spread-Eigenschaften Versprechen.der Prototyp.endlich(), und Ergänzungen, um das RegExp-Objekt. Obwohl einige dieser features sind nicht vollständig umgesetzt, indem Sie einige browser-Anbieter noch, kann man Sie noch heute Dank JavaScript transpilers wie Babel.

ECMAScript ist rasch weiterentwickelt und neue Funktionen werden eingeführt, jedes so oft, so schauen Sie sich die Liste der fertigen Vorschläge für den vollen Umfang der Neuerungen. Gibt es irgendwelche neuen Funktionen, die Sie besonders begeistert? Teilen Sie in den Kommentaren!