Nieuwe ES2018 Heeft Elke JavaScript Ontwikkelaar Moet Weten

0
22

De negende editie van de ECMAScript standaard, officieel bekend als ECMAScript 2018 (of ES2018 voor de korte), werd uitgebracht in juni 2018. Te beginnen met ES2016, nieuwe versies van ECMAScript specificaties zijn vrijgegeven jaarlijks plaats om de verschillende jaren en voeg minder functies dan de grote-edities gebruikt. De nieuwste editie van de standaard, blijft de jaarlijkse release-cyclus door het toevoegen van de vier nieuwe RegExp functies, de rest verspreid en de eigenschappen, asynchrone iteratie, en Belofte.prototype.eindelijk. Bovendien ES2018 daalt de syntaxis beperking van de escape-reeksen uit tagged sjablonen.

Deze nieuwe wijzigingen worden toegelicht in de paragrafen die volgen.

De Rest Verspreid Eigenschappen

Een van de meest interessante features toegevoegd aan ES2015 was de verspreiding van de operator. Deze operator maakt het kopiëren en samenvoegen van arrays een stuk eenvoudiger. Plaats van het aanroepen van de functie concat() of segment () – methode, die je zou kunnen gebruiken … operator:

const arr1 = [10, 20, 30];

// maak een kopie van arr1
const kopie = […arr1];

console.log(kopiëren); // → [10, 20, 30]

const arr2 = [40, 50];

// samenvoegen arr2 met arr1
const samenvoegen = […arr1, …arr2];

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

De verspreiding van de operator komt ook van pas in situaties waar een array moet worden doorgegeven als afzonderlijke argumenten aan een functie. Bijvoorbeeld:

const arr = [10, 20, 30]

// gelijk aan
// console.log(Math.max(10, 20, 30));
console.log(Math.max(…arr)); // → 30

ES2018 voor een verdere uitbreiding van deze syntaxis verspreid door het toevoegen van eigenschappen aan object literals. Met de verspreiding van eigenschappen die u kunt kopiëren eigen aftelbaar eigenschappen van een object naar een nieuw object. Beschouw het volgende voorbeeld:

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

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

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

In deze code, de … operator wordt gebruikt om het ophalen van de eigenschappen van obj1 en wijs ze toe aan een obj2. Voorafgaand aan ES2018, een poging te doen dus zou het gooien van een fout. Als er meerdere objecten met dezelfde naam, de eigenschap dat laatste komt zal worden gebruikt:

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

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

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

Verspreid eigenschappen ook een nieuwe manier om het samenvoegen van twee of meer objecten, die kan worden gebruikt als een alternatief voor het Object.toewijzen() 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.toewijzen({}, obj1, obj2, obj3)); // → {a: 10 b: 20 c: 30}

Merk echter op, dat verspreid eigenschappen niet altijd hetzelfde resultaat als Object.toewijzen(). Beschouw de volgende code:

– Object.defineProperty(Object.prototype, ‘a’, {
set(waarde) {
console.log(‘set genoemd!’);
}
});

const obj = {a: 10};

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

console.log(Object.toewijzen({}, obj));
// → set genoemd!
// → {}

In deze code wordt het Object.toewijzen() methode voert de overgenomen setter eigendom. Omgekeerd, de verspreiding eigenschappen simpelweg negeren van de setter.

Het is belangrijk te onthouden dat verspreid eigenschappen kopie aftelbaar eigenschappen. In het volgende voorbeeld wordt de eigenschap type zal niet te zien in het gekopieerde object omdat zijn aftelbaar attribuut is ingesteld op false:

const auto = {
kleur: ‘blauw’
};

– Object.defineProperty(auto, ‘type’, {
waarde: ‘coupe’,
aftelbaar: false
});

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

Erfelijke eigenschappen worden genegeerd, zelfs als ze worden opgesomd:

const auto = {
kleur: ‘blauw’
};

const car2 = Object.het maken van(auto, {
type: {
waarde: ‘coupe’,
aftelbaar: true,
}
});

