ES12: numeric-separators y replaceAll

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

La clase se llama “replaceAll” y nos explican el replace()?
Y se supone que los cursos pasan por revisores? :l

Una corrección, cuando pone:

string.replace();

//Debió poner

string.replaceAll();

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 = “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”;

ERROR. Se equivoco el profe

replaceAll => Reemplaza todas as coincidencias

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

ES12: numeric separators & replaceAll

Veamos las características “numeric separators” y “replaceAll” introducidas en ECMAScript 12 (también conocido como ES2021) con ejemplos sencillos.

Numeric Separators (Separadores numéricos):

La característica de “numeric 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. 👨‍💻

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

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

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 “g” 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 = “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);