No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES12: numeric-separators y replaceAll

31/35
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 37

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 Chic@s 馃槂
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);

Aca el profe debia explicarnos sobre el metodo .replaceAll() y en su lugar no explico .replace() la diferencia entre ellos es que:

.replace(): solo hace el reemplazo en la primera coincidencia con el texto indicado.
.replaceAll(): como su nombre lo indica, hace el reemplazo a todos las coincidenas dentro del string.
Si quisieras reemplazar todo en un string
Dejo ejemplo:

Recursividad con Replace

const string = 'Este curso es bueno bueno bueno'

function recursiveReplace(string, original, replacement){

    string = string.replace(original,replacement)

    if(!string.match(original)){

        newString = string

        return

    }else if(string.match(original)){

        recursiveReplace(string,original,replacement)
    }
    return newString
}

console.log(recursiveReplace(string, 'bueno', 'buenisimo')) // Retornara Este curso es buenisimo buenisimo buenisimo

Ejemplo con .replaceAll()

const string = 'Este curso es bueno bueno bueno'

const replacedString = string.replaceAll('bueno', 'buenisimo')

console.log(replacedString) // Retornara Este curso es buenisimo buenisimo buenisimo

Herramienta usada playcode 馃憖

Una correcci贸n, cuando pone:

string.replace();

//Debi贸 poner

string.replaceAll();

La clase se llama 鈥渞eplaceAll鈥 y nos explican el replace()?
Y se supone que los cursos pasan por revisores? :l

Ajam鈥 Y el metodo .replaceAll() cuando se ve? Porque en esta clase se vio el metodo replace que ya ven铆a en JavaScript desde el origen.

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 = 鈥淛avaScript es un maravilloso lenguaje de programacion鈥;
const replacedString = string.replace(鈥淛avaScript鈥, 鈥淭ypeScript鈥); // 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); //= 鈥淭ypeScript es un maravilloso lenguaje de programacion鈥;

ERROR. Se equivoco el profe

replaceAll => Reemplaza todas as coincidencias

replace => solo reemplaza la primera coincidencia en caso de utilizar como patron una cadena

C贸mo es que hasta el nombre de la clase y del archivo se llama replaceAll y termin贸 usando solo replace. 馃槄

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

Con los recursos que tiene la plataforma, creo que les ser铆a muy f谩cil agregar la lecci贸n de **replaceAll** como corresponde. La mostrada por gndx es una caracter铆stica que ha existido desde versiones anteriores de ES12, siendo este el comportamiento cl谩sico de replace.

Hola, me sale ese error. Alguien me podr谩 decir porque puede suceder? Actualice node y tengo la misma version

Apuntes:馃崕 鈺斺晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晽 **Numeric separators** ```js const value = 100_000_000_000; console.log(value) ```. `Numeric separators `nos ayuda aclarar y mostrar de mejor manera n煤meros de varios d铆gitos en el editor de c贸digo, pero cuando se muestra en la consola no cambia su valor. 鈥斺斺斺斺斺斺斺斺斺斺斺斺斺斺斺斺斺斺斺斺 ```js const string = "Javaescript es un maravilloso lenguaje de programacion." const reclaceString = string.replace("Javaescript", "Typescript"); console.log(reclaceString) ```eemplaza el valor de string por uno nuevo. **replaceAll** : reemplaza el valor de string en todos lados que se encuentre la palabra que se quiera editar.
Apuntes:馃崕 鈺斺晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晽 **Numeric separators** ```js const value = 100_000_000_000; console.log(value) ````Numeric separators `nos ayuda aclarar y mostrar de mejor manera n煤meros de varios d铆gitos en el editor de c贸digo, pero cuando se muestra en la consola no cambia su valor. 鈥斺斺斺斺斺斺斺斺斺斺斺斺斺斺斺斺斺斺斺斺 ```js const string = "Javaescript es un maravilloso lenguaje de programacion." const reclaceString = string.replace("Javaescript", "Typescript"); console.log(reclaceString) ```eemplaza el valor de string por uno nuevo. **replaceAll** : reemplaza el valor de string en todos lados que se encuentre la palabra que se quiera editar.
Aporte

ES12: numeric separators & replaceAll

Veamos las caracter铆sticas 鈥渘umeric separators鈥 y 鈥渞eplaceAll鈥 introducidas en ECMAScript 12 (tambi茅n conocido como ES2021) con ejemplos sencillos.


Numeric Separators (Separadores num茅ricos):


La caracter铆stica de 鈥渘umeric separators鈥 permite agregar guiones bajos (_) en n煤meros largos para mejorar la legibilidad. Esto es especialmente 煤til en n煤meros grandes como cantidades monetarias o c贸digos de identificaci贸n, donde los guiones bajos pueden ayudar a separar los d铆gitos en grupos m谩s manejables.

Ejemplo sin separadores num茅ricos:

const numeroLargo = 1000000000;
console.log(numeroLargo); // Resultado: 1000000000


Ejemplo con separadores num茅ricos:

const numeroLargo = 1_000_000_000;
console.log(numeroLargo); // Resultado: 1000000000


Los guiones bajos no afectan el valor del n煤mero y se pueden colocar en cualquier lugar entre los d铆gitos.


replaceAll:


La funci贸n replaceAll te permite reemplazar todas las ocurrencias de una subcadena en una cadena con otra subcadena.

