JavaScript — ES8 (ECMA2017)-Parte II

Temario

• Introducción
• Nuevas Características
  • String.prototype.padStart/padEnd
  • Comas finales

i. Introducción

Esta story es la continuación de:

• ES8 — ES2017 (I[ref]
• ES7 — ES2016[ref]
• ES6 — ES2015 (I[ref], II[ref],III[ref],IV[ref],V[ref])
• JavaScript — Historia, Estándar & Motores [ref]

Vamos a ver la segunda parte de novedades que nos trae la edición ES8 (ES2017) de JavaScript.

Importante: Hay que tener en cuenta que es posible que NO TODOS los navegadores modernos admitan estas “nuevas” funcionalidades, por lo que te sugiero primero validar las versiones de los mismos antes de subir a producción. Si estas usando algún transpilador (ej. Babel) no deberás preocuparte.

ii. Nuevas Características

01. String.prototype.padStart [ref] & String.prototype.padEnd [ref]

Increíblemente JavaScript no tenía una forma nativa o sencilla de rellenar con caracteres una cadena de una longitud específica. Es tan común este problema, que hay muchas formas de hacerlo[ref] y quizás la mayoría de ellas sean ineficientes, por fortuna en la edición ES8 han decidido darle una solución al problema.

padStart es un método que rellena (al principio) la cadena actual con otra cadena (las veces que sean necesarias) hasta que la cadena resultante alcance la longitud dada.

padEnd es un método que rellena (al final) la cadena actual con otra cadena (las veces que sean necesarias) hasta que la cadena resultante alcance la longitud dada.

Sintaxis —

Donde:

• str [obligatorio] — Cadena de tipo string a la que se le va a rellenar
• targetLength [obligatorio] — Longitud de la cadena resultante una vez que se ha rellenado la cadena actual. Si el valor es menor a str.length, retornará el valor tal cual.
• padString [opcional] — Cadena con la que se rellena la cadena actual, si padString es demasiado larga se truncará. El valor por defecto es " " (espacio)(U+0020)

Donde:

• str [obligatorio] — Cadena de tipo string a la que se le va a rellenar
• targetLength [obligatorio] — Longitud de la cadena resultante una vez que se ha rellenado la cadena actual. Si el valor es menor a str.length, retornará el valor tal cual.
• padString [opcional] — Cadena con la que se rellena la cadena actual, si padString es demasiado larga se truncará. El valor por defecto es " " (U+0020)

Ejemplo 1 —

Podemos observar que:

• En la línea 3 antepone la cadena 0 en la propiedad folio hasta que su longitud sea 10.
• En la línea 4 antepone la cadena ab en la propiedad folio hasta que su longitud sea 10.
• En la línea 5 antepone la cadena ab en la propiedad folio hasta que su longitud sea 4, es importante poner atención que no agrega la cadena completa ab ya que a123 cumple con la longitud acordada, es decir que va a truncar padString.
• En la línea 6 antepone la cadena ab en la propiedad folio hasta que su longitud sea 2, es importante poner atención que no agrega la cadena ab ya que 123 excede la longitud acordada, es decir que si la longitud acordada es menor a str.length no hace ningún cambio.
• En la línea 7 antepone la cadena abcdefghijklm en la propiedad folio hasta que su longitud sea 10, es importante poner atención que no agrega la cadena completa abcdefghijklm ya que abcdefg123 cumple con la longitud acordada, es decir que va a truncar padString.
• En la línea 8 si no se indica con qué rellenar, entonces por default lo hará con espacios.

Ejemplo2 —

padEnd()funciona de manera similar a padStart(), pero en lugar de insertar padString al principio, lo inserta al final.

Podemos observar que:

• En la línea 3 pospone la cadena 0 en la propiedad folio hasta que su longitud sea 10.
• En la línea 4 pospone la cadena ab en la propiedad folio hasta que su longitud sea 10.
• En la línea 5 pospone la cadena ab en la propiedad folio hasta que su longitud sea 4, es importante poner atención que no agrega la cadena completa ab ya que 123a cumple con la longitud acordada, es decir que va a truncar padString.
• En la línea 6 pospone la cadena ab en la propiedad folio hasta que su longitud sea 2, es importante poner atención que no pospone a la cadena ab ya que 123 excede la longitud acordada, es decir que si la longitud acordada es menor a str.length no hace ningún cambio.
• En la línea 7 pospone la cadena abcdefghijklm en la propiedad folio hasta que su longitud sea 10, es importante poner atención que no agrega la cadena completa abcdefghijklm ya que 123abcdefg cumple con la longitud acordada, es decir que va a truncar padString.
• En la línea 8 si no se indica con qué rellenar, entonces por default lo hará con espacios.

Ejemplo 3 —

Podemos utilizar padStart para enmascarar una cadena

De una cadena, extraemos los últimos 4 dígitos con slice y después rellenamos la longitud de la cadena con *

Soporte [ref][ref] —

02. Comas finales [ref]

Esta mejora realmente tiene un porque bastante interesante, expliquemos…

Cuando escribimos código surgen escenarios en las llamadas, definición de funciones, propiedades de un objeto o arreglo se dividen en varias líneas de código:

En estos casos cuando otro desarrollador agrega otro parámetro o propiedad, el control de versiones (git, subversion, mercurial, etc.) deberá realizar 2 dos actualizaciones:

• Línea 3 para agregar la coma, y la línea 4 para agregar un nuevo parámetro
• Línea 9 para agregar la coma, y la línea 9 para agregar un nuevo parámetro
• Línea 14 para agregar la coma, y la línea 15 para agregar un nuevo parámetro

Para poder mitigar este problema, otros lenguajes de programación (Python, D, otros…) han agregado soporte gramatical para permitir una coma al final de las listas, con esto evita errores de sintaxis y quitar la mal costumbre deponer la coma al principio de la propiedad.

Es importante entender que el cambio es exclusivamente de gramática y NO realiza ningún cambio en la semántica, por lo tanto, la presencia de una coma al final no tiene ningún efecto en la longitud de los parámetros y de la lista.

Soporte [ref] —

No olvidemos que… —

• Debe de haber al menos un parámetro, una propiedad en el objeto o un valor en la lista para que funcione, ya que de lo contrario marcará SyntaxError

Bibliografía y links que te puede interesar…

JavaScript — Historia, Estándar & Motores

JavaScript — ES6 (Parte I)

JavaScript — ES6 (Parte II)

JavaScript — Symbols & Generadores ES6 (Parte III)

JavaScript — Map, Set, Proxy, Reflect & Export modules ES6 (Parte IV)

JavaScript — Class ES6 (Parte V)

JavaScript — ES7 (ECMA2016)

JavaScript — ES8 (ECMA2017)-Parte I