Manipulación de Strings y Arrays en ECMAScript 8

Clase 20 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Resumen

Las siguientes características de ES8 o ES2017 que aprenderás son: rellenar un string y trailing commas.

Rellenar un string o padding

El padding consiste en rellenar un string por el principio o por el final, con el carácter especificado, repetido hasta que complete la longitud máxima.

Este método recibe dos argumentos:

La longitud máxima a rellenar, incluyendo el string inicial.
El string para rellenar, por defecto, es un espacio.

Si la longitud a rellenar es menor que la longitud del string actual, entonces no agregará nada.

Método padStart

El método padStart completa un string con otro string en el inicio hasta tener un total de caracteres especificado.

'abc'.padStart(10) // "       abc"
'abc'.padStart(10, "foo") // "foofoofabc"
'abc'.padStart(6,"123465") // "123abc"
'abc'.padStart(8, "0") // "00000abc"
'abc'.padStart(1) // "abc"

Método padEnd

El método padEnd completa un string con otro string en el final hasta tener un total de caracteres especificado.

'abc'.padEnd(10) // "abc       "
'abc'.padEnd(10, "foo") // "abcfoofoof"
'abc'.padEnd(6, "123456") // "abc123"
'abc'.padEnd(1) // "abc"

Trailing commas

Las trailing commas consisten en comas al final de objetos o arrays que faciliten añadir nuevos elementos y evitar errores de sintaxis.

const usuario = {
    name: 'Andres',
    email: "andres@correo.com",
    age: 23, //<-- Trailing comma
}

const nombres = [
    "Andres",
    "Valeria",
    "Jhesly", //<-- Trailing comma
 ]

Contribución creada por Andrés Guano (Platzi Contributor).

Francisco Murillo

student•

este es el mejor uso que le pude dar😁.

Diego Perez Perez

student•

muy buen ejemplo!

Edwards López de Maturana

student•

a bugear whatsapp

Cristian David Corrales Ospina

student•

Trailing commas para la enumeración de las clases 🤣

const clasesEs8 = ['00', '01', , '03', '04'];

console.log(clasesEs8);
console.log(clasesEs8.length);

Julia Gabriela Nieva Paredes

student•

Yuli Alexandra Pulido Castañeda

student•

Hola Chic@s :)

ES8:

String padding

const string = "Hola";
console.log(string.padStart(7, "hi"));
console.log(string.padEnd(7, "hi"));

Trailing commas

const array = [24, 34, 25, 24, , , , 45];
console.log(array);
console.log(array.length);

Zajith Corro Viveros

student•

Es un método que permite rellenar la cadena actual con una cadena dada. El relleno es aplicado desde el inicio de la cadena actual.

str.padStart(targetLength [, padString])

targetLength → Es la longitud de la cadena resultante una vez que haya sido rellenada. Si este parámetro es más pequeño que la longitud de la cadena actual, la cadena se mantendrá igual.

padString → Valor opcional. La cadena para rellenar la cadena actual. Si esta cadena es muy larga, será recortada y la parte más a la izquierda será aplicada

Luis Castillo

student•

Entendi mejor esta explicación que la del video. Gracias.

JUAN JOSE HERNANDEZ MUÑOZ

student•

Yo hace unos dias estaba haciendo un reto en FrotendMentor, donde tenia que hacer un componente de tipo formulario donde agregaras tu informacion de tarjeta de credito, actualizando visualmente en tiempo real en una ilustracion de una tarjetita los numeros que van escribiendo.

Yo no queria que quedase vacio mientras ibas escribiendo hasta completar los 16 caracteres que ha de tener el numero, asi que mi mision fue completar el string de numeros que ingresaba el usuario con '0' al final. Fue dificil pero halle la manera.

Viendo esto me doy cuenta de lo facil que hubiese sido usando este metodo, asi que ahi tienen un uso aplicable a un proyecto real, supongo.

Jairo Andrés Del Río Henao

student•

Así respondió ChatGPT, ¿qué es trailing commas?

"El término "trailing commas" o "trailing commas en inglés" se refiere a la posibilidad de agregar una coma adicional después del último elemento en una lista, array o conjunto de parámetros de función en JavaScript.

Anteriormente, esta coma adicional causaba un error de sintaxis en algunos navegadores antiguos de Internet Explorer, por lo que se consideraba una mala práctica de codificación. Sin embargo, en la versión ES2017 (ES8) de JavaScript, se introdujo una nueva sintaxis que permite las "trailing commas" sin errores de sintaxis, lo que hace que sea más fácil y seguro mantener y actualizar el código.

La sintaxis de "trailing commas" en JavaScript se ve así:

const lista = [1, 2, 3,];
function ejemplo(param1, param2, param3,) {
  // ...
}

En el ejemplo anterior, podemos ver que agregamos una coma adicional después del último elemento en la lista y el conjunto de parámetros de función. Esto se hace para permitir una fácil adición o eliminación de elementos sin tener que preocuparse por agregar o eliminar comas en otros lugares de la lista o conjunto de parámetros.

Es importante tener en cuenta que no todos los navegadores y entornos de JavaScript admiten esta sintaxis de "trailing commas", por lo que debes verificar la compatibilidad con el navegador y las especificaciones de la plataforma antes de usarla."

Miguel Negron Garcia

student•

Esta buenisima la informacion y bien clara, gracias por tu aporte a la comunidad. :)

Porfirio González López

student•

Apunte en Notion

LINK: https://pogolo.notion.site/17-ES8-string-padding-y-trailing-commas-1251c64942e14874bb0cf110004cd2b6

Teo Zavala

student•

Que buen aporte, muy buena manera de integrar todo.

LESTHER XITUMUL MANUEL

student•

Otro ejemplo práctico para esta clase. :D

reynaldo gutierrez

student•

soy el unico que se do cuenta que el profe odia al numero 2 ??? pero que le hizo por dios xD

Luis Alfredo Suarez

student•

ES8: string padding & trailing commas

Estas son dos características introducidas en ECMAScript 8 (ES8): el "string padding" y las "trailing commas". Permíteme explicarte en qué consisten:

String Padding: El "string padding" se refiere a la capacidad de ajustar la longitud de una cadena de caracteres rellenando con caracteres adicionales, ya sea al principio (padding izquierdo), al final (padding derecho) o en ambos lados. Esta característica es útil cuando deseas que una cadena tenga una longitud específica.

En ES8, se introdujeron los métodos String.prototype.padStart() y String.prototype.padEnd() para lograr esto:

padStart(targetLength, padString): Añade caracteres padString al principio de la cadena hasta que la cadena alcance la longitud targetLength.
padEnd(targetLength, padString): Añade caracteres padString al final de la cadena hasta que la cadena alcance la longitud targetLength.

Aquí tienes un ejemplo:

const numero = '42';

console.log(numero.padStart(5, '0')); // Salida: '00042'
console.log(numero.padEnd(8, '*'));  // Salida: '42******'

2. Trailing Commas:
Las "trailing commas" se refieren a la capacidad de agregar comas adicionales al final de listas de elementos, como en arreglos y objetos. Antes de ES8, agregar una coma después del último elemento en una lista podía generar errores en algunos navegadores.
En ES8, se permiten las comas adicionales al final de estas listas, lo que puede hacer que el código sea más limpio y facilite la adición o eliminación de elementos sin necesidad de modificar la última línea.
Ejemplo de arreglo con "trailing comma":

const frutas = [
  'manzana',
  'naranja',
  'plátano', // coma al final.
];

Ejemplo de objeto con "trailing comma":

const persona = {
  nombre: 'Juan',
  edad: 30, // coma al final.
};

Otro ejemplo de "trailing coma":

const array = [24, 34, 25, 24, , , , 45];
console.log(array);

// consola dice: [ 24, 34, 25, 24, <3 empty items>, 45 ]

Estas características hacen que el código sea más legible y manteniendo un formato más claro y ordenado. Sin embargo, ten en cuenta que la compatibilidad con versiones anteriores de navegadores y entornos puede variar, por lo que es importante considerar esto si estás desarrollando para un público amplio.

Espero les sea de utilidad. 👨‍💻

Ricardo Alfonso Chavez Vilcapoma

student•

Estos métodos no los conocía...a simple vista parece que sacan métodos para decir que hay una nueva versión de ECMASCRIPT 😅.

Brandon Cortes Rivera

student•

Estoy seguro que algo tiene con el número 2 ya que nunca lo nombra en sus archivos.

Platzi Team

student•

Un uso interesante del método padStart() está en imprimir fechas (dd/mm/aa) u horas (hh:mm:ss) manteniendo un formato de 2 dígitos (Rellenar con 0's si la fecha u hora es de un solo dígito), por ejemplo: .

const fecha = {
    dia: '2',
    mes: '4',
    año: '23'
}

console.log(`${fecha.dia.padStart(2,'0')}/${fecha.mes.padStart(2,'0')}/${fecha.año}`);

Imprime 02/04/23 en vez de 2/4/23 ;)

Cristian Acalo

student•

🦄✨Uso Práctico de padStart()

Si queremos que ciertos datos tengan una misma longitud dependiendo de la longitud del elemento más extenso podemos usar padStart(). De esta manera podremos representar de una mejor manera los elementos. Esto sirve principalmente para tablas o representaciones en consola.

const names = ['Cris', 'Pablo', 'Juan', 'Segundo'];
const maxLength = names.reduce((max, name) => Math.max(max, name.length), 0);

names.forEach(name => {
  console.log(name.padStart(maxLength, ' '));
});

Edgar Geovani Xuc Xol

student•

esta excelente el curso de este profe la verdad muy bien explicado merece 5 estrellas

Juan David Reyes

student•

Las trailing commas también se puede reemplazar por undefineds?

Edgar López Laynez

student•

son conceptos diferentes aunque si puedes hacerlo.

Felix Torres Javier Antonio

student•

¿Cuales son las ventajas de usar trailing comma en los arrays? Necesito ejemplos de casos de uso.

silfredo mario

student•

Hola, Javier.

Yo considero que se puede usar para reservar espacios.

Arnoll Bermudez

student•

concuerdo con silfredo, fácilmente podríamos crear un array con ciertos espacios y así después cuando tengamos los datos usar el método .push para cargar esos datos al array sin escribirlos dentro del array

Roger Ildegar Marrero Canos

student•

Sería genial siempre trabajar sobre un proyectó con el curso de JavaScript práctico, así nos quedan claro los casos de uso de todas las funciones y se hace más llevadero y menos pesado.

Creative Artisan

student•

Algo interesante de los arrays con empty slots es la forma como se pueden iterar y el acceso en algunos casos limitado (Foreach, Forin, map...) a los espacios vacios.

Aquí les dejo un ejemplo de todas las formas que puede iterar este tipo de arreglos.

const array = [1, 2, , , 5];

console.log(array)

console.group('Foreach:')
array.forEach((element, index) => {
  console.log(`[${index}] => ${element}`)
});
console.groupEnd('Foreach:')

console.group('Forin:')
for (const index in array) {
  console.log(`[${index}] => ${array[index]}`)
}

console.groupEnd('Forin:')

console.group('Map:')

const mapped = array.map((element, index) => {
  console.log(`[${index}] => ${element}`)
  return element
})

console.groupEnd('Mapped:',mapped);

const filteredArray = array.filter(element => element !== undefined);

console.log('Filtered Array:', filteredArray);

console.group('For:')

for (let i = 0; i < array.length; i++) {
  console.log(`[${i}] => ${array[i]}`)
}

console.groupEnd('For:', array)

Carlos Andrade

student•

20/35 ES8: string padding y trailing commas

El relleno de strings y las trailing commas. El relleno de strings se refiere a agregar caracteres adicionales al principio o al final de un string para alcanzar una longitud máxima determinada. Hay dos métodos para esto:

padStart
padEnd

que toman la longitud deseada y el carácter de relleno como argumentos. Las trailing coomas son comas al final de los objetos o arrays que pueden ayudar a evitar errores de sintaxis y permiten agregar fácilmente nuevos elementos.

Rellenos de Strings:

// utilizando padStart()
const str1 = "hola":
const str2 = str1.padStart(10, "*");
console.log(str2); // Output: *****hola

//utilizando padEnd()
const str3 = "adios";
const str4 = str3.padEnd(10, "-");
console.log(str4); // Output: adios-----

// Si la longitud a rellenar es menor que la cantidad de la 
// longitud del string actual, no se agregará nada.
const str5 = "hello";
const str6 = str5.padEnd(3, ".");
console.log(str6); // Output: hello

Trailing commas:

// Trailing comma en un objeto
const user = {
  name: "John",
  age: 30,
  email: "john@example.com", // <-- Trailing comma
};

// Trailing comma en un array
const arr = [
  1,
  2,
  3, // <-- Trailing comma
];

// Agregar un nuevo elemento en un objeto con trailing comma
user.address = "123 Main St.";
console.log(user); // Output: { name: 'John', age: 30, email: 'john@example.com', address: '123 Main St.' }

// Agregar un nuevo elemento en un array con trailing comma
arr.push(4);
console.log(arr); // Output: [ 1, 2, 3, 4 ]

Manipulación de Strings y Arrays en ECMAScript 8

Introducción

Historia y evolución de ECMAScript y JavaScript

Actualización y Propuestas en ECMAScript y JavaScript

Configuracion

Configuración de Herramientas para Desarrollo en JavaScript Avanzado

¿Qué se implementó en ES6?

Características de ECMAScript 6 para JavaScript Moderno

Template Literals y Multilínea en ECMAScript 6

Asignación de Parámetros por Defecto en ECMAScript 6

Desestructuración de Arrays y Objetos en JavaScript ECMAScript 6

Uso del Operador de Propagación y Parámetros Rest en JavaScript

Playground: Combina objetos JSON con el Spread Operator

Asignación y manejo de objetos en ECMAScript 6

Promesas en JavaScript: Manejo del Asincronismo con ECMAScript 6

Clases y Herencia en JavaScript: Sintaxis y Aplicaciones

Uso de Módulos en JavaScript ES6

Playground: Obtén una lista de películas

Generators en JavaScript: Cómo implementar y usar iteradores personalizados

Playground: Generador de identificadores para michis

Método ADD en ECMAScript 6: Agregando Elementos a un Set

¿Qué se implementó en ES7?

Actualizaciones de ECMAScript 7: Operadores Exponencial e Includes

¿Qué se implementó en ES8?

Métodos Object.Entries y Object.Values en ECMAScript 8