{"id":5348,"date":"2016-09-17T23:18:59","date_gmt":"2016-09-17T15:18:59","guid":{"rendered":"https:\/\/sdeno.com\/?p=5348"},"modified":"2016-09-17T23:20:18","modified_gmt":"2016-09-17T15:20:18","slug":"js%e9%87%91%e9%92%b1%e6%a0%bc%e5%bc%8f","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=5348","title":{"rendered":"js\u91d1\u94b1\u683c\u5f0f"},"content":{"rendered":"

\u517c\u5bb9IE8<\/p>\n

\u6548\u679c\u5c31\u662f\u8f93\u5165\u6570\u5b57\u65f6\uff0c\u81ea\u52a8\u5c06\u6570\u5b57\u683c\u5f0f\u5316\u4e3a\u56fd\u9645\u91d1\u94b1\u7684\u683c\u5f0f\uff0c\u4f8b\u5982\uff1a<\/p>\n

3234.99 \u8f6c\u00a03,234.99<\/pre>\n
\u4e0d\u4ec5\u5982\u6b64\u8fd8\u652f\u6301\u53cc\u5411\u6570\u636e\u7ed1\u5b9a\u7684\u529f\u80fd\u3002<\/p>\n
 <\/p>\n
\u53c2\u8003\u82f1\u6587\u6587\u6863\uff1a<\/p>\n
 <\/p>\n
\n
accounting.js<\/h1>\n
accounting.js<\/strong>\u00a0is a tiny JavaScript library for number, money and currency formatting, with optional excel-style column rendering (to line up symbols and decimals). It’s lightweight, fully localisable and has zero dependencies.<\/p>\n<\/section>\n
\n
Library Methods<\/h2>\n
formatMoney()<\/strong>\u00a0– format any number into currency<\/h4>\n
The most basic function of this library is money-formatting numbers, with currency symbol, precision (places), and thousand\/decimal separators:<\/p>\n
\/\/ Default usage:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatMoney<\/span>(<\/span>12345678<\/span>);<\/span>\/\/ $12,345,678.00<\/span>\/\/ European formatting (custom symbol and separators), could also use options object as second param:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatMoney<\/span>(<\/span>4999.99<\/span>,<\/span>\"\u20ac\"<\/span>,<\/span>2<\/span>,<\/span>\".\"<\/span>,<\/span>\",\"<\/span>);<\/span>\/\/ \u20ac4.999,99<\/span>\/\/ Negative values are formatted nicely, too:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatMoney<\/span>(-<\/span>500000<\/span>,<\/span>\"\u00a3 \"<\/span>,<\/span>0<\/span>);<\/span>\/\/ \u00a3 -500,000<\/span>\/\/ Simple `format` string allows control of symbol position [%v = value, %s = symbol]:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatMoney<\/span>(<\/span>5318008<\/span>,<\/span>{<\/span> symbol<\/span>:<\/span>\"GBP\"<\/span>,<\/span>  format<\/span>:<\/span>\"%v %s\"<\/span>});<\/span>\/\/ 5,318,008.00 GBP<\/span><\/pre>\n
formatColumn()<\/strong>\u00a0– format a list of values for column-display<\/h4>\n
This table demonstrates how\u00a0accounting.js<\/strong>\u00a0can take a list of numbers and money-format them with padding to line up currency symbols and decimal places (NB:\u00a0white-space:pre<\/code>\u00a0is needed for the browser to render the padded spaces):<\/p>\n\n\n\n\n\n\n\n\n\n\n
Original Number:<\/th>\nWith accounting.js:<\/th>\nDifferent settings:<\/th>\nEuropean format:<\/th>\nSymbol after value:<\/th>\n<\/tr>\n<\/thead>\n
123.5<\/td>\n$ 123.50<\/td>\nHK$ 124<\/td>\n\u20ac 123,50<\/td>\n123.50 GBP<\/td>\n<\/tr>\n
3456.615<\/td>\n$ 3,456.62<\/td>\nHK$ 3,457<\/td>\n\u20ac 3.456,62<\/td>\n3,456.62 GBP<\/td>\n<\/tr>\n
777888.99<\/td>\n$ 777,888.99<\/td>\nHK$ 777,889<\/td>\n\u20ac 777.888,99<\/td>\n777,888.99 GBP<\/td>\n<\/tr>\n
-5432<\/td>\n$ -5,432.00<\/td>\nHK$ (5,432)<\/td>\n\u20ac -5.432,00<\/td>\n-5,432.00 GBP<\/td>\n<\/tr>\n
-1234567<\/td>\n$ -1,234,567.00<\/td>\nHK$ (1,234,567)<\/td>\n\u20ac -1.234.567,00<\/td>\n-1,234,567.00 GBP<\/td>\n<\/tr>\n
0<\/td>\n$ 0.00<\/td>\nHK$ —<\/td>\n\u20ac 0,00<\/td>\n0.00 GBP<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\/\/ Format list of numbers for display:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatColumn<\/span>([<\/span>123.5<\/span>,<\/span>3456.49<\/span>,<\/span>777888.99<\/span>,<\/span>12345678<\/span>,<\/span>-<\/span>5432<\/span>],<\/span>\"$ \"<\/span>);<\/span><\/pre>\n
formatNumber()<\/strong>\u00a0– format a number with custom precision and localisation<\/h4>\n
The base function of the library, which takes any number or array of numbers, runs\u00a0accounting.unformat()<\/code>\u00a0to remove any formatting, and returns the number(s) formatted with separated thousands and custom precision:<\/p>\n
accounting<\/span>.<\/span>formatNumber<\/span>(<\/span>5318008<\/span>);<\/span>\/\/ 5,318,008<\/span>\r\n\r\naccounting<\/span>.<\/span>formatNumber<\/span>(<\/span>9876543.21<\/span>,<\/span>3<\/span>,<\/span>\" \"<\/span>);<\/span>\/\/ 9 876 543.210<\/span><\/pre>\n
toFixed()<\/strong>\u00a0– better rounding for floating point numbers<\/h4>\n
Implementation of toFixed() that treats floats more like decimal values than binary, fixing inconsistent precision rounding in JavaScript (where some .05 values round up, while others round down):<\/p>\n
(<\/span>0.615<\/span>).<\/span>toFixed<\/span>(<\/span>2<\/span>);<\/span>\/\/ \"0.61\"<\/span>\r\n\r\naccounting<\/span>.<\/span>toFixed<\/span>(<\/span>0.615<\/span>,<\/span>2<\/span>);<\/span>\/\/ \"0.62\"<\/span><\/pre>\n
unformat()<\/strong>\u00a0– get a value from any formatted number\/currency string<\/h4>\n
Takes any number and removes all currency formatting:<\/p>\n
accounting<\/span>.<\/span>unformat<\/span>(<\/span>\"\u00a3 12,345,678.90 GBP\"<\/span>);<\/span>\/\/ 12345678.9<\/span><\/pre>\n<\/section>\n
\n
Demo \/ Try it out<\/h2>\n
Money formatting:<\/h4>\n
\n
Enter any number into the box and choose currency. Uses\u00a0accounting.formatMoney()<\/code>:<\/p>\n
<\/p>\n
Result:\u00a0$ 0.00<\/span><\/strong><\/p>\n<\/div>\n
Column formatting:<\/h4>\n
\n
Edit the values in the table to see how\u00a0formatColumn()<\/strong>\u00a0keeps them aligned:<\/p>\n\n\n\n\n\n
<\/td>\n$ 1,000,000.00<\/td>\nGBP 1,000,000<\/td>\n<\/tr>\n
<\/td>\n$ 3,234.99<\/td>\nGBP 3,235<\/td>\n<\/tr>\n
<\/td>\n$ 0.00<\/td>\nGBP —<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/section>\n
\n
Instructions \/ How to use<\/h2>\n
1. Download the script and put it somewhere, then do this:<\/p>\n
<script<\/span>src<\/span>=<\/span>\"path\/to\/accounting.js\"<\/span>><\/script><\/span><script<\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>><\/span>\/\/ You can do this now:<\/span>\r\n\r\n\taccounting<\/span>.<\/span>formatMoney<\/span>(<\/span>5318008<\/span>);<\/span><\/script><\/span><\/pre>\n
2. Check out the documentation and source-code for full method\/parameter info if you get stuck.<\/p>\n<\/section>\n
\n
Documentation<\/h2>\n
Information on the parameters of each method. See\u00a0library methods<\/a>\u00a0above for more examples. Optional parameters are in\u00a0[italics]<\/em><\/code>, with the default value indicated.<\/p>\n
accounting.settings<\/strong><\/h4>\n
\/\/ Settings object that controls default parameters for library methods:<\/span>\r\n\r\naccounting<\/span>.<\/span>settings <\/span>=<\/span>{<\/span>\r\n\r\n\tcurrency<\/span>:<\/span>{<\/span>\r\n\r\n\t\tsymbol <\/span>:<\/span>\"$\"<\/span>,<\/span>\/\/ default currency symbol is '$'<\/span>\r\n\r\n\t\tformat<\/span>:<\/span>\"%s%v\"<\/span>,<\/span>\/\/ controls output: %s = symbol, %v = value\/number (can be object: see below)<\/span>\r\n\r\n\t\tdecimal <\/span>:<\/span>\".\"<\/span>,<\/span>\/\/ decimal point separator<\/span>\r\n\r\n\t\tthousand<\/span>:<\/span>\",\"<\/span>,<\/span>\/\/ thousands separator<\/span>\r\n\r\n\t\tprecision <\/span>:<\/span>2<\/span>\/\/ decimal places<\/span>},<\/span>\r\n\r\n\tnumber<\/span>:<\/span>{<\/span>\r\n\r\n\t\tprecision <\/span>:<\/span>0<\/span>,<\/span>\/\/ default precision on numbers is 0<\/span>\r\n\r\n\t\tthousand<\/span>:<\/span>\",\"<\/span>,<\/span>\r\n\r\n\t\tdecimal <\/span>:<\/span>\".\"<\/span>}<\/span>}<\/span>\/\/ These can be changed externally to edit the library's defaults:<\/span>\r\n\r\naccounting<\/span>.<\/span>settings<\/span>.<\/span>currency<\/span>.<\/span>format <\/span>=<\/span>\"%s %v\"<\/span>;<\/span>\/\/ Format can be an object, with `pos`, `neg` and `zero`:<\/span>\r\n\r\naccounting<\/span>.<\/span>settings<\/span>.<\/span>currency<\/span>.<\/span>format <\/span>=<\/span>{<\/span>\r\n\r\n\tpos <\/span>:<\/span>\"%s %v\"<\/span>,<\/span>\/\/ for positive values, eg. \"$ 1.00\" (required)<\/span>\r\n\r\n\tneg <\/span>:<\/span>\"%s (%v)\"<\/span>,<\/span>\/\/ for negative values, eg. \"$ (1.00)\" <\/span>[optional]<\/span><\/em>\r\n\r\n\tzero<\/span>:<\/span>\"%s  -- \"<\/span>\/\/ for zero values, eg. \"$  --\" <\/span>[optional]<\/span><\/em>};<\/span>\/\/ Example using underscore.js - extend default settings (also works with $.extend in jQuery):<\/span>\r\n\r\naccounting<\/span>.<\/span>settings<\/span>.<\/span>number <\/span>=<\/span> _<\/span>.<\/span>defaults<\/span>({<\/span>\r\n\r\n\tprecision<\/span>:<\/span>2<\/span>,<\/span>\r\n\r\n\tthousand<\/span>:<\/span>\" \"<\/span>},<\/span> accounting<\/span>.<\/span>settings<\/span>.<\/span>number<\/span>);<\/span><\/pre>\n
accounting.formatMoney()<\/strong><\/h4>\n
\/\/ Standard usage and parameters (returns string):<\/span>\r\n\r\naccounting<\/span>.<\/span>formatMoney<\/span>(<\/span>number<\/span>,[<\/span>symbol <\/span>=<\/span>\"$\"<\/span>],[<\/span>precision <\/span>=<\/span>2<\/span>],[<\/span>thousand <\/span>=<\/span>\",\"<\/span>],[<\/span>decimal <\/span>=<\/span>\".\"<\/span>],[<\/span>format <\/span>=<\/span>\"%s%v\"<\/span>]<\/span><\/em>)<\/span>\/\/ Second parameter can be an object:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatMoney<\/span>(<\/span>number<\/span>,<\/span>[<\/span>options<\/span>]<\/span><\/em>)<\/span>\/\/ Available fields in options object, matching `settings.currency`:<\/span>var<\/span> options <\/span>=<\/span>{<\/span>\r\n\r\n\tsymbol <\/span>:<\/span>\"$\"<\/span>,<\/span>\r\n\r\n\tdecimal <\/span>:<\/span>\".\"<\/span>,<\/span>\r\n\r\n\tthousand<\/span>:<\/span>\",\"<\/span>,<\/span>\r\n\r\n\tprecision <\/span>:<\/span>2<\/span>,<\/span>\r\n\r\n\tformat<\/span>:<\/span>\"%s%v\"<\/span>};<\/span>\/\/ Example usage:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatMoney<\/span>(<\/span>12345678<\/span>);<\/span>\/\/ $12,345,678.00<\/span>\r\n\r\naccounting<\/span>.<\/span>formatMoney<\/span>(<\/span>4999.99<\/span>,<\/span>\"\u20ac\"<\/span>,<\/span>2<\/span>,<\/span>\".\"<\/span>,<\/span>\",\"<\/span>);<\/span>\/\/ \u20ac4.999,99<\/span>\r\n\r\naccounting<\/span>.<\/span>formatMoney<\/span>(-<\/span>500000<\/span>,<\/span>\"\u00a3 \"<\/span>,<\/span>0<\/span>);<\/span>\/\/ \u00a3 -500,000<\/span>\/\/ Example usage with options object:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatMoney<\/span>(<\/span>5318008<\/span>,<\/span>{<\/span>\r\n\r\n\tsymbol<\/span>:<\/span>\"GBP\"<\/span>,<\/span>\r\n\r\n\tprecision<\/span>:<\/span>0<\/span>,<\/span>\r\n\r\n\tthousand<\/span>:<\/span>\"\u00b7\"<\/span>,<\/span>\r\n\r\n\tformat<\/span>:<\/span>{<\/span>\r\n\r\n\t\tpos <\/span>:<\/span>\"%s %v\"<\/span>,<\/span>\r\n\r\n\t\tneg <\/span>:<\/span>\"%s (%v)\"<\/span>,<\/span>\r\n\r\n\t\tzero<\/span>:<\/span>\"%s  --\"<\/span>}<\/span>});<\/span>\/\/ Will recursively format an array of values:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatMoney<\/span>([<\/span>123<\/span>,<\/span>456<\/span>,<\/span>[<\/span>78<\/span>,<\/span>9<\/span>]],<\/span>\"$\"<\/span>,<\/span>0<\/span>);<\/span>\/\/ [\"$123\", \"$456\", [\"$78\", \"$9\"]]<\/span><\/pre>\n
accounting.formatColumn()<\/strong><\/h4>\n
\/\/ Standard usage and parameters (returns array):<\/span>\r\n\r\naccounting<\/span>.<\/span>formatColumn<\/span>(<\/span>list<\/span>,<\/span>[<\/span>symbol <\/span>=<\/span>\"$\"<\/span>],[<\/span>precision <\/span>=<\/span>2<\/span>],[<\/span>thousand <\/span>=<\/span>\",\"<\/span>],[<\/span>decimal <\/span>=<\/span>\".\"<\/span>],[<\/span>format <\/span>=<\/span>\"%s%v\"<\/span>]<\/span><\/em>)<\/span>\/\/ Second parameter can be an object (see formatNumber for available options):<\/span>\r\n\r\naccounting<\/span>.<\/span>formatColumn<\/span>(<\/span>list<\/span>,<\/span>[<\/span>options<\/span>]<\/span><\/em>)<\/span>\/\/ Example usage (NB. use a space after the symbol to add arbitrary padding to all values):<\/span>var<\/span> list <\/span>=<\/span>[<\/span>123<\/span>,<\/span>12345<\/span>];<\/span>\r\n\r\naccounting<\/span>.<\/span>formatColumn<\/span>(<\/span>list<\/span>,<\/span>\"$ \"<\/span>,<\/span>0<\/span>);<\/span>\/\/ [\"$    123\", \"$ 12,345\"]<\/span>\/\/ List of numbers can be a multi-dimensional array (formatColumn is applied recursively):<\/span>var<\/span> list <\/span>=<\/span>[[<\/span>1<\/span>,<\/span>100<\/span>],<\/span>[<\/span>900<\/span>,<\/span>9<\/span>]];<\/span>\r\n\r\naccounting<\/span>.<\/span>formatColumn<\/span>(<\/span>list<\/span>);<\/span>\/\/ [[\"$  1.00\", \"$100.00\"], [\"$900.00\", \"$  9.00\"]]<\/span><\/pre>\n
accounting.formatNumber()<\/strong><\/h4>\n
\/\/ Standard usage and parameters (returns string):<\/span>\r\n\r\naccounting<\/span>.<\/span>formatNumber<\/span>(<\/span>number<\/span>,<\/span>[<\/span>precision <\/span>=<\/span>0<\/span>],<\/span>[<\/span>thousand <\/span>=<\/span>\",\"<\/span>],<\/span>[<\/span>decimal <\/span>=<\/span>\".\"<\/span>]<\/span><\/em>)<\/span>\/\/ Second parameter can also be an object matching `settings.number`:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatNumber<\/span>(<\/span>number<\/span>,<\/span>[<\/span>object<\/span>]<\/span><\/em>)<\/span>\/\/ Example usage:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatNumber<\/span>(<\/span>9876543<\/span>);<\/span>\/\/ 9,876,543<\/span>\r\n\r\naccounting<\/span>.<\/span>formatNumber<\/span>(<\/span>4999.99<\/span>,<\/span>2<\/span>,<\/span>\".\"<\/span>,<\/span>\",\"<\/span>);<\/span>\/\/ 4.999,99<\/span>\/\/ Example usage with options object:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatNumber<\/span>(<\/span>5318008<\/span>,<\/span>{<\/span>\r\n\r\n\tprecision <\/span>:<\/span>3<\/span>,<\/span>\r\n\r\n\tthousand <\/span>:<\/span>\" \"<\/span>});<\/span>\/\/ Will recursively format an array of values:<\/span>\r\n\r\naccounting<\/span>.<\/span>formatNumber<\/span>([<\/span>123456<\/span>,<\/span>[<\/span>7890<\/span>,<\/span>123<\/span>]]);<\/span>\/\/ [\"123,456\", [\"7,890\", \"123\"]]<\/span><\/pre>\n
accounting.toFixed()<\/strong><\/h4>\n
\/\/ Standard usage and parameters (returns string):<\/span>\r\n\r\naccounting<\/span>.<\/span>toFixed<\/span>(<\/span>number<\/span>,<\/span>[<\/span>precision <\/span>=<\/span>0<\/span>]<\/span><\/em>);<\/span>\/\/ Example usage:<\/span>\r\n\r\naccounting<\/span>.<\/span>toFixed<\/span>(<\/span>0.615<\/span>,<\/span>2<\/span>);<\/span>\/\/ \"0.62\"<\/span>\/\/ Compare to regular JavaScript `Number.toFixed()` method:<\/span>(<\/span>0.615<\/span>).<\/span>toFixed<\/span>(<\/span>2<\/span>);<\/span>\/\/ \"0.61\"<\/span><\/pre>\n
accounting.unformat()<\/strong><\/h4>\n
\/\/ Standard usage and parameters (returns number):<\/span>\r\n\r\naccounting<\/span>.<\/span>unformat<\/span>(<\/span>string<\/span>,<\/span>[<\/span>decimal<\/span>]<\/span><\/em>);<\/span>\/\/ Example usage:<\/span>\r\n\r\naccounting<\/span>.<\/span>unformat<\/span>(<\/span>\"GBP \u00a3 12,345,678.90\"<\/span>);<\/span>\/\/ 12345678.9<\/span>\/\/ If a non-standard decimal separator was used (eg. a comma) unformat() will need it in order to work out<\/span>\/\/ which part of the number is a decimal\/float:<\/span>\r\n\r\naccounting<\/span>.<\/span>unformat<\/span>(<\/span>\"\u20ac 1.000.000,00\"<\/span>,<\/span>\",\"<\/span>);<\/span>\/\/ 1000000<\/span><\/pre>\n<\/section>\n
\n
Roadmap<\/h2>\n
See the\u00a0Github Issues page<\/a>\u00a0for up-to-date progress.<\/p>\n
Next Version:<\/h4>\n