Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery Number Formatting

There are way too many questions and answers about this basic functionality, I cannot see the wood for the trees.

In Java there is only one simple answer (java.text.NumberFormat and its subclasses) so I'm sure the majority of plugins, questions and answers will mature eventually to a de-facto standard for JQuery.

This plugin is the best I found so far, but I don't know if it's still developed, is mature etc.

http://plugins.jquery.com/project/numberformatter

Is there a better solution? Is it mature / active enough to rely on?


Edit:

I would like to be able to format currencies, decimal, integers based on the same format patterns Java uses, so that data recieved on the client side can be formatted without sending it first to the server.

e.g.

Format 1000 to $1,000 or 1,000.00 etc (locale support is nice)

Seems that http://plugins.jquery.com/project/numberformatter does the job but the question was: "Am I using the right thing?" or "Is there a better way to do so?"

like image 397
Eran Medan Avatar asked Sep 06 '11 22:09

Eran Medan


People also ask

How do you format numbers in JavaScript?

JavaScript numbers can be formatted in different ways like commas, currency, etc. You can use the toFixed() method to format the number with decimal points, and the toLocaleString() method to format the number with commas and Intl. NumberFormat() method to format the number with currency.

What are the Best jQuery plugins for formatting numbers?

More in this category... number.js is a jQuery plugin that easily converts input elements your users input in the correct format for further using. This plugin supports returning the formatted number, while retaining the original .text ()-like functionality. 1. Markup 2. Include jQuery library and number

How do I add custom number format to a jQuery?

Add this Jquery in your child theme’s custom js file. var custom_number_format_op = custom_number_format( number_val, '2', ); $( '.number-formate-output' ).text( 'Output: ' + custom_number_format_op ); function custom_number_format( number_input, decimals, dec_point, thousands_sep ) {

How to format input elements to 2 decimal places using jQuery?

number.js is a jQuery plugin that easily converts input elements your users input in the correct format for further using. This plugin supports returning the formatted number, while retaining the original .text ()-like functionality. 1. Markup 2. Include jQuery library and number 3. Call the plugin (Format the numbers to 2 decimal places)

What is the purpose of number formatting in JavaScript?

The purpose of number formatting is to convert a Number object to a human readable string using the culture-specific settings. The kendo.format and kendo.toString methods support standard and custom numeric formats. "n" —Renders a number.


2 Answers

I would recommend looking at this article on how to use javascript to handle basic formatting:

function addCommas(nStr) {     nStr += '';     x = nStr.split('.');     x1 = x[0];     x2 = x.length > 1 ? '.' + x[1] : '';     var rgx = /(\d+)(\d{3})/;     while (rgx.test(x1)) {         x1 = x1.replace(rgx, '$1' + ',' + '$2');     }     return x1 + x2; } 

source: http://www.mredkj.com/javascript/numberFormat.html

While jQuery can make your life easier in a million different ways I would say it's overkill for this. Keep in mind that jQuery can be fairly large and your user's browser needs to download it when you use it on a page.

When ever using jQuery you should step back and ask if it contributes enough to justify the extra overhead of downloading the library.

If you need some sort of advanced formatting (like the localization stuff in the plugin you linked), or you are already including jQuery it might be worth looking at a jQuery plugin.

Side note - check this out if you want to get a chuckle about the over use of jQuery.

like image 155
Abe Miessler Avatar answered Sep 25 '22 00:09

Abe Miessler


Using the jQuery Number Format plugin, you can get a formatted number in one of three ways:

// Return as a string $.number( 1234.5678, 2 ); // Returns '1,234.57'  // Place formatted number directly in an element: $('#mynum').number( 1234.5678 ); // #mynum would then contain '1,235'  // Replace existing number values in any element $('span.num').number( true, 2 ); // Formats and replaces existing numbers in those elements. 

If you don't like the format, or you need to localise, there are other parameters that let you choose how the number gets formatted:

.number( theNumber, decimalPlaces, decimalSeparator, thousandsSeparator )

You can also get jQuery Number Format from GitHub.

like image 22
Quadrant6 Avatar answered Sep 25 '22 00:09

Quadrant6