console.log(car2.kleur); // → blauw
console.log(car2.hasOwnProperty(‘kleur’)); // → false

console.log(car2.typ); // → coupe
console.log(car2.hasOwnProperty(‘type’)); // → true

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

In deze code, car2 erft de eigenschap kleur van de auto. Omdat verspreiden eigenschappen kopie van de eigenschappen van een object, de kleur is niet inbegrepen in de return waarde.

Houd in gedachten dat verspreid eigenschappen kunt alleen een oppervlakkige kopie van een object. Als een eigenschap bezit is van een object, alleen de verwijzing naar het object wordt gekopieerd:

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

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

De x-eigendom in copy1 verwijst naar hetzelfde object in het geheugen dat x in copy2 verwijst naar, dus de strikte gelijkheid operator geeft waar als resultaat.

Een andere handige functie toegevoegd aan ES2015 was de rest van de parameters, die ingeschakeld JavaScript programmeurs gebruiken … te vertegenwoordigen waarden als een array. Bijvoorbeeld:

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

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

Hier, het eerste item in de arr is toegewezen aan x, en de overige elementen zijn toegewezen aan de rest variabele. Dit patroon, genaamd array destructuring, werd zo populair dat de Ecma Technische Commissie besloten om een soortgelijke functionaliteit om objecten:

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

const {a, …rest} = obj;

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

Deze code gebruikt de rest eigenschappen in een destructuring opdracht tot het kopiëren van de resterende eigen aftelbaar eigenschappen in een nieuw object. Let op dat de rest eigenschappen moet altijd aan het einde van het object, anders wordt een fout gegenereerd:

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

const {…rest, a} = obj; // → SyntaxError: Rest element moet worden laatste element

Ook in gedachten houden dat het gebruik van meerdere rest syntaxis in een object een fout veroorzaakt, tenzij ze genest zijn:

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

const {b: {x, …rest1}, …rest2} = obj; // geen fout

const {…rust, …rest2} = obj; // → SyntaxError: Rest element moet worden laatste element
Ondersteuning voor Rest Verspreid Eigenschappen

Chrome
Firefox
Safari
Rand
60 55 11.1 Geen
Chrome Voor Android
Firefox Voor Android
iOS Safari
Edge Mobiel
Samsung Internet
Android Webview
60 55 11.3 Geen 8.2 60

Node.js:

  • 8.0.0 (vereist –de harmonie runtime vlag)
  • 8.3.0 (volledige ondersteuning)

Asynchrone Iteratie

Itereren over een verzameling van gegevens is een belangrijk onderdeel van de programmering. Voorafgaand aan ES2015, JavaScript verstrekte instructies, zoals voor,…in, en terwijl, en methoden, zoals de kaart (), (filter), en forEach() voor dit doel. Voor het inschakelen van programmeurs voor het verwerken van de elementen in een verzameling in één keer ES2015 introduceerde de interface iterator.

Een object is een iterable als het een Symbool.iterator eigendom. In ES2015, strijkers en verzamelingen objecten, zoals een Set -, Kaart -, en de Array zijn voorzien van een Symbool.iterator eigendom en dus zijn iterable. De volgende code geeft een voorbeeld van hoe om toegang te krijgen tot de elementen van een iterable:

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

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

Symbool.iterator is een bekend symbool van het specificeren van een functie retourneert een iterator. De belangrijkste manier om te communiceren met een iterator is de next() methode. Deze methode retourneert een object met twee eigenschappen: waarde en gedaan. De waarde van de eigenschap bevat de waarde van het volgende element in de collectie. Het pand bevat true of false aangeeft of het eind van de collectie heeft bereikt.

Standaard is een normaal object is niet iterable, maar het kan iterable als u een Symbool.iterator goederen, zoals in dit voorbeeld:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbool.iterator]() {
const values = Object.toetsen(dit);
laat i = 0;
terug {
volgende: () => {
terug {
waarde: [waarden[i++]],
gedaan: i > waarden.lengte
}
}
};
}
};

