Nya ES2018 Har Alla JavaScript-Utvecklare Bör Veta

0
23

Den nionde upplagan av ECMAScript standard, officiellt känd som ECMAScript 2018 (eller ES2018 för kort), som släpptes i juni 2018. Börjar med ES2016, nya versioner av ECMAScript specifikationer publiceras årligen i stället för varje flera år och lägger till färre funktioner än större upplagor används till. Den senaste utgåvan av standarden fortsätter den årliga utgivningscykel genom att lägga till fyra nya RegExp funktioner, vila/sprida egenskaper, asynkron iteration, och Lovar.prototyp.äntligen. Dessutom, ES2018 droppar syntax begränsning av escape-sekvenser från märkta mallar.

Dessa nya förändringar förklaras i avsnitten som följer.

Resten/Sprida Egenskaper

En av de mest intressanta funktionerna för att ES2015 var spridningen operatör. Denna operatör gör att kopiera och sammanslagning av matriser mycket enklare. Istället för att ringa concat() eller skiva () – metoden, du kan använda den … operatör:

const arr1 = [10, 20, 30];

// skapa en kopia av arr1
const kopiera = […arr1];

konsolen.logga in(kopiera); // → [10, 20, 30]

const arr2 = [40, 50];

// sammanfoga arr2 med arr1
const sammanfoga = […arr1, …arr2];

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

Spridningen operatör kommer också praktiskt i situationer där en mängd måste skickas in som separata argument till en funktion. Till exempel:

const pi = [10, 20, 30]

// motsvarande
// konsolen.log(Matematik.max(10, 20, 30));
konsolen.log(Matematik.max(…arr)); // → 30

ES2018 ytterligare expanderar denna syntax genom att lägga till egenskaper för att sprida objektlitteraler. Med spridningen egenskaper du kan kopiera egen uppräkningsbara egenskaperna hos ett objekt till ett nytt objekt. Tänk dig följande exempel:

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

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

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

I denna kod … operatör används för att hämta egenskaper för obj1 och tilldela dem till obj2. Innan ES2018, försök att göra så skulle kasta ett fel. Om det finns flera fastigheter med samma namn, den egendom som kommer sist kommer att användas:

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

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

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

Spridningen av fastigheter också ge ett nytt sätt att sammanfoga två eller flera föremål, som kan användas som ett alternativ till Objektet.tilldela() metoden:

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

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

// ES2015
konsolen.log(Objekt.tilldela({}, obj1, obj2, obj3)); // → {a: 10 b: 20, c: 30}

Observera dock att sprida egenskaper inte alltid ger samma resultat som Objekt.tilldela(). Betrakta följande kod:

Objektet.defineProperty(Objekt.prototyp, ‘a’, {
set(värde) {
konsolen.logga in (“som kallas!’);
}
});

const obj = {s: 10};

konsolen.log({…obj});
// → {s: 10}

konsolen.log(Objekt.tilldela({}, obj));
// → ange som kallas!
// → {}

I denna kod Objekt.tilldela () – metoden utför ärvt setter egendom. Omvänt, spridning egenskaper helt enkelt ignorera setter.

Det är viktigt att komma ihåg att sprida egenskaper bara kopiera uppräkningsbara egenskaper. I följande exempel, den typ av egendom kommer inte att visa upp i den kopierade objekt eftersom dess uppräkningsbara attribut är falska:

const bil = {
färg: “blå”
};

Objektet.defineProperty(bil, ‘typ’, {
värde: ‘coupe’,
uppräkningsbara: falskt
});

konsolen.log({…bilen}); // → {color: “blå”}

Ärvda egenskaper ignoreras även om de är uppräkningsbara:

const bil = {
färg: “blå”
};

const car2 = Objekt.skapa(bil, {
typ: {
värde: ‘coupe’,
uppräkningsbara: sant,
}
});

