Artículos de Tecnología > Front End

Formatear números en JavaScript

Felipe Nascimento
Felipe Nascimento

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é:

Para saber más

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

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.

Artículos de Tecnología > Front End

En Alura encontrarás variados cursos sobre Front End. ¡Comienza ahora!

  • 118 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Descuento de lanzamiento de 30%

Trimestral

Descuento de lanzamiento de 30%
  • 118 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
US$19,90
un pago de US$29,90 US$19,90
¡Quiero empezar a estudiar!

Paga en moneda local en los siguientes países

Semestral

Descuento de lanzamiento de 30%
  • 118 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
US$33,90
un pago de US$49,90 US$33,90
¡Quiero empezar a estudiar!

Paga en moneda local en los siguientes países

Acceso a todos los cursos
Estudia las 24 horas, dónde y cuándo quieras
Nuevos cursos cada semana