Me gustaría formatear un precio en JavaScript. Me gustaría una función que tome a float
como argumento y devuelva un string
formato como este:
"$ 2,500.00"
¿Cuál es la mejor manera de hacer esto?
javascript
formatting
currency
Daniel Magliola
fuente
fuente
formatNumber
en javascriptRespuestas:
Number.prototype.toFixed
Esta solución es compatible con todos los principales navegadores:
Todo lo que necesita es agregar el símbolo de la moneda (por ejemplo
"$" + profits.toFixed(2)
) y tendrá su cantidad en dólares.Función personalizada
Si requiere el uso de
,
entre cada dígito, puede usar esta función:Úselo así:
Si siempre vas a usar '.' y ',', puede dejarlos fuera de su llamada al método, y el método los predeterminará por usted.
Si su cultura tiene los dos símbolos invertidos (es decir, europeos) y desea utilizar los valores predeterminados, simplemente pegue las siguientes dos líneas en el
formatMoney
método:Función personalizada (ES6)
Si puede usar la sintaxis moderna de ECMAScript (es decir, a través de Babel), puede usar esta función más simple:
fuente
d
yt
ser.
y,
respectivamente para que no tenga que especificarlos cada vez. Además, recomiendo modificar el comienzo de lareturn
declaración para que lea: de loreturn s + '$' + [rest]
contrario no obtendrá un signo de dólar.Formato numérico internacional
Javascript tiene un formateador de números (parte de la API de internacionalización).
Violín JS
Use
undefined
en lugar del primer argumento ('en-US'
en el ejemplo) para usar la configuración regional del sistema (la configuración regional del usuario en caso de que el código se ejecute en un navegador). Explicación adicional del código local .Aquí hay una lista de los códigos de moneda .
Intl.NumberFormat vs Number.prototype.toLocaleString
Una nota final que compara esto con la anterior.
toLocaleString
. Ambos ofrecen esencialmente la misma funcionalidad. Sin embargo, toLocaleString en sus encarnaciones anteriores (pre-Intl) en realidad no admite configuraciones regionales : utiliza la configuración regional del sistema. Por lo tanto, asegúrese de estar utilizando la versión correcta ( MDN sugiere verificar la existencia deIntl
). Además, el rendimiento de ambos es el mismo para un solo elemento, pero si tiene muchos números para formatear, el usoIntl.NumberFormat
es ~ 70 veces más rápido. Aquí se explica cómo usarlotoLocaleString
:Algunas notas sobre el soporte del navegador
fuente
Solución corta y rápida (¡funciona en todas partes!)
La idea detrás de esta solución es reemplazar las secciones coincidentes con la primera coincidencia y la coma, es decir
'$&,'
. La coincidencia se realiza mediante el enfoque de búsqueda anticipada . Puede leer la expresión como "hacer coincidir un número si es seguido por una secuencia de tres conjuntos de números (uno o más) y un punto" .PRUEBAS
MANIFESTACIÓN: http://jsfiddle.net/hAfMM/9571/
Solución corta extendida
También puede extender el prototipo de
Number
objeto para agregar soporte adicional de cualquier número de decimales[0 .. n]
y el tamaño de los grupos de números[0 .. x]
:DEMO / PRUEBAS: http://jsfiddle.net/hAfMM/435/
Solución corta super extendida
En esta versión súper extendida , puede establecer diferentes tipos de delimitadores:
DEMO / PRUEBAS: http://jsfiddle.net/hAfMM/612/
fuente
.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
.Number.prototype.toMoney = (decimal=2) -> @toFixed(decimal).replace /(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,"
\.
con$
(final de línea), es decirthis.toFixed(0).replace(/(\d)(?=(\d{3})+$)/g, "$1,")
.$1,
. La correspondencia se realiza utilizando el enfoque de búsqueda anticipada . Puede leer la expresión como "hacer coincidir un número si es seguido por una secuencia de tres conjuntos de números (uno o más) y un punto" .Eche un vistazo al objeto Número JavaScript y vea si puede ayudarlo.
toLocaleString()
formateará un número usando un separador de miles específico de ubicación.toFixed()
redondeará el número a un número específico de lugares decimales.Para usarlos al mismo tiempo, el valor debe cambiar su tipo a un número porque ambos generan una cadena.
Ejemplo:
fuente
toLocaleString
que use la configuración regional del sistema y una nueva (incompatible) que provenga de la API ECMAScript Intl. Explicado aquí . Esta respuesta parece estar destinada a la versión anterior.A continuación se muestra el código de Patrick Desjardins (alias Daok) con un poco de comentarios agregados y algunos cambios menores:
y aquí algunas pruebas:
Los cambios menores son:
movido un poco
Math.abs(decimals)
para que se haga solo cuando no es asíNaN
.decimal_sep
ya no puede ser una cadena vacía (un tipo de separador decimal es imprescindible)usamos
typeof thousands_sep === 'undefined'
como se sugiere en Cómo determinar mejor si un argumento no se envía a la función JavaScript(+n || 0)
no es necesario porquethis
es unNumber
objetoJS Fiddle
fuente
parseInt
llama al valor absoluto de la parte INTEGER del número. ¡La parte INTEGER no puede comenzar con CERO a menos que sea solo CERO! YparseInt(0) === 0
octal o decimal.0
es considerado octal porparseInt
. Pero en este código es IMPOSIBLEparseInt
recibir016
como entrada (o cualquier otro valor con formato octal), porque el argumento pasadoparseInt
es procesado primero por laMath.abs
función. Por lo tanto, no hay forma deparseInt
recibir un número que comience con cero a menos que sea solo un cero o0.nn
(dondenn
están los decimales). Pero ambos0
y las0.nn
cadenas se convertiríanparseInt
en un CERO simple como se supone que es.contabilidad.js es una pequeña biblioteca de JavaScript para el formato de números, dinero y divisas.
fuente
Si la cantidad es un número, digamos
-123
, entoncesproducirá la cuerda
"-$123.00"
.Aquí hay un ejemplo de trabajo completo .
fuente
minimumFractionDigits: 0
Aquí está el mejor formateador de dinero js que he visto:
Fue reformateado y prestado desde aquí: https://stackoverflow.com/a/149099/751484
Tendrá que suministrar su propio designador de moneda (usó $ arriba).
Llámelo de esta manera (aunque tenga en cuenta que los argumentos predeterminados son 2, coma y punto, por lo que no necesita proporcionar ningún argumento si es su preferencia):
fuente
var
declaración.Ya hay algunas respuestas geniales aquí. Aquí hay otro intento, solo por diversión:
Y algunas pruebas:
Editado: ahora también manejará números negativos
fuente
i = orig.length - i - 1
en la devolución de llamada. Aún así, uno menos transversal de la matriz.reduce
método se introdujo en Ecmascript 1.8 y no es compatible con Internet Explorer 8 y versiones posteriores.Funciona para todos los navegadores actuales
Úselo
toLocaleString
para formatear una moneda en su representación sensible al idioma (usando los códigos de moneda ISO 4217 ).Fragmentos de código de Rand sudafricano de ejemplo para @avenmore
fuente
Creo que lo que quieres es
f.nettotal.value = "$" + showValue.toFixed(2);
fuente
Numeral.js : una biblioteca js para formatear fácilmente los números por @adamwdraper
fuente
Ok, basado en lo que dijiste, estoy usando esto:
Estoy abierto a sugerencias de mejora (preferiría no incluir YUI solo para hacer esto :-)) Ya sé que debería detectar el "." en lugar de solo usarlo como separador decimal ...
fuente
Yo uso la biblioteca Globalizar (de Microsoft):
¡Es un gran proyecto para localizar números, monedas y fechas y tenerlos formateados automáticamente de la manera correcta de acuerdo con la configuración regional del usuario! ... y a pesar de que debería ser una extensión jQuery, actualmente es una biblioteca 100% independiente. ¡Les sugiero a todos que lo prueben! :)
fuente
javascript-number-formatter (anteriormente en Google Code )
Solo 75 líneas incluyendo información de licencia MIT, líneas en blanco y comentarios.#,##0.00
o con negación-000.####
.# ##0,00
,#,###.##
,#'###.##
o cualquier tipo de símbolo no de numeración.#,##,#0.000
o#,###0.##
son todos válidos##,###,##.#
o0#,#00#.###0#
están todos bien.format( "0.0000", 3.141592)
.(extracto de su archivo README)
fuente
+1 a Jonathan M por proporcionar el método original. Dado que esto es explícitamente un formateador de moneda, seguí adelante y agregué el símbolo de moneda (predeterminado a '$') a la salida, y agregué una coma predeterminada como el separador de miles. Si realmente no desea un símbolo de moneda (o separador de miles), simplemente use "" (cadena vacía) como argumento para ello.
fuente
+n || 0
es lo único que me parece un poco extraño (de todos modos, para mí).this
es un nombre de variable perfectamente útil. Convertirlo paran
que pueda guardar 3 caracteres en el momento de la definición puede haber sido necesario en una era en la que se contaban RAM y ancho de banda en KB, pero es simplemente ofuscatorio en una era en la que el minificador se ocupará de todo eso antes de que llegue a producción. Las otras micro optimizaciones inteligentes son al menos discutibles.Hay un puerto javascript de la función PHP "number_format".
Lo encuentro muy útil, ya que es fácil de usar y reconocible para los desarrolladores de PHP.
(Bloque de comentarios del original , incluido a continuación para ejemplos y crédito cuando sea debido)
fuente
¿Un método más corto (para insertar espacio, coma o punto) con expresión regular?
fuente
No he visto nada como esto. Es bastante conciso y fácil de entender.
Aquí hay una versión con más opciones en la salida final para permitir formatear diferentes monedas en diferentes formatos de localidad.
fuente
La respuesta de Patrick Desjardins se ve bien, pero prefiero que mi javascript sea simple. Aquí hay una función que acabo de escribir para tomar un número y devolverlo en formato de moneda (menos el signo de dólar)
fuente
La parte principal es insertar los miles de separadores, que podrían hacerse así:
fuente
Hay un incorporado en
function
Fijo enjavascript
fuente
toFixed()
toFixed()
es una función delNumber
objeto y no funcionarávar num
si fuera unString
, por lo que el contexto adicional me ayudó.De WillMaster .
fuente
Sugiero la clase NumberFormat de la API de visualización de Google .
Puedes hacer algo como esto:
Espero que ayude.
fuente
Esto puede ser un poco tarde, pero aquí hay un método que acabo de elaborar para que un compañero de trabajo agregue una función de reconocimiento local
.toCurrencyString()
a todos los números. La internalización es solo para la agrupación de números, NO el signo de la moneda; si está generando dólares, úselos"$"
como se suministran, porque$123 4567
en Japón o China es la misma cantidad de USD que$1,234,567
aquí en los EE. UU. Si está emitiendo euro / etc., cambie el signo de moneda de"$"
.Declare esto en cualquier lugar de su CABEZA o donde sea necesario, justo antes de que necesite usarlo:
¡Entonces has terminado! Úselo en
(number).toCurrencyString()
cualquier lugar donde necesite generar el número como moneda.fuente
Como de costumbre, hay varias formas de hacer lo mismo, pero evitaría usarlo,
Number.prototype.toLocaleString
ya que puede devolver diferentes valores en función de la configuración del usuario.Tampoco recomiendo extender los
Number.prototype
- prototipos de objetos nativos extendidos es una mala práctica ya que puede causar conflictos con el código de otras personas (por ejemplo, bibliotecas / frameworks / complementos) y puede no ser compatible con futuras implementaciones / versiones de JavaScript.Creo que las expresiones regulares son el mejor enfoque para el problema, aquí está mi implementación:
editado el 30/08/2010: opción agregada para establecer el número de dígitos decimales. editado el 23/08/2011: opción agregada para establecer el número de dígitos decimales a cero.
fuente
Aquí hay algunas soluciones, todas pasan el conjunto de pruebas, el conjunto de pruebas y el punto de referencia incluido, si desea copiar y pegar para probar, pruebe This Gist .
Método 0 (RegExp)
Base en https://stackoverflow.com/a/14428340/1877620 , pero corrija si no hay un punto decimal.
Método 1
Método 2 (dividir en matriz)
Método 3 (bucle)
Ejemplo de uso
Separador
Si queremos separador de miles personalizado o separador decimal, use
replace()
:Banco de pruebas
Punto de referencia
fuente
fuente
Una opción simple para la colocación adecuada de la coma invirtiendo la cadena primero y la expresión regular básica.
fuente
Encontré esto en: contabilidad.js . Es muy fácil y se adapta perfectamente a mis necesidades.
fuente
$('#price').val( accounting.formatMoney(OOA, { symbol: "€", precision: 2,thousand: ".", decimal :",",format: "%v%s" } ) );
- mostrar 1.000,00 E