konsolen.log(car2.färg); // → blå
konsolen.log(car2.hasOwnProperty (“color”)); / / → falskt

konsolen.log(car2.typ); // → coupe
konsolen.log(car2.hasOwnProperty (“typ”)); / / → true

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

I denna kod, car2 ärver färg egendom från bilen. Eftersom spridningen egenskaper bara att kopiera egenskaper från ett objekt, en färg som inte ingår i det returnerade värdet.

Tänk på att sprida egenskaper kan bara göra ett grunt kopia av ett objekt. Om en fastighet har ett objekt, bara referensen till objektet som ska kopieras:

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

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

X fastighet i copy1 refererar till samma objekt i minnet att x i copy2 hänvisar till, så strikt jämställdhet operatör returnerar sant.

En annan användbar funktion lagts till ES2015 var övriga parametrar, som JavaScript aktiverat för programmerare att använda … för att representera värden som en array. Till exempel:

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

konsolen.log(x); // → 10
konsolen.log(resten); // → [20, 30]

Här är det första objektet i arr är tilldelade till x, och resterande delar är tilldelade till resten variabel. Detta mönster, som kallas array omstrukturering av valutan, blev så populär att den Ecma Tekniska Utskottet beslutade att ta med en liknande funktionalitet till objekt:

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

const {a, …resten} = obj;

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

Denna kod använder resten egenskaper i en omstrukturering av valutan i uppdrag att kopiera den återstående egen uppräkningsbara fastigheter till ett nytt objekt. Observera att övriga egenskaper alltid måste visas i slutet av objektet, annars kommer ett felmeddelande ut:

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

const {…resten, en} = root; // → SyntaxError: Övriga element måste vara sista elementet

Tänk också på att använda flera resten syntaxer i ett objekt orsakar ett fel, om de är kapslade:

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

const {b: {x, …rest1}, …rest2} = root; // inget fel

const {…vila …rest2} = root; // → SyntaxError: Övriga element måste vara sista elementet
Stöd för Vila/Sprida Egenskaper

Chrome
Firefox
Safari
Kant
60 55 11.1 Inga
Chrome För Android
Firefox För Android
iOS Safari
Kanten Mobil
Samsung Internet
Android Webview
60 55 11.3 Inga 8.2 60

Node.js:

  • 8.0.0 (kräver –harmoni runtime flagga)
  • 8.3.0 (full support)

Asynkron Iteration

Iterera över en samling av data är en viktig del av planeringen. Innan ES2015, JavaScript, förutsatt uttalanden som för, för…i, och samtidigt, och metoder som karta(), filter(), och forEach() för detta ändamål. För att göra det möjligt för programmerare att behandla element i en samling, en i taget, ES2015 infördes iterator gränssnitt.

Ett objekt är iterable om den har en Symbol.iterator egendom. I ES2015, strängar och samlingar av föremål såsom Set, Map, och Array komma med en Symbol.iterator egendom och därmed är iterable. Följande kod ger ett exempel på hur man får tillgång till de delar av en iterable en i taget:

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

konsolen.log(iterator.nästa()); // → {värde: 10, klar: false}
konsolen.log(iterator.nästa()); // → {värde: 20, done: false}
konsolen.log(iterator.nästa()); // → {värde: 30, klar: false}
konsolen.log(iterator.nästa()); // → {värde: odefinierad, och gjort: true}

Symbol.iterator är en välkänd symbol anger en funktion som returnerar en iterator. Det primära sättet att interagera med en iterator är next () – metod. Denna metod returnerar ett objekt med två egenskaper: värde och gjort. Det värde som fastigheten innehåller värdet av nästa element i samlingen. Klar fastigheten innehåller antingen sant eller falskt anger om inte slutet av samlingen har nått.

