Nye ES2018 Har Hver JavaScript Utvikler Bør Vite

0
45

Den niende utgaven av ECMAScript standard, offisielt kjent som ECMAScript 2018 (eller ES2018 for kort), ble utgitt i juni 2018. Starter med ES2016, nye versjoner av ECMAScript spesifikasjoner er utgitt årlig snarere enn hvert flere år, og legge til færre funksjoner enn store utgaver brukes til. Den nyeste utgaven av standarden fortsetter den årlige utgivelsen syklus ved å legge til fire nye RegExp funksjoner, hvile/spredt egenskaper, asynkron iterasjon, og Lover.prototypen.til slutt. I tillegg, ES2018 dråper syntaksen begrensning av escape-sekvenser fra merket maler.

Disse nye endringene er beskrevet i underavsnitt følge.

Resten/Spredt Egenskaper

En av de mest interessante funksjonene som er lagt til ES2015 var spredt operatør. Denne operatøren gjør kopiering og sammenslåing av matriser mye enklere. Snarere enn å ringe concat() eller slice () – metoden, kan du bruke … operatør:

const arr1 = [10, 20, 30];

// lager en kopi av arr1
const kopi = […arr1];

– konsollen.logg(kopi); // → [10, 20, 30]

const arr2 = [40, 50];

// merge-arr2 med arr1
const flette = […arr1, …arr2];

– konsollen.logg(flette); // → [10, 20, 30, 40, 50]

Spredningen operatøren også er nyttig i situasjoner hvor en matrise må være bestått i som separate argumenter til en funksjon. For eksempel:

const arr = [10, 20, 30]

// tilsvarende
/ / – konsollen.logg(Matematikk.max(10, 20, 30));
– konsollen.logg(Matematikk.max(…arr)); // → 30

ES2018 ytterligere utvider dette syntaks ved å legge til spredt egenskaper til objektet verdiane. Med spredning egenskaper kan du kopiere egne opplistet egenskapene til et objekt til et nytt objekt. Tenk deg følgende eksempel:

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

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

– konsollen.logg(obj2); // → {a: 10 b: 20 c: 30}

I denne koden, … operatør er brukt for å hente egenskapene til obj1, og tilordne dem til obj2. Før ES2018, forsøker å gjøre det ville kaste en feil. Hvis det er flere egenskaper med det samme navnet, egenskapen som kommer til slutt vil bli brukt:

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

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

– konsollen.logg(obj2); // → {a: 30, b: 20}

Spre egenskaper også gi en ny måte å slå sammen to eller flere gjenstander, som kan brukes som et alternativ til Objektet.tilordne () – metoden:

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

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

// ES2015
– konsollen.logg(Objekt.tilordne({}, obj1, obj2, obj3)); // → {a: 10 b: 20 c: 30}

Vær imidlertid oppmerksom på at spredningen egenskaper ikke alltid produsere samme resultat som Objekt.tilordne(). Vurder følgende kode:

Objektet.defineProperty(Objekt.prototype, ‘a’, {
sett(verdi) {
– konsollen.logg(‘sett kalt!’);
}
});

const obj = {a: 10};

– konsollen.logg({…obj});
// → {a: 10}

– konsollen.logg(Objekt.tilordne({}, obj));
// → angi som kalles!
// → {}

I denne koden, Objektet.tilordne () – metoden kjører arvet setter holderen. Derimot er spredt egenskaper bare ignorere fuglehunden.

Det er viktig å huske på at spredningen egenskaper bare kopiere opplistet egenskaper. I følgende eksempel type eiendom vil ikke dukke opp i det kopierte objektet fordi det opplistet-attributtet settes til false:

const bil = {
farge: ‘blå’
};

Objektet.defineProperty(bil, ‘type’, {
verdi: ‘coupe’,
opplistet: false
});

– konsollen.logg({…bilen}); // → {color: “blå”}

Arvet egenskaper ignoreres, selv om de er opplistet:

const bil = {
farge: ‘blå’
};

const car2 = Objekt.opprette(bil, {
type: {
verdi: ‘coupe’,
opplistet: true,
}
});

