Cómo dar formato a un número en JavaScript

JavaScript es uno de los lenguajes de programación más utilizados en todo el mundo. Muchos de los sitios web y aplicaciones que usamos a diario están construidos en este lenguaje, por lo que es importante conocer las herramientas que ofrece para poder dar un buen formato a los números que se utilizan en los proyectos.

En este artículo, te enseñaremos paso a paso cómo dar formato a un número utilizando las herramientas que JavaScript ofrece, con el objetivo de que puedas aplicar estas técnicas en tus propios proyectos. También se describirán los diferentes tipos de formatos que se pueden aplicar en un número en JavaScript, para que puedas elegir el que mejor se adapte a tus necesidades.

Tipos de formatos de números en JavaScript

En JavaScript, los números se pueden mostrar en diferentes formatos y es importante conocer cada uno de ellos para poder elegir el que necesitas para tu proyecto.

Formato de moneda

Para dar formato a un número como una moneda, necesitarás utilizar la función `toLocaleString()`:


let number = 1000;
console.log(number.toLocaleString('es-ES', {style: 'currency', currency: 'EUR'}));


Este código devolverá el número 1000 en el formato de moneda del euro.

Formato decimal con separador de miles

Para dar formato a un número con separador de miles y separador de decimales, necesitarás utilizar la función `toLocaleString()`:


let number = 1000;
console.log(number.toLocaleString('es-ES'));


Este código devolverá el número 1000 en el formato 1.000.

Formato de porcentaje

Para dar formato a un número como porcentaje, necesitarás utilizar la función `toLocaleString()`:


let number = 0.75;
console.log(number.toLocaleString('es-ES', {style: 'percent'}));


Este código devolverá el número 0.75 en el formato 75%.

Cómo dar formato a un número en JavaScript

Ahora que ya conoces los diferentes tipos de formatos que existen en JavaScript, es momento de aprender cómo darles el formato correspondiente.

Utilizando toFixed()

El método `toFixed()` se puede utilizar para dar formato a un número con un número especificado de decimales:


let number = 3.14159;
let formattedNumber = number.toFixed(2);


Este código devolverá el número 3.14.

Utilizando toLocaleString()

Para dar formato a un número utilizando la función `toLocaleString()` se puede especificar el idioma y el tipo de formato que se desea aplicar:


let number = 1000;
let formattedNumber = number.toLocaleString('es-ES', {style: 'currency', currency: 'EUR'});


Este código devolverá el número 1000 en formato de moneda del euro.

Ejemplos de código

A continuación, se presentan algunos ejemplos de cómo dar formato a diferentes tipos de números en JavaScript utilizando las técnicas descritas anteriormente:

Dar formato a un número como moneda


let number = 1000;
let formattedNumber = number.toLocaleString('es-ES', {style: 'currency', currency: 'EUR'});
console.log(formattedNumber);


Este código devolverá el número 1000 en formato de moneda del euro.

Dar formato a un número con separador de miles y decimales


let number = 1000;
let formattedNumber = number.toLocaleString('es-ES');
console.log(formattedNumber);


Este código devolverá el número 1000 en formato 1.000.

Dar formato a un número como porcentaje


let number = 0.75;
let formattedNumber = number.toLocaleString('es-ES', {style: 'percent'});
console.log(formattedNumber);


Este código devolverá el número 0.75 en formato 75%.

Conclusión

En este artículo, se describen las diferentes técnicas que se pueden utilizar para dar formato a los números en JavaScript, así como los diferentes tipos de formatos que se pueden aplicar. Al conocer estas técnicas, podrás dar un formato más profesional a los números en tus propios proyectos.

Preguntas frecuentes

¿Qué es JavaScript?

JavaScript es un lenguaje de programación de alto nivel que se utiliza principalmente para la implementación de aplicaciones web.

¿Qué es el formato de moneda?

El formato de moneda se utiliza para dar formato a un número como una moneda. Este formato puede variar de acuerdo al país y moneda que se esté utilizando.

¿Qué es el formato decimal con separador de miles?

El formato decimal con separador de miles se utiliza para dar formato a un número con separadores de miles y decimales.

¿Qué es el formato de porcentaje?

El formato de porcentaje se utiliza para dar formato a un número como porcentaje, multiplicándolo por 100 y añadiendo el signo % al final.
[nekopost slugs="eliminar-la-subcadena-de-string-javascript,use-exponentes-javascript,compare-cadenas-en-javascript,cambiar-el-color-de-texto-en-javascript,creacion-de-la-lista-de-objetos-javascript,eliminar-las-cadenas-de-caracteres-js,llame-a-la-funcion-javascript-en-la-carga-de-la-pagina,metodo-de-cambio-de-matriz-de-javascript-y-desague,reproducir-audio-en-javascript"]