Som standard, är en vanlig objekt är inte iterable, men det kan bli iterable om du definiera en Symbol.iterator egendom på det, som i detta exempel:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbol.iterator]() {
const värden = Objekt.nycklar(detta);
låt i = 0;
return {
nästa: () => {
return {
värde: [värderingar[i++]],
gjort: jag > – värden.längd
}
}
};
}
};

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

konsolen.log(iterator.nästa()); // → {värde: 10, klar: false}
konsolen.log(iterator.nästa()); // → {värde: 20, done: false}
konsolen.log(iterator.nästa()); // → {värde: 30, klar: false}
konsolen.log(iterator.nästa()); // → {värde: odefinierad, och gjort: true}

Detta objekt är iterable eftersom det definierar en Symbol.iterator egendom. Iterator använder Objektet.nycklar() metod för att få en array av objekt är egenskapen namn och sedan tilldela den till de värden som är konstant. Det definierar också en räknare variabel och ger det en första värdet 0. När iterator är avrättades den returnerar ett objekt som innehåller en next () – metod. Varje gång next () – metoden anropas, returnerar {värde, gjort} par, med värde innehav nästa element i samlingen och gjort hålla en Boolean som anger om iterator har nått behov av samlingen.

Medan denna kod fungerar perfekt, det är onödigt komplicerad. Lyckligtvis, med hjälp av en generator funktion kan avsevärt förenkla processen:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbol.iterator]: funktionen * () {
för (låt nyckeln i detta) {
ge denna[key];
}
}
};

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

konsolen.log(iterator.nästa()); // → {värde: 10, klar: false}
konsolen.log(iterator.nästa()); // → {värde: 20, done: false}
konsolen.log(iterator.nästa()); // → {värde: 30, klar: false}
konsolen.log(iterator.nästa()); // → {värde: odefinierad, och gjort: true}

Inuti denna generator, en för…i loopen används för att räkna upp över insamling och ger värdet för varje fastighet. Resultatet är exakt samma som i det föregående exemplet, men det är avsevärt kortare.

En nackdel med iterators är att de inte är lämpliga för att representera asynkron data källor. ES2018 lösning för att råda bot på det är asynkron iterators och asynkron iterables. En asynkron iterator skiljer sig från en konventionell iterator i att, i stället för att returnera ett vanligt objekt i form av {värde, gjort}, returneras ett löfte som uppfyller {värde, gjort}. En asynkron iterable definierar en Symbol.asyncIterator metod (i stället för Symbolen.iterator) som returnerar en asynkron iterator.

Ett exempel bör göra detta klarare:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbol.asyncIterator]() {
const värden = Objekt.nycklar(detta);
låt i = 0;
return {
nästa: () => {
tillbaka Löftet.lösa({
värde: [värderingar[i++]],
gjort: jag > – värden.längd
});
}
};
}
};

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

konsolen.log(iterator.next (nästa).då(resultat => {
konsolen.logga in(resultat); // → {värde: 10, klar: false}
}));

konsolen.log(iterator.next (nästa).då(resultat => {
konsolen.logga in(resultat); // → {värde: 20, done: false}
}));

konsolen.log(iterator.next (nästa).då(resultat => {
konsolen.logga in(resultat); // → {värde: 30, klar: false}
}));

konsolen.log(iterator.next (nästa).då(resultat => {
konsolen.logga in(resultat); // → {värde: odefinierad, och gjort: true}
}));

Observera att det inte är möjligt att använda en iterator av löften för att uppnå samma resultat. Även om en normal, synkron iterator kan asynkront bestämma värdena, det återstår att bestämma tillståndet “klar” synkront.

Igen, du kan förenkla processen genom att använda en generator funktion, som visas nedan:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbol.asyncIterator]: asynkron funktion * () {
för (låt nyckeln i detta) {
ge denna[key];
}
}
};

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

konsolen.log(iterator.next (nästa).då(resultat => {
konsolen.logga in(resultat); // → {värde: 10, klar: false}
}));

