Cómo formatear un número con comas como mil separadores?

Mientras realiza conversiones en JavaScript, puede haber un requisito para aplicarla de manera específica. Por ejemplo, denota un número complejo de tal manera que se vuelve fácil de entender. En tales escenarios, formatear un número con comas como miles de separadores en JavaScript ayudan a contar y analizar el resultado resultante de manera efectiva.

Este blog indicará los enfoques para formatear un número con comas como mil separadores en JavaScript.

Cómo formatear/configurar un número en JavaScript con comas como mil separadores?

Para formatear/configurar un número con comas como mil separadores en JavaScript, considere los siguientes enfoques:

• "TOLOCALECRING ()" método.
• "formato()"Método y"Formato numérico()"Constructor.
• "reemplazar()"Método y"Expresión regular" patrón.

Método 1: formatear/configurar un número con comas como miles de separadores utilizando el método tolocaleString () en JavaScript

El "TOLOCALECRING ()El método "proporciona un objeto de fecha en forma de cadena. Este método se utiliza para formatear un número basado en el formato de lenguaje especificado.

Sintaxis

documento.tolocalestring (locales, opciones)

En esta sintaxis:

• "locales"Se refiere al formato de idioma que debe usarse.
• "opción"Es un objeto donde se pueden establecer las propiedades.

Ejemplo

Pasemos por el ejemplo declarado a continuación:

En las líneas de código anteriores.

• En primer lugar, almacene el número en la variable llamada "norte".
• En el siguiente paso, aplique el "TOLOCALECRING ()"Método y asigne el formato de idioma como"en-us" .
• Esto, como resultado, mostrará el número especificado en el formato establecido separado por comas.

Producción

En la salida, se puede ver que las comas se incluyen en el número proporcionado en función del formato especificado.

Método 2: formatear/configurar un número con comas como miles de separador a través del método format () e intl.Constructor NumberFormat () en JavaScript

El "formato()El método "proporciona una cadena formateada en función de los parámetros proporcionados en el"Intl" y el "Intl.Formato numérico()"El constructor crea el intl.Objetos NumberFormat que configuran el formato de número sensible al lenguaje. Estos enfoques se pueden utilizar para formatear el número proporcionado en función de un formato de idioma particular.

Sintaxis

Intl.NumberFormat (locales, opciones)

En la sintaxis dada anteriormente:

• "locales"Se refiere al formato específico del idioma.
• "opción"Corresponde al objeto que comprende las propiedades.

Ejemplo

Echemos un vistazo al ejemplo declarado a continuación:

Aquí:

• En el código HTML, incluya un encabezado que mostrará el número formateado.
• En el código JS, ingrese el número del usuario que debe formatearse a través de la solicitud.
• En el siguiente paso, aplique el "Formato numérico()"Constructor para crear un objeto que tenga el formato de lenguaje establecido, yo.mi., (en-us)
• Después de eso, aplique el "formato()Método "que devuelve el número resultante en función del formato especificado.
• Por último, acceda al encabezado incluido usando el "getElementById ()"Método y muestre el resultado mediante el encabezado utilizando el"innerhtml" propiedad.

Producción

Se puede observar que el número definido por el usuario está formateado en función del formato de lenguaje especificado.

Método 3: Formateo de un número con comas como miles de separadores en JavaScript usando el método reemplazar () y el patrón de expresión regular

El "reemplazar()"El método busca una cadena particular para el valor y la reemplaza con el nuevo valor, y el"Expresión regular"El patrón realiza una búsqueda global basada en la condición como su parámetro. Estos enfoques se pueden aplicar para buscar los dígitos a nivel mundial y colocar las comas en los índices especificados.

Sintaxis

cadena.Reemplazar (SearchValue, NewValue)

En la sintaxis anterior:

• "Searchvalue"Se refiere al valor que debe buscarse.
• "nuevo valor"Corresponde al valor que debe reemplazarse.

Patrón regex "/\ b (?= (/d 3)+(?!\ d))/g "para la búsqueda global

• "/… /G": Habilita la creación de una expresión regular que coincida con cada instancia de un patrón.
• "\B": Significa que el primer número en la cadena no coincide.
• "(?= (...))": Proporciona un análisis prospectivo.
• "(/d 3)": Captura tres dígitos.
• "(?!\d)": Hace una mirada hacia atrás y corresponde a algo que no es seguro de dígitos.

Ejemplo

Pasemos por el ejemplo dado a continuación:

Ingrese el número

Entregar

En el fragmento de código anterior:

• En primer lugar, incluya el ""Etiqueta para especificar una etiqueta.
• En el siguiente paso, incluya un ""Elemento que tomará la entrada como"números" solo.
• Además, cree un botón que tenga un adjunto "al hacer clic"Evento para invocar la función llamada"myFunction ()".
• El agregado "

  Se especifica la etiqueta para contener el resultado resultante.

• En el código JavaScript, declare una función llamada "myFunction ()".
• En la definición de función, acceda a la asignada "aporte"Campo a través del"getElementById ()" método.
• Después de eso, aplique el "reemplazar()Método "junto con el patrón de expresión regular para formatear/configurar el número especificado con las comas después de tres lugares.
• Finalmente, acceda al "

  "Etiqueta por su"identificación" utilizando el "getElementById ()"Método y agregar el resultado resultante en él.

Producción

En esta salida en particular, es evidente que la expresión regular entró en vigencia correctamente y el número está formateado con comas en cada mil.

Conclusión

Para formatear/configurar un número con comas como mil separadores que usan JavaScript, use el "TOLOCALECRING ()"Método, el"formato()"Método con el"Intl.Formato numérico() "Constructor, o el"reemplazar()"Método con"Expresión regular" patrón. Los dos primeros enfoques simplemente formaten el número proporcionado y el número definido por el usuario en función del formato de idioma particular. El último enfoque globalmente busca el valor y lo reemplaza en función del patrón de expresión regular. Este artículo discutió los enfoques para formatear/configurar un número con comas como mil separadores utilizando JavaScript.