viernes, 2 de diciembre de 2016

Dar formato a número tipo moneda con Javascript

javascript_logo

En este artículo veremos una función que nos puede servir de mucha ayuda si trabajamos con operaciones monetarias en nuestra web, la idea surge a partir de la función number_format() de PHP y a que Javascript no cuenta con una función como esta, además de ser costoso en tiempo y procesamiento mandar a dar formato al número por una función Ajax al lado del servidor.

La función en cuestión es la siguiente:

var fNumber = {
sepMil: ".", // separador para los miles
sepDec: ',', // separador para los decimales
formatear:function (num){
num +='';
var splitStr = num.split('.');
var splitLeft = splitStr[0];
var splitRight = splitStr.length > 1 ? this.sepDec + splitStr[1] : '';
var regx = /(\d+)(\d{3})/;
while (regx.test(splitLeft)) {
splitLeft = splitLeft.replace(regx, '$1' + this.sepMil + '$2');
}
return this.simbol + splitLeft + splitRight;
},
go:function(num, simbol){
this.simbol = simbol ||'';
return this.formatear(num);
}
}

Para utilizar dicha función bastaría con llamarla de la siguiente manera:

//retorna $45.786.477,86
fNumber.go(45786477.86, "$");
// retorna "45.786.477,86234"
fNumber.go(45786477.86234);
// retorna 45.786.477"
fNumber.go(45786477);
// retorna NaN
fNumber.go(NaN);

Como primer parámetro y único obligatorio se pasa el número a dar formato, y el segundo parámetro es opcional si se quiere añadir la simbología al inicio del mismo.

En el último ejemplo se pasa como parámetro un valor no numérico y devuelve el mismo valor.

Esta función es puede acomodar a la forma de trabajo que se necesite en cierto momento, definiendo los separadores como parámetros de la función y definiendo valores por defecto en caso de no especificarse, además existen algunos casos en que validan el numero proporcionado y si no es válido devuelven “0” y personalizar la cantidad de decimales deseados, todo esto es posible haciéndole algunas pequeñas modificaciones a esta función.


¿Te ha gustado este Post? Compártelo con tus amigos.

No hay comentarios:

Publicar un comentario

IconIconIcon