Ejemplo sin replaceAll:

const frase = "Hola mundo, hola universo, hola galaxia";
const nuevaFrase = frase.replace(/hola/gi, "adi贸s");
console.log(nuevaFrase); // Resultado: "adi贸s mundo, adi贸s universo, adi贸s galaxia"


Ejemplo con replaceAll:

const frase = "Hola mundo, hola universo, hola galaxia";
const nuevaFrase = frase.replaceAll("hola", "adi贸s");
console.log(nuevaFrase); // Resultado: "adi贸s mundo, adi贸s universo, adi贸s galaxia"


La diferencia clave aqu铆 es que replaceAll reemplazar谩 todas las ocurrencias de la subcadena sin necesidad de usar expresiones regulares ni de especificar la bandera global (g).

Recuerda que estas caracter铆sticas est谩n disponibles en ECMAScript 12 (ES2021) en adelante, por lo que debes asegurarte de que el entorno donde est谩s ejecutando tu c贸digo sea compatible con ellas.

Espero sea de utilidad. 馃懆鈥嶐煉

Los numeric-separators t谩mbien funcion谩n igual en Ruby y Python 馃槑

raya al piso XD

veo que es un repaso de las clases anteriores pero esta bien que se haga repaso

馃憸 Archivos del Proyecto 馃憸


Pasos 馃搶

  • 鈥 Dentro de la carpeta src, crear la carpeta es12.
  • 鈥 Dentro de la carpeta es12, crear el archivo llamado: 00-numeric-separators-.js
      • 鈼 El c贸digo queda:
//Compilar: seleccionar el c贸digo + click derecho + Run Code

//Ejercicio #1
const value = 100_000_000_000;

console.log(value);

/*output:
100000000000
*/

  • 鈥 Dentro de la carpeta es12, crear el archivo llamado: 01-replaceall.js
      • 鈼 El c贸digo queda:
//Compilar: seleccionar el c贸digo + click derecho + Run Code

//Ejercicio #1
const string = "JavaScript es un maravilloso lenguaje de programaci贸n";

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

console.log(replacedString);

/*output: reemplaza un texto por otro texto
TypeScript es un maravilloso lenguaje de programaci贸n
*/
const string = "JavaScript es un maravilloso lenguaje de Programacion";

const replacedString = string.replace("maravilloso", "estupendo")

console.log(replacedString);
//JavaScript es un estupendo lenguaje de Programacion

Mi resumen:

31/35 ES12: numeric-separators y replaceAll
El uso de separadores num茅ricos para mejorar la legibilidad de n煤meros en el c贸digo JavaSxript y el m茅todo replaceAll que permite reemplazar todos los elementos que coinciden con un patr贸n en una cadena de texto.

Ejemplo de uso de separadores num茅ricos:

const numero1 = 3501548945;
const numero2 = 3_501_548_945;

Ejemplo del m茅todo replaceAll:

mensaje.replaceAll("JavaScript", "Python");

mensaje.replaceAll(/a/g, "*");

Se puede utilizar expresiones regulares con replace usando el flag 鈥済鈥 para cambiar todas las coincidencias de un texto.

const msj = "Esta es la clase de replace, por eso vamos a ver ejemplos de replace 馃檭";

msj.replace(/replace/g, "replaceAll");

/// Esta es la clase de replaceAll, por eso vamos a ver ejemplos de replaceAll 馃檭

numeric-separators es una nueva caracter铆stica de JavaScript que se introdujo en ECMAScript 2022. Esta caracter铆stica permite separar los d铆gitos de un n煤mero grande con un separador para mejorar la legibilidad y la claridad del c贸digo.

El separador se especifica agregando un gui贸n bajo (_) entre los d铆gitos de un n煤mero. El gui贸n bajo no afecta el valor num茅rico del n煤mero y se omite durante la evaluaci贸n.

Aqu铆 hay un ejemplo de c贸mo se puede usar numeric-separators en JavaScript:

const million = 1_000_000;
const billion = 1_000_000_000;

console.log(million + billion);
// Output: 1000000000

En este ejemplo, se usan numeric-separators para separar los d铆gitos de dos n煤meros grandes, million y billion. El resultado de la adici贸n de estos n煤meros se imprime en la consola y muestra que el valor de los n煤meros no se ve afectado por los separadores.

Con el m茅todo replaceAll podr铆a corregir faltas de ortograf铆a o contracciones informales:

const str = 'I am *gonna* achieve my goals';

const replaceStr = str.replace('*gonna*', '*going to*');

console.log(replaceStr);  // I am *going to* achieve my goals

Yo le digo piso 馃し鈥嶁檪锔 jaja

// ------------------
// 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

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 = 鈥淛avaScript is a wonderfull language (JavaScript) of programming鈥;

const replaceString = string.replace(鈥淛avaScript鈥, 鈥淭ypeScript鈥);
//replace permite pasar primero lo que vamos a remplazar y segundo el valor nuevo
const replaceAllString = string.replaceAll(鈥淛avaScript鈥, 鈥淭ypeScript鈥);
// 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 = 鈥淛avaScript es un maravilloso lenguaje de programaci贸n鈥;
const replacedString = string.replace(鈥榤aravilloso鈥, 鈥榩oderoso鈥)
console.log(replacedString);