Formatear números en JavaScript

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.