– konsollen.logg(car2.farge); // → blå
– konsollen.logg(car2.hasOwnProperty(‘farge’)); // → false

– konsollen.logg(car2.type); // → coupe
– konsollen.logg(car2.hasOwnProperty(‘type’)); // → sant

– konsollen.logg({…car2}); // → {type: “kutt”}

I denne koden, car2 arver color eiendom fra bil. Fordi spre egenskaper bare kopiere egne egenskaper ved et objekt, fargen er ikke inkludert i retur verdi.

Husk at spredningen egenskaper kan bare gjøre en liten kopi av et objekt. Dersom en eiendom har et objekt, bare referansen til objektet som skal kopieres:

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

– konsollen.logg(copy1.x === copy2.x); // → sant

X eiendom i copy1 refererer til samme objekt i minne at x i copy2 refererer til, så de strenge likestilling operatør returnerer true.

En annen nyttig funksjon er lagt til ES2015 var resten parametere, som aktivert JavaScript programmerere til å bruke … å representere verdier som en matrise. For eksempel:

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

– konsollen.log(x); // → 10
– konsollen.logg(resten); // → [20, 30]

Her er det første elementet i arr er tilordnet til x, og innslaget er tilordnet til resten variabel. Dette mønsteret, kalt array destructuring, ble så populær at Ecma-Tekniske Komiteen bestemte seg for å bringe en lignende funksjonalitet for å objekter:

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

const {a, …resten} = obj;

– konsollen.log(a); // → 10
– konsollen.logg(resten); // → {b: 20 c: 30}

Denne koden bruker resten egenskaper i en destructuring oppdrag å kopiere de resterende egne opplistet egenskaper til et nytt objekt. Vær oppmerksom på at resten egenskaper må alltid vises på slutten av objektet, ellers en feil er kastet:

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

const {…resten, a} = obj; // → SyntaxError: Resten element må være siste elementet

Husk også på at du bruker flere resten syntaxes i en gjenstand gjør en feil, med mindre de er nestet:

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

const {b: {x, …rest1}, …rest2} = obj; // ingen feil

const {…resten, …rest2} = obj; // → SyntaxError: Resten element må være siste elementet
Støtte for Hvile/Spredt Egenskaper

Chrome
Firefox
Safari
Kant
60 55 11.1 Ingen
Chrome For Android
Firefox For Android
Safari
Edge Mobile
Samsung Internett
Android Webview
60 55 11.3 Ingen 8.2 60

Node.js:

  • 8.0.0 (krever –harmoni runtime flagg)
  • 8.3.0 (full støtte)

Asynkron Iterasjon

Iterating over en samling av data er en viktig del av programmering. Før ES2015, JavaScript gitt uttrykk, for eksempel, for…i, og stund, og metoder slik som kart(), filter(), og forEach() for dette formålet. For å aktivere programmerere til å behandle elementer i en samling, ett av gangen, ES2015 innført iterator-grensesnitt.

Et objekt er iterable hvis det er et Symbol.iterator eiendom. I ES2015, strenger og samlinger av objekter som er Satt, Kart og Utvalg kommer med et Symbol.iterator eiendom og dermed er iterable. Følgende kode gir et eksempel på hvordan du kan få tilgang til deler av et iterable ett av gangen:

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

– konsollen.logg(iterator.neste()); // → {value: 10, gjort: false}
– konsollen.logg(iterator.neste()); // → {value: 20, gjort: false}
– konsollen.logg(iterator.neste()); // → {value: 30, gjort: false}
– konsollen.logg(iterator.neste()); // → {value: udefinert, gjort: true}

Symbol.iterator er et velkjent symbol angir en funksjon som returnerer en iterator. Den primære måten å samhandle med en iterator er den neste () – metoden. Denne metoden returnerer et objekt med to egenskaper: verdi og gjort. Den verdi eiendommen inneholder verdien av den neste element i samlingen. Det gjøres eiendom inneholder enten true eller false som betegner hvorvidt slutten av samlingen har nådd.

Standard, et vanlig objekt er ikke iterable, men det kan bli iterable hvis du definerer et Symbol.iterator eiendom på det, som i dette eksemplet:

