La guía ES2018

ECMAScript es el estándar en el que se basa JavaScript y, a menudo, se abrevia como ES. Descubra todo sobre ECMAScript y las funciones agregadas en ES2018, también conocido como ES9

ES2018 es la última versión delECMAScriptestándar.

¿Cuáles son las novedades introducidas en él?

Propiedades de reposo / propagación

ES6introdujo el concepto deelemento de descansoal trabajar condesestructuración de matrices:

const numbers = [1, 2, 3, 4, 5]
[first, second, ...others] = numbers

ydifundir elementos:

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sumOfNumbers = sum(...numbers)

ES2018 introduce lo mismo pero para objetos.

Propiedades de descanso:

const { first, second, ...others } = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

first // 1 second // 2 others // { third: 3, fourth: 4, fifth: 5 }

Propiedades de propagaciónPermitir crear un nuevo objeto combinando las propiedades del objeto pasado después de laoperador de propagación:

const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

Iteración asincrónica

La nueva construcciónfor-await-ofle permite utilizar un objeto iterable asincrónico como iteración de bucle:

for await (const line of readLines(filePath)) {
  console.log(line)
}

Dado que esto usaawait, puedes usarlo solo en el interiorasyncfunciones, como un normalawait(verasync / await)

Promise.prototype.finally ()

Cuando se cumple una promesa, llama a lathen()métodos, uno tras otro.

Si algo falla durante esto, elthen()se saltan los métodos y elcatch()se ejecuta el método.

finally()le permite ejecutar algún código independientemente de la ejecución exitosa o no exitosa de la promesa:

fetch('file.json')
  .then(data => data.json())
  .catch(error => console.error(error))
  .finally(() => console.log('finished'))

Mejoras en la expresión regular

Aserciones de búsqueda posterior de RegExp: coincide con una cadena según lo que la precede

Esto es un avance: usas?=para que coincida con una cadena seguida de una subcadena específica:

/Roger(?=Waters)/

/Roger(?= Waters)/.test(‘Roger is my dog’) //false /Roger(?= Waters)/.test(‘Roger is my dog and Roger Waters is a famous musician’) //true

?!realiza la operación inversa, haciendo coincidir si una cadena esnoseguido de una subcadena específica:

/Roger(?!Waters)/

/Roger(?! Waters)/.test(‘Roger is my dog’) //true /Roger(?! Waters)/.test(‘Roger Waters is a famous musician’) //false

Lookaheads usan el?=símbolo. Ya estaban disponibles.

Lookbehinds, una nueva característica, utiliza?<=.

/(?<=Roger) Waters/

/(?<=Roger) Waters/.test(‘Pink Waters is my dog’) //false /(?<=Roger) Waters/.test(‘Roger is my dog and Roger Waters is a famous musician’) //true

Una mirada atrás se niega usando?<!:

/(?<!Roger) Waters/

/(?<!Roger) Waters/.test(‘Pink Waters is my dog’) //true /(?<!Roger) Waters/.test(‘Roger is my dog and Roger Waters is a famous musician’) //false

Escapadas de propiedad Unicode\p{…}y\P{…}

En un patrón de expresión regular puede usar\dpara que coincida con cualquier dígito,\spara que coincida con cualquier carácter que no sea un espacio en blanco,\wpara que coincida con cualquier carácter alfanumérico, etc.

Esta nueva característica extiende este concepto a todos los caracteres Unicode introduciendo\p{}y su negación\P{}.

AlgunaUnicodeEl personaje tiene un conjunto de propiedades. Por ejemploScriptdetermina la familia lingüística,ASCIIes un booleano válido para caracteres ASCII, etc. Puede poner esta propiedad en los paréntesis del gráfico, y la expresión regular comprobará que sea cierto:

/^\p{ASCII}+$/u.test('abc')   //✅
/^\p{ASCII}+$/u.test('[email protected]')  //✅
/^\p{ASCII}+$/u.test('ABC🙃') //❌

ASCII_Hex_Digites otra propiedad booleana, que comprueba si la cadena solo contiene dígitos hexadecimales válidos:

/^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF') //✅
/^\p{ASCII_Hex_Digit}+$/u.test('h')                //❌

Hay muchas otras propiedades booleanas, que simplemente verifica agregando su nombre en los paréntesis del gráfico, incluyendoUppercase,Lowercase,White_Space,Alphabetic,Emojiy más:

/^\p{Lowercase}$/u.test('h') //✅
/^\p{Uppercase}$/u.test('H') //✅

/^\p{Emoji}+$/u.test('H')   //❌
/^\p{Emoji}+$/u.test('🙃🙃') //✅

Además de esas propiedades binarias, puede marcar cualquiera de las propiedades de carácter Unicode para que coincida con un valor específico. En este ejemplo, verifico si la cadena está escrita en alfabeto griego o latino:

/^\p{Script=Greek}+$/u.test('ελληνικά') //✅
/^\p{Script=Latin}+$/u.test('hey') //✅

Leer más sobre todas las propiedades que puede utilizardirectamente sobre la propuesta.

Grupos de captura con nombre

En ES2018 agrupo de capturase puede asignar a un nombre, en lugar de simplemente asignarle un espacio en la matriz de resultados:

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const result = re.exec('2015-01-02')

// result.groups.year === ‘2015’; // result.groups.month === ‘01’; // result.groups.day === ‘02’;

lossbandera para expresiones regulares

lossbandera, abreviatura delinea sola, causa el.para que coincida también con los caracteres de la nueva línea. Sin él, el punto coincide con los caracteres regulares pero no con la nueva línea:

/hi.welcome/.test('hi\nwelcome') // false
/hi.welcome/s.test('hi\nwelcome') // true

Más tutoriales de js: