No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Regálate acceso ilimitado a todos los cursos por 1 año a precio especial de Navidad 🎄

Antes: $199

Currency
$149/año
regístrate

termina en:

16D
14H
35M
28S

ES12: numeric-separators y replaceAll

34/38
Recursos

La siguiente versión de ECMAScript fue publicada en 2021. Las siguientes características de ES12 o ES2021 que aprenderás son: separadores numéricos y método replaceAll para strings.

Separadores numéricos

Los separadores numéricos ayudan a la legibilidad de cantidades con varias cifras. Se utiliza el caracter guion bajo ( _ ) para separar las cifras, y no afecta a la ejecución del programa.

Lo ideal es separar cada 3 cifras, para visualizar los miles, millones, billones, etc.

// 🔽 Baja legibilidad
const numero1 = 3501548945
console.log( numero1 ) // 3501548945

// ✅ Alta legibilidad
const numero2 = 3_501_548_945
console.log( numero1 ) // 3501548945

De esta manera puedes identificar el número rápidamente.

Método replaceAll

El método replaceAll retorna un nuevo string, reemplazando todos los elementos por otro.

Este método recibe dos argumentos:

  • El patrón a reemplazar, puede ser un string o una expresión regular.
  • El nuevo elemento que sustituye al reemplazado.

Este procedimiento fue creado para solucionar el problema que tenía el método replace, que realizaba la misma función de reemplazar elementos, pero solamente una sola vez por invocación.

const mensaje = "JavaScript es maravilloso, con JavaScript puedo crear el futuro de la web."

mensaje.replace("JavaScript", "Python")
// 'Python es maravilloso, con JavaScript puedo crear el futuro de la web.'

mensaje.replaceAll("JavaScript", "Python")
// 'Python es maravilloso, con Python puedo crear el futuro de la web.'

mensaje.replaceAll(/a/g, "*")
// 'J*v*Script es m*r*villoso, con J*v*Script puedo cre*r el futuro de l* web.'

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

Aportes 15

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Algo rápido que se me ocurrió con este feature:

const inputText = "If you're :) and you know it :clap your hands :clap :clap"

const emojiReplace = (text) => {
  let emojized = ""
  emojized = text.replaceAll(':)', '😀')
  emojized = emojized.replaceAll(':clap', '👏🏻')

  return emojized
}

console.log(emojiReplace(inputText))

Ya existía un método replace() , sin embargo este método únicamente cambiaba la primera coincidencia que encontrara en el string. Dado que daba muchas confusiones, hasta a mi me llego a pasar 🙃, vino al rescate replaceAll()

const texto = 'Javascript es el mejor lenguaje. Javascript puede vivir en el navegador y en el servidor.'

texto.replace('Javascript', 'TypeScript'); // 'TypeScript es el mejor lenguaje. Javascript puede vivir en el navegador y en el servidor.'

texto.replaceAll('Javascript', 'TypeScript') // 'TypeScript es el mejor lenguaje. TypeScript puede vivir en el navegador y en el servidor.'

Hola [email protected] 😃
ES12:

  • Numeric-separators
const value = 100_000_000_000;
console.log(value);
  • ReplaceAll
const string = "JavaScript es un maravilloso lenguaje de  programacion";

const replacedString = string.replace("JavaScript", "TypeScript");

console.log(replacedString);

Herramienta usada playcode 👀

Apuntes
numeric-separetors:
Nos permite tener una lectura mas amigable de cifras numéricas.
Muchas de las aplicaciones que tengan que ver números, manejos de datos e información financiera requieren este concepto.

Nos permite separar numero de grandes cifras con _, es una ayuda que no afecta;
EJ: const value = 100_000_000_000;
Console.log(value); //100000000000

replaceAll: Nos permite remplacar texto o palabras.
Ej:
const string = “JavaScript es un maravilloso lenguaje de programacion”;
const replacedString = string.replace(“JavaScript”, “TypeScript”); // El primer valor es lo que busca en el texto y el segundo valor que pasamos es por lo que se reemplaza
console.log(replacedString); //= “TypeScript es un maravilloso lenguaje de programacion”;

El método replaceAll() devuelve una nueva cadena con todas las coincidencias de un patrón reemplazadas por un reemplazo. El patrón puede ser una cadena o RegExp, y el reemplazo puede ser una cadena o una función que se llamará para cada coincidencia. La cadena original se deja sin cambios.

Referencia

// ------------------
// numeric separators
// ------------------

// 1_000_000_000
// 1,000,000,000
// es una mejor forma de verlo

const value = 1_000_000_000
console.log(value) // 1000000000


// ------------------
// replaceAll
// ------------------

const string = "Hello World"
const regex = /Hello/g

const replace = string.replaceAll(regex, "Bye")
console.log(replace) // Bye World

me agrado mucho lo de los numeros, de hecho soy muy distraido ya con esto ayuda mucho xd

Una corrección, cuando pone:

string.replace();

//Debió poner

string.replaceAll();

const miStringFrase= "JavaScript es un maravilloso lenguaje de programación. JavaScript";
console.log(miStringFrase);

const nuevoStringReemplazado= miStringFrase.replace("JavaScript", "JAVA"); //Replace solo reemplaza la primera coincidencia
console.log(nuevoStringReemplazado);

const nuevoStringReemplazado2= miStringFrase.replaceAll("JavaScript", "JAVA"); //ReplaceAll reemplaza todas las coincidencias
console.log(nuevoStringReemplazado2);

Me suena a una nueva caracterìstica del Chrome Browser.

Antes si quería que un bookmark quedara arriba, lo renombraba con varios espacios al comienzo. Chrome Bookmarks reconoce cada espaciado, y entre más espacios, el archivo queda top. Pero los espacios se notaban visualmente.

La útima vez noté que aunque Chrome Bookmarks reconoce espacios, ya no los muestra, y para mi es mucho mejor así.

Al querer renombrar un archivo con varios espacios iniciales, ahí si se muestra con los espacios como tal…

Algo que se me ocurre es el encripta miento de mensajes.

// replaceAll
const string = “JavaScript is a wonderfull language (JavaScript) of programming”;

const replaceString = string.replace(“JavaScript”, “TypeScript”);
//replace permite pasar primero lo que vamos a remplazar y segundo el valor nuevo
const replaceAllString = string.replaceAll(“JavaScript”, “TypeScript”);
// replace all the values with the parameter to teh second
console.log(replaceString);
console.log(replaceAllString);

El método replaceAll() devuelve una nueva cadena con todas las coincidencias de un patrón reemplazadas por un reemplazo. El patrón puede ser una cadena o RegExp, y el reemplazo puede ser una cadena o una función que se llamará para cada coincidencia. La cadena original se deja sin cambios.

Guiúnbajo

const string = “JavaScript es un maravilloso lenguaje de programación”;
const replacedString = string.replace(‘maravilloso’, ‘poderoso’)
console.log(replacedString);