Botón para abrir el Menú Botón para cerrar el Menú
Logo da empresa Alura
Iniciar Sesión Nuestros Planes
Formaciones Conoce a Luri
  • Programación _
  • Front End _
  • Data Science _
  • DevOps _
  • Innovación y Gestión _
Artículos de Tecnología > Front-end

Formatear números en JavaScript

Alura
Felipe Nascimento
Felipe Nascimento
23/09/2020

Compartir

Mira este artículo:
  1. Usando Math.round()
  2. Formatear el resultado con la ayuda del método toFixed()
  3. Formatear el resultado para dolares
  4. Para saber más

Estoy trabajando en un proyecto en una empresa que le gustaría saber cuánto está pagando por hora a sus trabajadores. Para eso necesitamos entender las diferentes formas de redondear y formatear números en JavaScript. En el código ya existe una función que captura el sueldo mensual y calcula el costo por hora:

function gananciaPorHora (sueldo, horasTrabajadasMes) {
const sueldoHora = (sueldo / horasTrabajadasMes);
return sueldoHora;
}

Resultado de la función:

gananciaPorHora (3000,176);

El sueldoHora sería: 17.045454545454547. Pero, como estamos hablando de un valor monetario, este número solo debe tener dos decimales. Es decir, lo que queremos es redondear este resultado para reducir los decimales.

Como usamos JavaScript, ya existe un método de la clase Math que redondea los números, el Math.round().

Usando Math.round()

function gananciaPorHora (sueldo, horasTrabajadasMes) {
const sueldoHora = (sueldo / horasTrabajadasMes);
return Math.round (sueldoHora);
}

Resultado de la función, ahora usando Math.round()

gananciaPorHora(3000,176);

El valor de la respuesta fue 17, ya hemos resuelto el problema de los varios decimales, pero ahora no es muy preciso. Esto se debe a que el método Math.round() devuelve el valor de un número redondeado al entero más cercano.

Formatear el resultado con la ayuda del método toFixed()

Como estamos trabajando con valores monetarios es importante conocer también los centavos, con la ayuda del método .toFixed() puedo controlar el número de decimales después de la coma de una manera más sencilla, indicando el número de decimales que quiero como parámetro.

Como queremos dejar la respuesta con dos decimales después de la coma, usamos toFixed(2), un punto importante a tener en cuenta es que el método .toFixed() redondea el número hacia arriba, es decir, si tenemos, por ejemplo 11.123, el valor resultante es 11.12, ya si tenemos 20.555, el valor resultante 20.56. Otro aspecto importante es que su retorno será una string representando el número.

function gananciaPorHora (sueldo, horasTrabajadasMes) {
const sueldoHora = (sueldo / horasTrabajadasMes);
const total = sueldoHora.toFixed(2);
return total;
}

Ahora que dejamos el resultado de la función con dos decimales, ¿qué tal si dejamos el resultado formateado en dolares?

Formatear el resultado para dolares

En JavaScript tenemos un método llamado toLocaleString() que convierte un número en una string, ya tratando la cuestión del redondeo y convirtiendo a la moneda del país que queremos, en nuestro caso, el dolar, haciendo mucho más sencilla la tarea del programador.

El método toLocaleString() recibe algunos argumentos - un objeto literal con las propiedades -, en mi caso utilicé:

  • style : Que es el estilo del formato que se utilizará, aquí se permite usar:
    • decimal para representar números simples.
    • currency que se refiere al formato monetario y que indicará la moneda que se utilizará.
    • percent para formato de porcentaje.
  • currency: La moneda que se utilizará en el formateo monetario
function gananciaPorHora (sueldo, horasTrabajadasMes) {
const sueldoHora = (sueldo / horasTrabajadasMes);
const formato = sueldoHora.toLocaleString('es', { style: 'currency', currency: 'USD' });
return formato ;
}

Utilizando el formateo toLocaleString el resultado se vería así:

gananciaPorHora(3000,176); //USD'17,05'

Para saber más

En JavaScript tenemos otros métodos que se pueden utilizar para redondear como:

  • Math.ceil() que devuelve el mayor número entero que es mayor que el número pasado, por ejemplo Math.ceil(11.123), el valor es 12
  • Math.floor() que devuelve el menor número entero que es menor que el número pasado, por ejemplo Math.floor(11.789), el valor queda 11

Si te interesa este tema, aquí en Alura tenemos capacitaciones de front-end, para principiantes y para aquellos que ya son desarrolladores web. En ellas, verás cómo programar en Javascript, HTML y CSS para construir sitios web.

Felipe Nascimento
Felipe Nascimento

Desenvolvedor e instrutor na Alura com foco em JavaScript.

Siguiente Artículo
Crear una máscara de Teléfono con Javascript

Ver otros artículos sobre Front-end

Navegación

  • Planes
  • Instructores
  • Blog
  • Política de privacidad
  • Términos de uso
  • Sobre nosotros
  • Preguntas frecuentes

¡CONTÁCTANOS!

  • ¡Quiero entrar en contacto!

Blog

  • Programación
  • Data Science
  • Front End
  • Innovación y Gestión
  • DevOps

AOVS Sistemas de Informática S.A CNPJ 05.555.382/0001-33

SÍGUENOS EN NUESTRAS REDES SOCIALES

YouTube Facebook Instagram Linkedin Whatsapp Spotify

NOVEDADES Y LANZAMIENTOS

Aliados

  • Programa de aceleração Scale-Up Endeavor
  • En Alura somos unas de las Scale-Ups seleccionadas por Endeavor, programa de aceleración de las empresas que más crecen en el país.
  • Growth Academy 2021 do Google For Startups
  • Fuimos unas de las 7 startups seleccionadas por Google For Startups en participar del programa Growth Academy en 2021
Alura

Powered by

Caelum

AOVS Sistemas de Informática S.A CNPJ 05.555.382/0001-33

SÍGUENOS EN NUESTRAS REDES SOCIALES

YouTube Facebook Instagram Linkedin Whatsapp Spotify

Cursos

Cursos de Programación
Lógica de Programación | Java
Cursos de Front End
HTML y CSS | JavaScript | React
Cursos de Data Science
Data Science | Machine Learning | Excel | Base de Datos | Data Visualization | Estadística
Cursos de DevOps
Docker | Linux
Cursos de Innovación y Gestión
Transformación Ágil | Marketing Analytics

Alura

  • Educação em Tecnologia

    • logo fiap FIAP
    • logo casa do codigo Casa do Código
    • logo pm3 PM3 - Cursos de Produto
  • Mais Alura

    • logo alura start START BY Alura
    • logo alura lingua Alura Língua
    • logo alura para empresas Alura Para Empresas
    • logo alura latam Alura LATAM
  • Comunidade

    • logo tech guide Tech Guide
    • logo 7 days of code 7 days of code
    • logo Hipsters ponto Jobs Hipsters ponto Jobs
  • Podcasts

    • logo Hipster Network Hipster Network
    • logo Hipsters ponto Tech Hipsters ponto Tech
    • logo Dev sem fronteiras Dev sem Fronteiras
    • logo Like a Boss Like a Boss
    • logo IA Sob Controle IA Sob Controle
    • logo Mesa de Produto Mesa de Produto
    • logo Decode Decode
    • logo FIAPCast FIAPCast