konsolen.log(iterator.next (nästa).då(resultat => {
konsolen.logga in(resultat); // → {värde: 20, done: false}
}));

konsolen.log(iterator.next (nästa).då(resultat => {
konsolen.logga in(resultat); // → {värde: 30, klar: false}
}));

konsolen.log(iterator.next (nästa).då(resultat => {
konsolen.logga in(resultat); // → {värde: odefinierad, och gjort: true}
}));

Normalt, en generator funktionen returnerar en generator objekt med en next () – metod. När nästa() anropas returnerar en {värde, gjort} par vars värde egendomen har den gett värde. En asynkron generator gör samma sak, utom att den returnerar ett löfte som uppfyller {värde, gjort}.

Ett enkelt sätt att iterera över en iterable objekt är att använda den för…av uttalandet, men för…fungerar inte med asynkron iterables som värde och gjort bestäms inte synkront. Av denna anledning, ES2018 ger för…väntar…uttalande. Låt oss titta på ett exempel:

const collection = {
a: 10,
b: 20,
c: 30,
[Symbol.asyncIterator]: asynkron funktion * () {
för (låt nyckeln i detta) {
ge denna[key];
}
}
};

(asynkron function () {
för väntar (const x samling) {
konsolen.log(x);
}
})();

// loggarna:
// → 10
// → 20
// → 30

I denna kod för att…väntar…av uttalande implicit kallar Symbol.asyncIterator metod för insamling syfte att få en asynkron iterator. Varje gång genom öglan, nästa() metoden iterator kallas, som returnerar ett löfte. När löftet är löst, det värde som egendom av den resulterande objektet är läser till x-variabel. Slingan fortsätter tills den gjort egenskap hos det returnerade objektet har värdet true.

Tänk på att för…väntar…uttalande är endast giltig inom asynkrona generatorer och asynkrona funktioner. Brott mot denna regel resulterar i en SyntaxError.

Nästa () – metod kan returnera ett löfte som avvisar. För att på ett elegant handtag avvisade lovar att du kan svepa in den för…väntar…av uttalande i en try…catch, så här:

const collection = {
[Symbol.asyncIterator]() {
return {
nästa: () => {
tillbaka Löftet.förkasta(nya Fel (“Något gick fel”.))
}
};
}
};

(asynkron function() {
try {
för väntar (const värdet av samlingen) {}
} catch (error) {
konsolen.logga in (“Fast:’ + fel.meddelande);
}
})();

// loggarna:
// → Fångat Något gick fel.
Stöd för Asynkrona Iterators

Chrome
Firefox
Safari
Kant
63 57 12 Inga
Chrome För Android
Firefox För Android
iOS Safari
Kanten Mobil
Samsung Internet
Android Webview
63 57 12 Inga 8.2 63

Node.js:

  • 8.10.0 (kräver –harmony_async_iteration flagga)
  • 10.0.0 (full support)

Lovar.prototyp.äntligen

En annan spännande tillägg till ES2018 är den äntligen () – metoden. Flera JavaScript-bibliotek hade tidigare genomfört en liknande metod, som visat sig vara användbart i många situationer. Detta uppmuntrade Ecma Teknisk Kommitté för att officiellt lägga till slut() specifikation. Med denna metod, programmerare kommer att kunna utföra ett block av kod oavsett lovar öde. Låt oss titta på ett enkelt exempel:

hämta(‘https://www.google.com’)
.då((svar) => {
konsolen.logga in(som svar.status);
})
.catch((fel) => {
konsolen.log(fel);
})
.slutligen(() => {
dokumentet.querySelector(‘#spinner’).style.display = “none”;
});

Slutligen () – metoden är praktisk när du behöver göra några städa upp efter operationen är klar, oavsett huruvida det lyckats. I denna kod, äntligen() metod helt enkelt döljer den laddar spinner när data hämtas och bearbetas. Istället för att duplicera den slutliga logik i den då() och catch() metoder, kod registrerar en funktion att utföras en gång löftet är antingen uppfyllda eller inte.

Du kan uppnå samma resultat genom att använda lovar.då(func func) snarare än lovar.slutligen(func), men skulle du behöva upprepa samma kod i både uppfyllelse handler och avslag föraren, eller deklarera en variabel för det:

hämta(‘https://www.google.com’)
.då((svar) => {
konsolen.logga in(som svar.status);
})
.catch((fel) => {
konsolen.log(fel);
})
.då(final, slutlig).

funktion final() {
dokumentet.querySelector(‘#spinner’).style.display = “none”;
}

Som med sedan() och catch(), slutligen() metod som alltid returnerar ett löfte, så kan du kedja fler metoder. Normalt vill du använda slutligen() som den sista kedjan, men i vissa situationer, till exempel när du gör en HTTP-förfrågan, det är ett bra arbetssätt för att kedjan annan fångst() för att hantera fel som kan uppstå i slut().

Stöd för Löfte.prototyp.äntligen

Chrome
Firefox
Safari
Kant
63 58 11.1 18
Chrome För Android
Firefox För Android
iOS Safari
Kanten Mobil
Samsung Internet
Android Webview
63 58 11.1 Inga 8.2 63

Node.js:

10.0.0 (full support)

New RegExp Funktioner

ES2018 lägger fyra nya funktioner till RegExp-objekt, vilket ytterligare förbättrar JavaScript är sträng processkapacitet. Dessa funktioner är som följer:

  • s (dotAll) flagga
  • Heter fånga upp grupper
  • Lookbehind påståenden
  • Unicode egendom flyr

s (dotAll) Flagga

Punkt (.) är en speciell karaktär i ett reguljärt uttryck mönster som matchar alla tecken utom radbrytning tecken som radmatning (n), eller vagnretur (r). En lösning för att matcha alla tecken inklusive radbrytningar är att använda ett tecken klass med två motsatta shorthands som [dD]. Denna karaktär klassen berättar den reguljära uttryck motor för att hitta en karaktär som är antingen en siffra (d) eller en icke-siffra (D). Som ett resultat, det matchar vilket tecken som:

konsolen.log(/en[dD]två/.test (‘ntwo’)); // → true

ES2018 inför ett läge där dot kan med fördel användas för att uppnå samma resultat. Det här läget kan aktiveras på per-regex basis med hjälp av s flagg:

konsolen.log(/en.två/.test (‘ntwo’)); // → falskt
konsolen.log(/en.två/s.test (‘ntwo’)); // → true

Fördelen med att använda en flagga att välja på att det nya beteendet är bakåtkompatibilitet. Så att befintliga reguljära uttryck mönster att använda dot karaktär påverkas inte.

Heter Fånga Upp Grupper

I vissa reguljära uttryck mönster, med hjälp av en rad för att göra en hänvisning till fånga grupp kan vara förvirrande. Ta till exempel den reguljära uttryck /(d{4})-(d{2})-(d{2})/ som matchar ett datum. Eftersom datum notation i Amerikansk engelska är olika från Brittisk engelska, det är svårt att veta vilken grupp du hänvisar till dag och vilken grupp du hänvisar till månad:

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

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

ES2018 införs som heter fånga upp grupper som använder den (?<namn>…) syntax. Så, mönster för att matcha ett datum kan skrivas i en mindre tvetydigt sätt:

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

konsolen.log(match.grupper); // → {året: “2019”, månad: “01”, dagen: “10”}
konsolen.log(match.grupper.år); // → 2019
konsolen.log(match.grupper.månad); // → 01
konsolen.log(match.grupper.dagen); // → 10

Du kan återkalla en som heter fånga gruppen senare i mönstret genom att använda k – <namn> – syntax. Till exempel, för att hitta varandra följande dubbletter av ord i en mening, kan du använda /b(?<dup>w+)s+k<dup>b/:

const re = /b(?<dup>w+)s+k<dup>b/;
const match = re.exec(‘Get som att katten från bordet!’);

konsolen.log(match.index); // → 4
konsolen.log(match[0]); // → det som

För att infoga en som heter fånga gruppen i ersättningssträngen av ersätt () – metoden, du kommer att behöva använda $ – <namn> konstruera. Till exempel:

const str = ‘red & blue’;

konsolen.log(str.byt ut(/(red) & (blå)/, ‘$2 & $1’));
// → blå & röd

konsolen.log(str.byt ut(/(?<röd> > red) & (?<blå blå)/, ‘$<blå> > & $<röd>>’));
// → blå & röd
Lookbehind Påståenden

ES2018 ger lookbehind påståenden till JavaScript, som har funnits i andra regex implementationer för år. Tidigare, JavaScript stöds endast lookahead påståenden. En lookbehind påstående betecknas med (?<=…), och gör det möjligt för dig att matcha ett mönster baserat på delsträng som föregår mönster. Till exempel, om du vill matcha priset på en produkt i dollar, pund eller euro utan att fånga valuta symbol, kan du använda /(?<=$|£|€)d+(.d*)?/:

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

konsolen.logga in(nytt.exec(‘199’));
// → null

konsolen.logga in(nytt.exec(‘$199’));
// → [“199”, undefined index: 1, ingång: “$199”, grupper: undefined]

konsolen.logga in(nytt.exec(‘€50’));
// → [“50”, undefined index: 1, ingång: “50 euro”, grupper: undefined]

Det finns också en negativ version av lookbehind, som betecknas med (?<!…). En negativ lookbehind kan du matcha ett mönster endast om det inte föregås av mönster inom lookbehind. Till exempel, mönster /(?<!fn: s)available/ matchar ordet som finns om den inte har en “fn” – prefix:

const re = /(?<!fn: s)available/;

konsolen.logga in(nytt.exec(‘Vi beklagar att den här tjänsten är inte tillgänglig för närvarande’));
// → null

konsolen.logga in(nytt.exec(‘tjänsten’));
// → [“tillgänglig”, index: 15, ingång: “tjänsten är tillgänglig”, grupper: undefined]
Unicode Egendom Flyr

ES2018 erbjuder en ny typ av escape-sekvens som kallas Unicode egendom fly, som ger stöd för Unicode i reguljära uttryck. Anta att du vill matcha Unicode-tecknet ㉛ i en sträng. Även om ㉛ anses vara ett nummer, kan du inte matcha den med d stenografi karaktär klassen eftersom det bara stöder ASCII [0-9] tecken. Unicode egendom flyr, å andra sidan, kan användas för att matcha alla decimaltal i Unicode:

const str = ‘㉛’;

konsolen.log(/d/u.test(str)); // → falskt
konsolen.log(/s{Nummer}/u.test(str)); // → true

Likaså, om du vill matcha alla Unicode-tecken, kan du använda p{Alfabetisk}:

const str = ‘ض’;

konsolen.log(/s{Alfabetisk}/u.test(str)); // → true

/ / w stenografi kan inte matcha ض
konsolen.log(/w/u.test(str)); // → falskt

Det är också ett negerat version av p{…}, som betecknas med P{…}:

konsolen.log(/S{Nummer}/u.test(‘㉛’)); // → falskt
konsolen.log(/S{Nummer}/u.test(‘ض’)); // → true

konsolen.log(/S{Alfabetisk}/u.test(‘㉛’)); // → true
konsolen.log(/S{Alfabetisk}/u.test(‘ض’)); // → falskt

Förutom Bokstäver och Nummer, det finns fler egenskaper som kan användas i Unicode egendom flyr. Du kan hitta en lista med stöd för Unicode egenskaper i den specifikation som förslag.

Stöd för Nya RegExp Funktioner

Chrome
Firefox
Safari
Kant

s (dotAll) Flagga 62 Inga 11.1 Inga
Heter Fånga Upp Grupper 64 Inga 11.1 Inga
Lookbehind Påståenden 62 Inga Inga Inga
Unicode Egendom Flyr 64 Inga 11.1 Inga

Chrome (Android)
Firefox (Android)
iOS Safari
Kanten Mobil
Samsung Internet
Android Webview

s (dotAll) Flagga 62 Inga 11.3 Inga 8.2 62
Heter Fånga Upp Grupper 64 Inga 11.3 Inga Inga 64
Lookbehind Påståenden 62 Inga Inga Inga 8.2 62
Unicode Egendom Flyr 64 Inga 11.3 Inga Inga 64

Node.js:

  • 8.3.0 (kräver –harmoni runtime flagga)
  • 8.10.0 (stöd för s (dotAll) flagga och lookbehind påståenden)
  • 10.0.0 (full support)

Mall Bokstavlig Revision

När en mall bokstavlig omedelbart föregås av ett uttryck, är det som kallas en märkt mall bokstavlig. En taggad mall är praktiskt när du vill analysera en mall bokstavliga med en funktion. Tänk dig följande exempel:

funktion med fn(string, ersätta) {
om(substitut === ‘ES6’) {
substitut = ‘ES2015’
}
tillbaka ersätta + string[1];
}

const version = ‘ES6’;
const resultat = fn`${version} var en stor uppdatering`;

konsolen.logga in(resultat); // → ES2015 var en stor uppdatering

I denna kod, ett tag uttryck — som är en vanlig funktion anropas och passerade den mall som bokstavliga. Den funktionen helt enkelt ändrar den dynamiska delen av strängen och returnerar det.

Innan ES2018, märkta mall litteraler hade syntaktiska restriktioner relaterade till escape-sekvenser. Ett omvänt snedstreck följt av en viss sekvens av tecken behandlas som specialtecken: x tolkas som ett hex-fly, en u tolkas som en unicode-fly, och en följt av en siffra tolkas som ett oktalt fly. Som ett resultat, strängar som “C:xxxuuu” eller “ubuntu” var betraktas som ogiltigt escape-sekvenser av tolk och skulle kasta en SyntaxError.

ES2018 tar bort dessa begränsningar från märkta mallar och istället för att kasta ett fel, som utgör ogiltig escape-sekvenser som odefinierade:

funktion med fn(string, ersätta) {
konsolen.logga in(substitut); // → escape-sekvenser:
konsolen.log(string[1]); // → odefinierad
}

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

Tänk på att använda olagliga escape-sekvenser i en vanlig mall bokstavlig fortfarande orsakar ett felmeddelande:

const resultat = `ubuntu`;
// → SyntaxError: Ogiltig Unicode-escape-sekvens
Stöd för Mall Bokstavlig Revision

Chrome
Firefox
Safari
Kant
62 56 11 Inga
Chrome För Android
Firefox För Android
iOS Safari
Kanten Mobil
Samsung Internet
Android Webview
62 56 11 Inga 8.2 62

Node.js:

  • 8.3.0 (kräver –harmoni runtime flagga)
  • 8.10.0 (full support)

Att linda upp

Vi har tagit en god titt på flera viktiga funktioner som införts i ES2018 inklusive asynkron iteration, vila/sprida egenskaper, Lovar.prototyp.slutligen(), och tillägg till RegExp-objekt. Även om vissa av dessa funktioner är inte fullt ut av vissa leverantörer av webbläsare ännu, de kan fortfarande användas för idag, tack vare JavaScript transpilers som Babel.

ECMAScript utvecklas snabbt och nya funktioner införs varje så ofta, så kolla in listan över färdiga förslag för den fulla omfattningen av vad som är nytt. Finns det några nya funktioner som du särskilt upphetsad över? Dela dem i kommentarerna!