const iterator = collectie[Symbool.iterator]();

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

Dit object is iterable omdat hiermee een Symbool.iterator eigendom. De iterator maakt gebruik van het Object.sleutels() methode om een array van het object eigendom van namen en vervolgens toegewezen aan de waarden constant. Het geeft ook een teller variabele en geeft het een initiële waarde van 0. Als de iterator is uitgevoerd, is het resultaat een object met een next() methode. Elke keer dat de next() methode wordt aangeroepen, het resultaat van een {waarde, gedaan} pair, met de waarde die de volgende element in de collectie en het klaar holding een Booleaanse waarde die aangeeft of de iterator heeft bereikt en de noodzaak van de collectie.

Terwijl deze code werkt perfect, het is onnodig ingewikkeld. Gelukkig, met behulp van een generator functie vereenvoudigt het proces:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbool.iterator]: functie * () {
voor (key) {
de opbrengst van deze[key];
}
}
};

const iterator = collectie[Symbool.iterator]();

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

Binnen deze generator, een voor…in de lus wordt gebruikt om te inventariseren over de inzameling en het rendement van de waarde van iedere woning. Het resultaat is precies hetzelfde als het vorige voorbeeld, maar het is aanzienlijk korter.

Een nadeel van iterators is dat ze niet geschikt zijn voor het representeren van asynchrone data-bronnen. ES2018 de oplossing om dat te verhelpen is asynchroon iterators en asynchrone iterable ‘ s. Een asynchrone iterator verschilt van een conventionele iterator in dat, in plaats van het retourneren van een normaal object in de vorm van {waarde, gedaan}, geeft hij een belofte die voldoet aan {waarde, gedaan}. Een asynchrone iterable definieert een Symbool.asyncIterator methode (in plaats van het Symbool.iterator) dat wordt een asynchrone iterator.

Een voorbeeld maakt dit duidelijker:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbool.asyncIterator]() {
const values = Object.toetsen(dit);
laat i = 0;
terug {
volgende: () => {
rendement Beloven.het oplossen van({
waarde: [waarden[i++]],
gedaan: i > waarden.lengte
});
}
};
}
};

const iterator = collectie[Symbool.asyncIterator]();

console.log(iterator.next (volgende).vervolgens(resultaat => {
console.log(result); // → {waarde: 10, gedaan: false}
}));

console.log(iterator.next (volgende).vervolgens(resultaat => {
console.log(result); // → {waarde: 20, gedaan: false}
}));

console.log(iterator.next (volgende).vervolgens(resultaat => {
console.log(result); // → {value: 30, gedaan: false}
}));

console.log(iterator.next (volgende).vervolgens(resultaat => {
console.log(result); // → {waarde: undefined gedaan: true}
}));

Opmerking het is niet mogelijk gebruik te maken van een iterator van beloften om hetzelfde resultaat te bereiken. Hoewel een normale, synchrone iterator kan asynchroon het bepalen van de waarden, het moet nog bepalen wat de status van “gedaan” synchroon.

Nogmaals, je kan het proces vereenvoudigen met behulp van een generator functie, zoals hieronder weergegeven:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbool.asyncIterator]: asynchrone functie * () {
voor (key) {
de opbrengst van deze[key];
}
}
};

const iterator = collectie[Symbool.asyncIterator]();

console.log(iterator.next (volgende).vervolgens(resultaat => {
console.log(result); // → {waarde: 10, gedaan: false}
}));

console.log(iterator.next (volgende).vervolgens(resultaat => {
console.log(result); // → {waarde: 20, gedaan: false}
}));

console.log(iterator.next (volgende).vervolgens(resultaat => {
console.log(result); // → {value: 30, gedaan: false}
}));

console.log(iterator.next (volgende).vervolgens(resultaat => {
console.log(result); // → {waarde: undefined gedaan: true}
}));