const samling = {
a: 10,
b: 20,
c: 30,
[Symbolet.iterator]() {
const verdier = Objekt.tastene(this);
la i = 0;
tilbake {
neste: () => {
tilbake {
verdi: dette[verdier[i++]],
gjort: jeg > verdier.lengde
}
}
};
}
};

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

– konsollen.logg(iterator.neste()); // → {value: 10, gjort: false}
– konsollen.logg(iterator.neste()); // → {value: 20, gjort: false}
– konsollen.logg(iterator.neste()); // → {value: 30, gjort: false}
– konsollen.logg(iterator.neste()); // → {value: udefinert, gjort: true}

Dette objektet er iterable fordi det definerer et Symbol.iterator eiendom. Den iterator bruker Objektet.nøkler () – metoden for å få et utvalg av objektet eiendom navn og deretter tilordner den til verdier konstant. Den definerer også en teller-variabel og gir det en initial verdi på 0. Når iterator er utført den returnerer et objekt som inneholder en neste () – metoden. Hver gang den neste () – metoden er kalt opp, det gir en {verdi, gjort} par, med verdi som holder den neste element i samlingen og gjort å holde en Boolsk som angir om iterator har nådd trenger av samlingen.

Mens denne koden fungerer perfekt, det er unødvendig komplisert. Heldigvis, ved hjelp av en generator funksjonen kan betydelig forenkle prosessen:

const samling = {
a: 10,
b: 20,
c: 30,
[Symbolet.iterator]: funksjon * () {
for (la nøkkelen i dette) {
gi denne[nøkkel];
}
}
};

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

– konsollen.logg(iterator.neste()); // → {value: 10, gjort: false}
– konsollen.logg(iterator.neste()); // → {value: 20, gjort: false}
– konsollen.logg(iterator.neste()); // → {value: 30, gjort: false}
– konsollen.logg(iterator.neste()); // → {value: udefinert, gjort: true}

Inne i denne generatoren, en for…i loop brukes til å nummerere over samlingen og gi verdi av hver enkelt eiendel. Resultatet er nøyaktig den samme som i forrige eksempel, men det er mye kortere.

En ulempe med iterators er at de ikke er egnet for å representere asynkron data kilder. ES2018 løsning for å bøte på dette er asynkron iterators og asynkron iterables. En asynkron iterator er forskjellig fra et vanlig iterator i at, i stedet for å returnere en vanlig objekt i form av {verdi, gjort}, gir et løfte som oppfyller {verdi, gjort}. En asynkron iterable definerer et Symbol.asyncIterator metode (i stedet for Symbolet.iterator) som returnerer en asynkron iterator.

Et eksempel bør gjøre dette klarere:

const samling = {
a: 10,
b: 20,
c: 30,
[Symbolet.asyncIterator]() {
const verdier = Objekt.tastene(this);
la i = 0;
tilbake {
neste: () => {
tilbake Løfte.løse({
verdi: dette[verdier[i++]],
gjort: jeg > verdier.lengde
});
}
};
}
};

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

– konsollen.logg(iterator.neste().deretter(resultat => {
– konsollen.logg(resultat); // → {value: 10, gjort: false}
}));

– konsollen.logg(iterator.neste().deretter(resultat => {
– konsollen.logg(resultat); // → {value: 20, gjort: false}
}));

– konsollen.logg(iterator.neste().deretter(resultat => {
– konsollen.logg(resultat); // → {value: 30, gjort: false}
}));

– konsollen.logg(iterator.neste().deretter(resultat => {
– konsollen.logg(resultat); // → {value: udefinert, gjort: true}
}));

Merk at det ikke er mulig å bruke en iterator av lover for å oppnå samme resultat. Selv om en normal, synkron iterator kan asynkront bestemme verdier, er det fortsatt behov for å avgjøre hvilken stat som er “gjort” synkront.

Igjen, kan du forenkle prosessen ved hjelp av en generator funksjon, som vist nedenfor:

const samling = {
a: 10,
b: 20,
c: 30,
[Symbolet.asyncIterator]: asynkron funksjon * () {
for (la nøkkelen i dette) {
gi denne[nøkkel];
}
}
};

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