Normaal gesproken, een generator functie retourneert een generator object met een next() methode. Bij de volgende() is aangeroepen, het resultaat van een {waarde, gedaan} paar waarvan de waarde eigenschap bevat de opgeleverde waarde. Een asynchrone generator doet hetzelfde, behalve dat het resultaat van een belofte die voldoet aan {waarde, gedaan}.

Een gemakkelijke manier om te itereren over een iterable object is te gebruiken voor…van de verklaring, maar voor…werkt niet met async iterable ‘ s als waarde en gedaan zijn niet bepaald synchroon. Om deze reden, ES2018 biedt de…wachten…verklaring. Laten we eens naar een voorbeeld kijken:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbool.asyncIterator]: asynchrone functie * () {
voor (key) {
de opbrengst van deze[key];
}
}
};

(asynchrone functie () {
voor het wachten (const x incasso) {
console.log(x);
}
})();

// logs:
// → 10
// → 20
// → 30

In deze code, de voor…wachten…van de verklaring impliciet oproepen van het Symbool.asyncIterator methode op de collectie object om een asynchrone iterator. Elke keer door de lus, de next() methode van de iterator wordt genoemd, en het resultaat is een belofte. Zodra de belofte is opgelost, de waarde en het eigendom van de resulterende object is te lezen op de x-variabele. De loop gaat door totdat het gedaan is eigendom van het geretourneerde object heeft een waarde true.

Houd in gedachten dat het voor…wachten…van de verklaring is alleen geldig binnen asynchrone generatoren en asynchrone functies. Het overtreden van deze regel resulteert in een SyntaxError.

De methode next() retourneert een belofte dat verwerpt. Om sierlijk handvat van een afgewezen belofte, u kunt wikkel de voor…wachten…van de verklaring in een try…catch statement, zoals deze:

const collection = {
[Symbool.asyncIterator]() {
terug {
volgende: () => {
rendement Beloven.weigeren van(nieuwe Fout(‘er ging Iets mis.’))
}
};
}
};

(asynchrone functie() {
proberen {
voor het wachten (const waarde van de collectie) {}
} catch (error) {
console.log(‘Gevangen:’ + fout.bericht);
}
})();

// logs:
// → Gevangen: is er Iets mis gegaan.
Ondersteuning voor Asynchrone Iterators

Chrome
Firefox
Safari
Rand
63 57 12 Geen
Chrome Voor Android
Firefox Voor Android
iOS Safari
Edge Mobiel
Samsung Internet
Android Webview
63 57 12 Geen 8.2 63

Node.js:

  • 8.10.0 (vereist –harmony_async_iteration vlag)
  • 10.0.0 (volledige ondersteuning)

Belofte.prototype.tot slot

Een andere spannende toevoeging aan ES2018 is het uiteindelijk() methode. Verschillende JavaScript-bibliotheken eerder had geïmplementeerd een soortgelijke methode, die nuttig gebleken in vele situaties. Dit moedigde de Ecma Technische Commissie officieel voeg tot slot() de specificatie. Met deze methode, programmeurs zal in staat zijn om een blok code, ongeacht de belofte van het lot. Laten we eens kijken naar een simpel voorbeeld:

ophalen(‘https://www.google.com’)
.dan((response) => {
console.log(reactie.status);
})
.catch((fout) => {
console.log(fout);
})
.tot slot(() => {
document.querySelector(‘#spinner’).stijl.display = ‘none’;
});

Het uiteindelijk() methode is handig wanneer u het nodig hebt om wat schoon te maken na de bewerking is voltooid, ongeacht of het gelukt is. In deze code wordt het uiteindelijk() methode verbergt de spinner nadat de gegevens zijn opgehaald en verwerkt. In plaats van het dupliceren van de uiteindelijke logica in de toenmalige (en vangen() methoden, de code registreert een functie die moet worden uitgevoerd nadat de belofte is ofwel nagekomen of afgewezen.

Je kan hetzelfde resultaat bereiken door het gebruik van belofte.vervolgens(func, func) in plaats van de belofte.tot slot(func), maar je zou het herhalen van dezelfde code op zowel de vervulling van de handler en de afwijzing van de handler, of het declareren van een variabele voor het:

ophalen(‘https://www.google.com’)
.dan((response) => {
console.log(reactie.status);
})
.catch((fout) => {
console.log(fout);
})
.vervolgens(finale, finale);

functie finale() {
document.querySelector(‘#spinner’).stijl.display = ‘none’;
}

Zoals met om het vervolgens (op) vangen(), het uiteindelijk() methode geeft altijd een belofte, dus je kunt keten meer methoden. Normaal gesproken, u wilt tenslotte() als de laatste schakel van de ketting, maar in bepaalde situaties, zoals bij het maken van een HTTP-verzoek, het is een goede gewoonte om de ketting een andere catch() om te gaan met fouten die kunnen optreden bij tot slot().

Ondersteuning voor de Belofte.prototype.tot slot

Chrome
Firefox
Safari
Rand
63 58 11.1 18
Chrome Voor Android
Firefox Voor Android
iOS Safari
Edge Mobiel
Samsung Internet
Android Webview
63 58 11.1 Geen 8.2 63

Node.js:

10.0.0 (volledige ondersteuning)

New RegExp Functies

ES2018 voegt vier nieuwe functies aan de RegExp-object, die verder verbetert JavaScript string processing mogelijkheden. Deze functies zijn als volgt:

  • s (dotAll) vlag
  • Naam vastleggen groepen
  • Lookbehind beweringen
  • Unicode-eigendom ontsnapt

s (dotAll) Vlag

De punt (.) is een speciaal teken in een reguliere expressie patroon dat overeenkomt met een willekeurig teken, behalve lijn breken tekens zoals nieuwe regel (n) of return (r). Een oplossing voor komt overeen met alle tekens, inclusief regel-einden is het gebruik van een klasse met twee tegengestelde shorthands zoals [dD]. Deze klasse geeft aan de reguliere expressie motor om te zoeken naar een teken dat een cijfer (d) of een niet-cijfer (D). Als een resultaat, het komt overeen met elk teken:

console.log (/([dD]twee/.test(‘onentwo’)); // → true

ES2018 introduceert een modus waarin de dot kan worden gebruikt om hetzelfde resultaat te bereiken. Deze modus kan worden geactiveerd op per-regex basis met behulp van de s-vlag:

console.log (/.twee/.test(‘onentwo’)); // → false
console.log (/.twee/s.test(‘onentwo’)); // → true

Het voordeel van het gebruik van een vlag te kiezen om het nieuwe gedrag is de achterwaartse compatibiliteit. Dus bestaande reguliere expressie patronen die gebruik maken van een punt (niet beïnvloed.

Naam Vastleggen Groepen

In sommige reguliere expressie patronen, met behulp van een aantal te verwijzen naar een capture groep kan verwarrend zijn. Neem bijvoorbeeld de reguliere expressie /(d{4})-(d{2})-(d{2})/, die overeenkomt met een datum. Omdat de datum notatie in het Amerikaans engels verschilt van het Brits-engels, het is moeilijk om te weten tot welke groep verwijst naar de dag en die van de groep verwijst naar de maand:

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 introduceert met de naam vastleggen groepen die gebruik maakt van de (?<naam>…) – syntaxis. Dus, het patroon aan een datum kan worden geschreven in een minder dubbelzinnige wijze:

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

console.log(wedstrijd.groepen); // → {jaar: “2019”, de maand: “01”, de dag: “10”}
console.log(wedstrijd.groepen.jaar); // → 2019
console.log(wedstrijd.groepen.maand); // → 01
console.log(wedstrijd.groepen.dag); // → 10

U kunt het oproepen van een naam vastleggen groep later in het patroon met behulp van het k<naam> syntaxis. Bijvoorbeeld, te vinden opeenvolgende dubbele woorden in een zin, u kunt gebruik maken van /b(?<dup>w+)s+k<dup>b/:

const re = /b(?<dup>w+)s+k<dup>b/;
const match = re.exec(‘dat kat uit de tabel!’);

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

Voor het invoegen van een naam vastleggen van de groep in de vervangende tekenreeks van de methode replace (), moet u gebruik maken van de $<naam> te bouwen. Bijvoorbeeld:

const str = ‘red & blue’;

console.log(str.vervangen(/(rood) & (blue)/, ‘$2 & $1’));
// → blauw & rood

console.log(str.vervangen(/(?<rood – >rood) & (?<blue>blauw)/, ‘$<blue> & $<red>’));
// → blauw & rood
Lookbehind Beweringen

ES2018 brengt lookbehind beweringen te JavaScript, die beschikbaar zijn in andere regex implementaties voor jaren. Eerder, JavaScript alleen ondersteund lookahead beweringen. Een lookbehind bewering wordt aangeduid door: (?<=…), en kunt u overeenkomen met een patroon gebaseerd op de substring dat voorafgaat aan het patroon. Bijvoorbeeld, als u wilt dat overeenkomt met de prijs van een product in dollar, pond of euro ‘ s, zonder het vastleggen van de munt symbool, kunt u gebruik maken van /(?<=$|£|€)d+(.d*)?/:

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

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

console.log(opnieuw.exec(‘$199’));
// → [“199”, undefined index: 1, ingang: “$199”, groepen: undefined]

console.log(opnieuw.exec(‘€50’));
// → [“50”, undefined index: 1, ingang: “€50”, groepen: undefined]

Er is ook een negatieve versie van lookbehind, die wordt aangeduid door: (?<!…). Een negatieve lookbehind kunt u overeenkomen met een patroon alleen als het niet voorafgegaan wordt door de patroon in de lookbehind. Bijvoorbeeld, het patroon /(?<!de vn)beschikbaar is/ komt overeen met de beschikbaar woord als het geen “un” prefix:

const re = /(?<!de vn)beschikbaar is/ zijn;

console.log(opnieuw.exec(‘Wij betreuren deze service is momenteel niet beschikbaar’));
// → null

console.log(opnieuw.exec(‘De service’));
// → [“beschikbaar”, register: 15, ingang: “De service is beschikbaar”, groepen: undefined]
Unicode-Eigendom Ontsnapt

ES2018 biedt een nieuw type escape sequence bekend als Unicode-eigendom ontsnappen, welke ondersteuning biedt voor het volledige Unicode in reguliere expressies. Stel je wilt overeenkomen met de Unicode-teken ㉛ in een string. Hoewel ㉛ wordt beschouwd als een nummer, u kunt niet combineren met de d steno karakter klasse, omdat het ondersteunt alleen ASCII – [0-9] karakters. Unicode woning ontsnapt, aan de andere kant, kan worden gebruikt om een decimaal getal in Unicode:

const str = ‘㉛’;

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

Evenzo, als u wilt te combineren met elk Unicode-woord-teken, kunt u gebruik maken van p{Alfabetische}:

const str = ‘ض’;

console.log(/p{Alfabetische}/u.test(str)); // → true

// de w steno niet overeenkomen met ض
console.log(/w/u.test(str)); // → false

Er is ook een negatief versie van p{…}, dat wordt aangeduid met P{…}:

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

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

In aanvulling op Alfabetische en numerieke, zijn er nog meer eigenschappen die gebruikt kunnen worden in Unicode woning ontsnapt. U vindt een lijst van ondersteunde Unicode-eigenschappen in de huidige specificatie voorstel.

Ondersteuning voor Nieuwe RegExp Functies

Chrome
Firefox
Safari
Rand

s (dotAll) Vlag 62 Geen 11.1 Geen
Naam Vastleggen Groepen 64 Geen 11.1 Geen
Lookbehind Beweringen 62 Geen Geen Geen
Unicode-Eigendom Ontsnapt 64 Geen 11.1 Geen

Chrome (Android)
Firefox (Android)
iOS Safari
Edge Mobiel
Samsung Internet
Android Webview

s (dotAll) Vlag 62 Geen 11.3 Geen 8.2 62
Naam Vastleggen Groepen 64 Geen 11.3 Geen Geen 64
Lookbehind Beweringen 62 Geen Geen Geen 8.2 62
Unicode-Eigendom Ontsnapt 64 Geen 11.3 Geen Geen 64

Node.js:

  • 8.3.0 (vereist –de harmonie runtime vlag)
  • 8.10.0 (ondersteuning voor s (dotAll) vlag en lookbehind beweringen)
  • 10.0.0 (volledige ondersteuning)

Sjabloon Letterlijke Herziening

Wanneer een sjabloon letterlijke wordt voorafgegaan door een expressie, is het wel een tagged sjabloon letterlijk. Een tagged sjabloon is handig wanneer u wilt parseren van een sjabloon letterlijk met een functie. Beschouw het volgende voorbeeld:

functie fn(string, vervanging) {
als(vervangende === ‘ES6’) {
vervangende = ‘ES2015’
}
terug vervangende + string[1];
}

const version = ‘ES6’;
const resultaat = fn`${versie} is een belangrijke update`;

console.log(result); // → ES2015 was een grote update

In deze code, een tag expressie — en dat is een reguliere functie wordt aangeroepen en gaf de sjabloon letterlijk. De functie gewoon wijzigt het dynamische deel van de string en geeft het weer terug.

Voorafgaand aan ES2018, tagged sjabloon letters had syntactische beperkingen in verband met de escape sequences. Een backslash gevolgd door een bepaalde volgorde van de tekens werden behandeld als speciale tekens: a x geïnterpreteerd als een hex ontsnappen, een u geïnterpreteerd als een unicode-escape, en een gevolgd door een cijfer geïnterpreteerd als een octaal ontsnappen. Als een resultaat, strings, zoals “C:xxxuuu” of “ubuntu” werden als ongeldig beschouwd escape-reeksen door de interpreter en te dit te gooien zou een SyntaxError.

ES2018 verwijdert deze beperkingen uit tagged sjablonen en in plaats van het gooien van een fout, vertegenwoordigt ongeldige escape-reeksen als ‘ undefined:

functie fn(string, vervanging) {
console.log(vervangende); // → escape-reeksen:
console.log(string[1]); // → undefined
}

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

Houd in gedachten dat het gebruik van illegale escape-reeksen in een reguliere sjabloon letterlijke veroorzaakt nog steeds een fout:

const resultaat = `ubuntu`;
// → SyntaxError: Ongeldig Unicode-escape-reeks
Ondersteuning voor Sjabloon Letterlijke Herziening

Chrome
Firefox
Safari
Rand
62 56 11 Geen
Chrome Voor Android
Firefox Voor Android
iOS Safari
Edge Mobiel
Samsung Internet
Android Webview
62 56 11 Geen 8.2 62

Node.js:

  • 8.3.0 (vereist –de harmonie runtime vlag)
  • 8.10.0 (volledige ondersteuning)

Inpakken

We hebben goed gekeken naar een aantal belangrijke functies die zijn geïntroduceerd in ES2018 met inbegrip van asynchrone iteratie, de rest verspreid en de eigenschappen van de Belofte.prototype.tot slot () en toevoegingen aan de RegExp-object. Hoewel sommige van deze functies zijn niet volledig uitgevoerd door enkele browser leveranciers nog, ze kunnen nog steeds gebruikt worden vandaag de dag dankzij JavaScript transpilers zoals Babel.

ECMAScript is een snel veranderende en nieuwe functies worden geïntroduceerd, elke zo vaak, dus check de lijst van afgewerkte voorstellen voor de volledige omvang van wat er nieuw is. Zijn er nieuwe functies die je bijzonder enthousiast over? Deel ze in de comments!