– konsollen.logg(iterator.neste().deretter(resultat => {
– konsollen.logg(resultat); // → {value: 10, gjort: false}
}));

– konsollen.logg(iterator.neste().deretter(resultat => {
– konsollen.logg(resultat); // → {value: 20, gjort: false}
}));

– konsollen.logg(iterator.neste().deretter(resultat => {
– konsollen.logg(resultat); // → {value: 30, gjort: false}
}));

– konsollen.logg(iterator.neste().deretter(resultat => {
– konsollen.logg(resultat); // → {value: udefinert, gjort: true}
}));

Vanligvis, en generator funksjonen returnerer en generator objekt med en neste () – metoden. Når neste() kalles den returnerer en {verdi, gjort} par som har en verdi eiendommen har gitt verdi. En asynkron generator gjør det samme, bortsett fra at den returnerer et løfte som oppfyller {verdi, gjort}.

En enkel måte å iterere over en iterable objekt på, er å bruke den for…av erklæringen, men for…for ikke arbeidet med asynkron iterables som verdi og gjort er ikke bestemt synkront. For denne grunn, ES2018 gir for…venter…til uttalelse. La oss se på et eksempel:

const samling = {
a: 10,
b: 20,
c: 30,
[Symbolet.asyncIterator]: asynkron funksjon * () {
for (la nøkkelen i dette) {
gi denne[nøkkel];
}
}
};

(asynkron function () {
for venter (const x av-samling) {
– konsollen.log(x);
}
})();

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

I denne koden, for…venter…av uttalelse implisitt samtaler Symbolet.asyncIterator metode på samling objekt for å få en asynkron iterator. Hver gang gjennom løkken, neste () – metoden for iterator er kalt, som returnerer et løfte. Når løftet er løst, er verdien eiendom som følge objektet er lest opp for x-variabelen. Løkken fortsetter inntil gjort holderen for det returnerte objektet har verdien true.

Holde i tankene at for…venter…av setningen er bare gyldige innenfor asynkrone generatorer og asynkron funksjoner. Brudd på denne regelen resulterer i en SyntaxError.

Den neste () – metoden kan returnere et løfte som avviser. For å grasiøst håndtere en avvist lover, du kan bryte for…venter…av uttalelse i en prøve…catch-setning, som dette:

const samling = {
[Symbolet.asyncIterator]() {
tilbake {
neste: () => {
tilbake Løfte.avvis(ny Feil (“Noe gikk feil.”))
}
};
}
};

(asynkron function() {
try {
for venter (const verdien av-samling) {}
} catch (feil) {
– konsollen.logg(‘Fanget:’ + feil.melding);
}
})();

// logs:
// → Fanget: Noe gikk galt.
Støtte for Asynkron Iterators

Chrome
Firefox
Safari
Kant
63 57 12 Ingen
Chrome For Android
Firefox For Android
Safari
Edge Mobile
Samsung Internett
Android Webview
63 57 12 Ingen 8.2 63

Node.js:

  • 8.10.0 (krever –harmony_async_iteration flagg)
  • 10.0.0 (full støtte)

Løftet.prototypen.til slutt

En annen spennende tillegg til ES2018 er endelig () – metoden. Flere JavaScript-biblioteker hadde tidligere gjennomført en lignende metode, som viste seg nyttig i mange situasjoner. Dette oppmuntret Ecma Teknisk Komité for å offisielt legge til slutt() til spesifikasjon. Med denne metoden, programmerere vil være i stand til å utføre en blokk med kode uavhengig av løftet sin skjebne. La oss se på et enkelt eksempel:

hente(‘https://www.google.com’)
.deretter((respons) => {
– konsollen.logg(respons.status);
})
.catch((feil) => {
– konsollen.logg(feil);
})
.til slutt(() => {
dokumentet.querySelector(‘#spinner’).stil.display = ‘ingen’;
});

Endelig () – metoden kommer i hendig når du trenger å gjøre noen rydde opp etter operasjonen er ferdig, uavhengig av om eller ikke det lyktes. I denne koden, endelig () – metoden bare skjuler lasting spinner når dataene er hentet og behandlet. I stedet for å duplisere den endelige logikk i den deretter() og fangst() metoder, koden registrerer en funksjon for å bli henrettet når løftet er enten oppfylt eller avvist.

Du kan oppnå samme resultat ved hjelp av lover.deretter(func, func) snarere enn lover.til slutt(func), men du ville ha til å gjenta den samme koden på begge oppfyllelse handler og avvisning handler, eller å deklarere en variabel for det:

hente(‘https://www.google.com’)
.deretter((respons) => {
– konsollen.logg(respons.status);
})
.catch((feil) => {
– konsollen.logg(feil);
})
.deretter(endelig, endelig);

funksjonen siste() {
dokumentet.querySelector(‘#spinner’).stil.display = ‘ingen’;
}

Som med så() og fangst(), som til slutt () – metoden alltid returnerer et løfte, så du kan kjede flere metoder. Vanligvis, du ønsker å bruke til slutt() som den siste kjeden, men i visse situasjoner, for eksempel når du gjør en HTTP-forespørsel, det er en god praksis å kjede annen catch() for å håndtere feil som kan oppstå i til slutt().

Støtte for Løftet.prototypen.til slutt

Chrome
Firefox
Safari
Kant
63 58 11.1 18
Chrome For Android
Firefox For Android
Safari
Edge Mobile
Samsung Internett
Android Webview
63 58 11.1 Ingen 8.2 63

Node.js:

10.0.0 (full støtte)

Nye RegExp Funksjoner

ES2018 legger til fire nye funksjoner til RegExp objekt, noe som ytterligere forbedrer JavaScript er streng behandling evner. Disse funksjonene er som følger:

  • s (dotAll) flagg
  • Oppkalt fange grupper
  • Lookbehind påstander
  • Unicode eiendom rømming

s (dotAll) Flagg

Punktum (.) er en spesiell karakter i et vanlig uttrykk som matcher alle tegn, bortsett fra linjeskift-tegn, for eksempel linjeskift (n) eller linjeskift (r). En løsning for å matche alle tegn, inkludert linje pauser på, er å bruke en karakter klasse med to motsatte shorthands som [dD]. Dette tegnet klasse forteller regular expression engine å finne en karakter som er enten et siffer (d) eller en ikke-sifret (D). Som et resultat, er det samsvarer med et hvilket som helst tegn:

– konsollen.logg (/[dD]to/.test (“enntwo’)); // → sant

ES2018 introduserer en modus hvor dot kan brukes for å oppnå det samme resultatet. Denne modusen kan aktiveres på per-regex basis ved hjelp av s flagg:

– konsollen.logg(/ene.to/.test (“enntwo’)); // → false
– konsollen.logg(/ene.to/s.test (“enntwo’)); // → sant

Fordelen med å bruke et flagg for å velge å bruke den nye virkemåten er bakoverkompatibilitet. Så eksisterende regulære uttrykk mønstre som bruker dot karakter, er ikke berørt.

Oppkalt Fange Grupper

I noen faste uttrykk mønstre, ved hjelp av et nummer til å referere til en fange gruppe kan være forvirrende. Ta For eksempel det vanlige uttrykket /(d{4})-(d{2})-(d{2})/ som passer til en dato. Fordi dato notasjon i Amerikansk-engelsk er forskjellig fra Britisk engelsk, er det vanskelig å vite hvilken gruppe som refererer til dag og som gruppe refererer til måned:

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

– konsollen.logg matche ([0]); // → 2019-01-10
– konsollen.logg matche ([1]); // → 2019
– konsollen.logg matche ([2]); // → 01
– konsollen.logg matche ([3]); // → 10

ES2018 introduserer heter fange opp grupper som bruker den (?<navn>…) syntaks. Så, mønster for å matche en dato kan være skrevet i et mindre tvetydig måte:

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

– konsollen.logg(kamp.grupper); // → {året: “2019”, måned: “01”, dag: “10”}
– konsollen.logg(kamp.grupper.år); // → 2019
– konsollen.logg(kamp.grupper.måned); // → 01
– konsollen.logg(kamp.grupper.dag); // → 10

Du kan hente frem en navngitt fange gruppen senere i mønster ved å bruke k<navn> syntaks. For eksempel, for å finne påfølgende dupliserte ord i en setning, kan du bruke /b(?<dup>w+)s+k<dup>b/:

const re = /b(?<dup>w+)s+k<dup>b/;
const match = re.exec(‘Få som at katten av bordet!’);

– konsollen.logg(kamp.indeks); // → 4
– konsollen.logg matche ([0]); // → at

For å sette inn en navngitt fange opp gruppen i den nye strengen av replace () – metoden, vil du trenger for å bruke $<navn> konstruere. For eksempel:

const str = ‘red & blue”;

– konsollen.logg(str.erstatt(/(red) & (blå)/, ‘$2 & $1’));
// → blå og rød

– konsollen.logg(str.erstatt(/(?<røde>red) & (?<blå>blue)/, ‘$<blue> & $<red>’));
// → blå og rød
Lookbehind Påstander

ES2018 bringer lookbehind påstander til JavaScript, som har vært tilgjengelig i andre regex implementeringer for år. Tidligere, JavaScript støttes bare lookahead påstander. En lookbehind påstanden er merket med (?<=…), og gir deg muligheten til å matche et mønster basert på delstreng som står foran mønster. For eksempel, hvis du ønsker å finne prisen på et produkt i dollar, pund eller euro uten å fange den valuta symbol, kan du bruke /(?<=$|£|€)d+(.d*)?/:

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

– konsollen.logg(re.exec(‘199’));
// → null

– konsollen.logg(re.exec(‘$199’));
// → [“199”, udefinert, index: 1, inngang: “$199”, grupper: udefinert]

– konsollen.logg(re.exec(‘€50’));
// → [“50”, udefinert, index: 1, inngang: “€50”, grupper: udefinert]

Det er også en negativ versjon av lookbehind, som er merket med (?<!…). En negative lookbehind gir deg muligheten til å matche et mønster bare hvis det ikke innledes med mønster i lookbehind. For eksempel mønster /(?<!un)/ kamper ordet tilgjengelig hvis den ikke har en “fn” prefiks:

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

– konsollen.logg(re.exec(‘Vi beklager, denne tjenesten er ikke tilgjengelig for øyeblikket’));
// → null

– konsollen.logg(re.exec (“tjenesten er tilgjengelig’));
// → [“tilgjengelig”, index: 15, inngang: “tjenesten er tilgjengelig”, grupper: udefinert]
Unicode Eiendom Rømming

ES2018 gir en ny type escape-sekvens kjent som Unicode eiendom escape, som gir støtte for full Unicode-i regulære uttrykk. Tenk deg at du ønsker å matche Unicode-tegnet ㉛ i en streng. Selv om ㉛ er ansett som et tall, du kan ikke matche det med d står karakter klasse fordi det bare støtter ASCII [0-9] tegn. Unicode eiendom rømming, på den annen side, kan brukes for å matche alle desimaltall i Unicode:

const str = ‘㉛’;

– konsollen.logg(/d/u.test(str)); // → false
– konsollen.logg(/p{Antall}/u.test(str)); // → sant

Tilsvarende, hvis du ønsker å matche alle Unicode bokstav, kan du bruke p{Alfabetiske}:

const str = ‘ض’;

– konsollen.logg(/p{Alfabetiske}/u.test(str)); // → sant

/ / w står ikke kan matche ض
– konsollen.logg(/w/u.test(str)); // → false

Det er også en eliminert versjon av p{…}, som er angitt med P{…}:

– konsollen.logg(/P{Antall}/u.test(‘㉛’)); // → false
– konsollen.logg(/P{Antall}/u.test(‘ض’)); // → sant

– konsollen.logg(/P{Alfabetiske}/u.test(‘㉛’)); // → sant
– konsollen.logg(/P{Alfabetiske}/u.test(‘ض’)); // → false

I tillegg til Bokstaver og Tall, det er flere egenskaper som kan brukes i Unicode eiendom rømming. Du kan finne en liste over støttede Unicode egenskaper i gjeldende spesifikasjon forslaget.

Støtte for Nye RegExp Funksjoner

Chrome
Firefox
Safari
Kant

s (dotAll) Flagg 62 Ingen 11.1 Ingen
Oppkalt Fange Grupper 64 Ingen 11.1 Ingen
Lookbehind Påstander 62 Ingen Ingen Ingen
Unicode Eiendom Rømming 64 Ingen 11.1 Ingen

Chrome (Android)
Firefox (Android)
Safari
Edge Mobile
Samsung Internett
Android Webview

s (dotAll) Flagg 62 Ingen 11.3 Ingen 8.2 62
Oppkalt Fange Grupper 64 Ingen 11.3 Ingen Ingen 64
Lookbehind Påstander 62 Ingen Ingen Ingen 8.2 62
Unicode Eiendom Rømming 64 Ingen 11.3 Ingen Ingen 64

Node.js:

  • 8.3.0 (krever –harmoni runtime flagg)
  • 8.10.0 (support for s (dotAll) flagg og lookbehind påstander)
  • 10.0.0 (full støtte)

Mal Bokstavelig Revisjon

Når en mal bokstavelig umiddelbart etterfulgt av et uttrykk, blir det kalt et kodet mal bokstavelig. En merket malen kommer i hendig når du ønsker å parse en mal bokstavelig med en funksjon. Tenk deg følgende eksempel:

funksjonen fn(string, erstatning) {
hvis(erstatning === ‘ES6’) {
erstatning = ‘ES2015’
}
tilbake skift + string[1];
}

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

– konsollen.logg(resultat); // → ES2015 var en stor oppdatering

I denne koden, en tag uttrykk — som er en vanlig funksjon — er ikke påberopt og bestått mal bokstavelig. Funksjonen bare endrer den dynamiske delen av strengen og returnerer det.

Før ES2018, merket mal verdiane hadde syntaktiske restriksjoner knyttet til escape-sekvenser. En omvendt skråstrek etterfulgt av en bestemt sekvens av tegn ble behandlet som spesielle tegn: en x tolkes som en hex rømme, r tolkes som en unicode-rømme, og en etterfulgt av et siffer tolkes som en oktal flykte. Som et resultat, strenger som “C:xxxuuu” eller “ubuntu” ble ansett som ugyldig escape sekvenser av tolk og ville kaste en SyntaxError.

ES2018 fjerner disse restriksjonene fra merket maler, og i stedet for å kaste en feil, representerer ugyldig escape-sekvenser som udefinert:

funksjonen fn(string, erstatning) {
– konsollen.logg(erstatning); // → escape-sekvenser:
– konsollen.logg(string[1]); // → udefinert
}

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

Husk at å bruke ulovlige escape-sekvenser i en vanlig mal bokstavelig fortsatt forårsaker en feil:

const resultat = `ubuntu`;
// → SyntaxError: Ugyldig Unicode escape-sekvens
Støtte for Mal Bokstavelig Revisjon

Chrome
Firefox
Safari
Kant
62 56 11 Ingen
Chrome For Android
Firefox For Android
Safari
Edge Mobile
Samsung Internett
Android Webview
62 56 11 Ingen 8.2 62

Node.js:

  • 8.3.0 (krever –harmoni runtime flagg)
  • 8.10.0 (full støtte)

Innpakning opp

Vi har tatt en god titt på flere viktige funksjoner introdusert i ES2018 inkludert asynkron iterasjon, hvile/spredt egenskaper, Løftet.prototypen.til slutt(), og i tillegg til RegExp objekt. Selv om noen av disse funksjonene er ikke fullt ut implementert av noen nettleser leverandører ennå, kan de fortsatt brukes i dag takket JavaScript transpilers som Babel.

ECMAScript er i rask utvikling, og nye funksjoner er introdusert hver så ofte, så sjekk ut listen over ferdig forslag for den fulle rekkevidden av hva som er nytt. Er det noen nye funksjoner som du er spesielt begeistret? Del dem i kommentarfeltet!