1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible"> 7 8 <title>numbro.js</title> 9 <meta name="description" content="A javascript library for formatting and manipulating numbers."> 10 <meta name="author" content="Benjamin Van Ryseghem"> 11 12 <link rel="shortcut icon" href="/favicon.png" type="image/x-icon"> 13 <link rel="icon" href="/favicon.png" type="image/x-icon"> 14 15 <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> 16 17 <link rel="stylesheet" href="css/style.css"> 18 19 <!-- jQuery 2.1.3 --> 20
20<script src="./bower_components/jquery/dist/jquery.min.js"></script>
20 21 22 <!-- Bootstrap 3.3.4 --> 23
23<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
23 24 25 <!-- Bootstrap-select 1.6.5 --> 26
26<script src="./bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
26 27 28 <!-- numbro --> 29
29<script src="./node_modules/numbro/dist/numbro.js"></script>
29 30
30<script src="./node_modules/numbro/dist/languages.min.js"></script>
30 31</head> 32 33 34 <body> 35 36 <nav class="navbar navbar-default"> 37 <div class="container-fluid"> 38 <!-- Brand and toggle get grouped for better mobile display --> 39 <div class="navbar-header"> 40 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 41 <span class="sr-only">Toggle navigation</span> 42 <span class="icon-bar"></span> 43 <span class="icon-bar"></span> 44 <span class="icon-bar"></span> 45 </button> 46 <a class="navbar-brand" href="./index.html">numbro</a> 47 </div> 48 49 <!-- Collect the nav links, forms, and other content for toggling --> 50 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 51 <ul class="nav navbar-nav"> 52 53 <li><a href="getting-started.html">Getting Started</a></li> 54 55 56 57 <li class="active"><a href="format.html">Format <span class="sr-only">(current)</span></a></li> 58 59 60 61 <li><a href="old-format.html">Old Format</a></li> 62 63 64 65 <li><a href="manipulate.html">Manipulate</a></li> 66 67 68 69 <li><a href="languages.html">Languages</a></li> 70 71 </ul> 72 <ul class="nav navbar-nav navbar-right"> 73 <li><hr></li> 74 75 76 <li><a href="try-me.html">Try me</a></li> 77 78 79 80 <li><a href="news.html">News</a></li> 81 82 83 <li class="iconic-link"> 84 <a href="//github.com/BenjaminVanRyseghem/numbro" target="_blank"> 85 <span class="hidden-lg hidden-md hidden-sm">GitHub</span> 86 <i class="hidden-xs fa fa-github-square"></i> 87 </a> 88 </li> 89 </ul> 90 </div> 91 <!-- /.navbar-collapse --> 92 </div> 93 <!-- /.container-fluid --> 94</nav> 95 96 97 <div class="page-content"> 98 <div class="format"> 99 <div class="header"> 100 <h3>Format</h3> 101 102 <p class="short-description">How to format numbers, currencies, etc, and unformat them.</p> 103 </div> 104 <div class="container-fluid"> 105 <div class="row wrapper"> 106 <div class="col-md-9 content"> 107 <div id="format" class="section"> 108 <h4>Format</h4> 109 110 <p>Numbers can be formatted to look like currency, percentages, times, or even plain old numbers with decimal places, thousands, and abbreviations.</p> 111 <p>Since version 2.0.0, formatting is done via a literal object allowing easier customization and more predictable output.</p> 112 113 <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">string</span> <span class="o">=</span> <span class="nx">numbro</span><span class="p">(</span><span class="mi">1000</span><span class="p">).</span><span class="nx">format</span><span class="p">({</span><span class="na">thousandSeparated</span><span class="p">:</span> <span class="kc">true</span><span class="p">});</span> 114<span class="c1">// '1,000'</span></code></pre></figure> 115 116 <p>All available options can be found in the <a href="https://github.com/BenjaminVanRyseghem/numbro/blob/master/src/validating.js" target="_blank">code</a> directly.</p> 117 118 <div id="numbers" class="sub-section"> 119 <h4>Numbers</h4> 120 <table class="table table-striped table-bordered format-table demo-table"> 121 <thead> 122 <tr> 123 <th>Number</th> 124 <th>Format</th> 125 <th>String</th> 126 </tr> 127 </thead> 128 <tbody> 129 <tr> 130 <td>10000</td> 131 <td> 132<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 133 <span class="nl">thousandSeparated</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 134 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">4</span> 135<span class="p">}</span></code></pre></figure> 136 </td> 137 <td></td> 138 </tr> 139 <tr> 140 <td>10000.23</td> 141 <td> 142<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 143 <span class="nl">thousandSeparated</span><span class="p">:</span> <span class="kc">true</span> 144<span class="p">}</span></code></pre></figure> 145 </td> 146 <td></td> 147 </tr> 148 <tr> 149 <td>10000.23</td> 150 <td> 151<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 152 <span class="nl">thousandSeparated</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 153 <span class="nx">forceSign</span><span class="p">:</span> <span class="kc">true</span> 154<span class="p">}</span></code></pre></figure> 155 </td> 156 <td></td> 157 </tr> 158 <tr> 159 <td>-10000</td> 160 <td> 161<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 162 <span class="nl">thousandSeparated</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 163 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">1</span> 164<span class="p">}</span></code></pre></figure> 165 </td> 166 <td></td> 167 </tr> 168 <tr> 169 <td>10000.1234</td> 170 <td> 171<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 172 <span class="nl">mantissa</span><span class="p">:</span> <span class="mi">3</span> 173<span class="p">}</span></code></pre></figure> 174 </td> 175 <td></td> 176 </tr> 177 <tr> 178 <td>10000.1234</td> 179 <td> 180<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 181 <span class="nl">optionalMantissa</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 182 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">5</span> 183<span class="p">}</span></code></pre></figure> 184 </td> 185 <td></td> 186 </tr> 187 <tr> 188 <td>1.23</td> 189 <td> 190<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 191 <span class="nl">trimMantissa</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 192 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">4</span> 193<span class="p">}</span></code></pre></figure> 194 </td> 195 <td></td> 196 </tr> 197 <tr> 198 <td>1.234</td> 199 <td> 200<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 201 <span class="nl">trimMantissa</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 202 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">4</span> 203<span class="p">}</span></code></pre></figure> 204 </td> 205 <td></td> 206 </tr> 207 <tr> 208 <td>1.2345</td> 209 <td> 210<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 211 <span class="nl">trimMantissa</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 212 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">4</span> 213<span class="p">}</span></code></pre></figure> 214 </td> 215 <td></td> 216 </tr> 217 <tr> 218 <td>1.23456</td> 219 <td> 220<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 221 <span class="nl">trimMantissa</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 222 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">4</span> 223<span class="p">}</span></code></pre></figure> 224 </td> 225 <td></td> 226 </tr> 227 <tr> 228 <td>-10000</td> 229 <td> 230<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 231 <span class="nl">thousandSeparated</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 232 <span class="nx">negative</span><span class="p">:</span> <span class="dl">"</span><span class="s2">parenthesis</span><span class="dl">"</span><span class="p">,</span> 233 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">4</span> 234<span class="p">}</span></code></pre></figure> 235 </td> 236 <td></td> 237 </tr> 238 <tr> 239 <td>-0.23</td> 240 <td> 241<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 242 <span class="nl">mantissa</span><span class="p">:</span> <span class="mi">2</span> 243<span class="p">}</span></code></pre></figure> 244 </td> 245 <td></td> 246 </tr> 247 <tr> 248 <td>-0.23</td> 249 <td> 250<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 251 <span class="nl">negative</span><span class="p">:</span> <span class="dl">"</span><span class="s2">parenthesis</span><span class="dl">"</span><span class="p">,</span> 252 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">2</span> 253<span class="p">}</span></code></pre></figure> 254 </td> 255 <td></td> 256 </tr> 257 <tr> 258 <td>0.23</td> 259 <td> 260<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 261 <span class="nl">mantissa</span><span class="p">:</span> <span class="mi">5</span> 262<span class="p">}</span></code></pre></figure> 263 </td> 264 <td></td> 265 </tr> 266 <tr> 267 <td>1230974</td> 268 <td> 269<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 270 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 271 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">1</span> 272<span class="p">}</span></code></pre></figure> 273 </td> 274 <td></td> 275 </tr> 276 <tr> 277 <td>1460</td> 278 <td> 279<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 280 <span class="nl">spaceSeparated</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 281 <span class="nx">average</span><span class="p">:</span> <span class="kc">true</span> 282<span class="p">}</span></code></pre></figure> 283 </td> 284 <td></td> 285 </tr> 286 <tr> 287 <td>-104000</td> 288 <td> 289<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 290 <span class="nl">spaceSeparated</span><span class="p">:</span> <span class="kc">
290false</span><span class="p">,</span> 291 <span class="nx">average</span><span class="p">:</span> <span class="kc">true</span> 292<span class="p">}</span></code></pre></figure> 293 </td> 294 <td></td> 295 </tr> 296 <tr> 297 <td>233434</td> 298 <td> 299<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 300 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 301 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> 302<span class="p">}</span></code></pre></figure> 303 </td> 304 <td></td> 305 </tr> 306 307 <tr> 308 <td>233000</td> 309 <td> 310<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 311 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 312 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> 313<span class="p">}</span></code></pre></figure> 314 </td> 315 <td></td> 316 </tr> 317 <tr> 318 <td>1</td> 319 <td> 320<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 321 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ordinal</span><span class="dl">"</span> 322<span class="p">}</span></code></pre></figure> 323 </td> 324 <td></td> 325 </tr> 326 <tr> 327 <td>52</td> 328 <td> 329<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 330 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ordinal</span><span class="dl">"</span> 331<span class="p">}</span></code></pre></figure> 332 </td> 333 <td></td> 334 </tr> 335 <tr> 336 <td>23</td> 337 <td> 338<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 339 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ordinal</span><span class="dl">"</span> 340<span class="p">}</span></code></pre></figure> 341 </td> 342 <td></td> 343 </tr> 344 <tr> 345 <td>100</td> 346 <td> 347<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 348 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ordinal</span><span class="dl">"</span> 349<span class="p">}</span></code></pre></figure> 350 </td> 351 <td></td> 352 </tr> 353 </tbody> 354 </table> 355 </div> 356 357 <div id="average" class="sub-section"> 358 <h4>Average</h4> 359 360 <p> 361 numbro provides an easy mechanism to round up any number with the key <code>average</code>. 362 Note that the abbreviation is language-specific. 363 </p> 364 365 <table class="table table-striped table-bordered format-table demo-table"> 366 <thead> 367 <tr> 368 <th>Number</th> 369 <th>Format</th> 370 <th>String</th> 371 </tr> 372 </thead> 373 <tbody> 374 <tr> 375 <td>123</td> 376 <td> 377<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 378 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span> 379<span class="p">}</span></code></pre></figure> 380 </td> 381 <td></td> 382 </tr> 383 <tr> 384 <td>1234</td> 385 <td> 386<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 387 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span> 388<span class="p">}</span></code></pre></figure> 389 </td> 390 <td></td> 391 </tr> 392 <tr> 393 <td>12345</td> 394 <td> 395<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 396 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span> 397<span class="p">}</span></code></pre></figure> 398 </td> 399 <td></td> 400 </tr> 401 <tr> 402 <td>123456</td> 403 <td> 404<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 405 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span> 406<span class="p">}</span></code></pre></figure> 407 </td> 408 <td></td> 409 </tr> 410 <tr> 411 <td>1234567</td> 412 <td> 413<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 414 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span> 415<span class="p">}</span></code></pre></figure> 416 </td> 417 <td></td> 418 </tr> 419 <tr> 420 <td>12345678</td> 421 <td> 422<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 423 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span> 424<span class="p">}</span></code></pre></figure> 425 </td> 426 <td></td> 427 </tr> 428 <tr> 429 <td>123456789</td> 430 <td> 431<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 432 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span> 433<span class="p">}</span></code></pre></figure> 434 </td> 435 <td></td> 436 </tr> 437 </tbody> 438 </table> 439 440 <p> 441 In addition to this, when numbers are rounded up, one can specify the precision wanted with the key <code>totalLength</code>. 442 </p> 443 444 <table class="table table-striped table-bordered format-table demo-table"> 445 <thead> 446 <tr> 447 <th>Number</th> 448 <th>Format</th> 449 <th>String</th> 450 </tr> 451 </thead> 452 <tbody> 453 <tr> 454 <td>1234567891</td> 455 <td> 456<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 457 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span> 458<span class="p">}</span></code></pre></figure> 459 </td> 460 <td></td> 461 </tr> 462 <tr> 463 <td>1234567891</td> 464 <td> 465<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 466 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 467 <span class="nx">totalLength</span><span class="p">:</span> <span class="mi">1</span> 468<span class="p">}</span></code></pre></figure> 469 </td> 470 <td></td> 471 </tr> 472 <tr> 473 <td>1234567891</td> 474 <td> 475<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 476 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 477 <span class="nx">totalLength</span><span class="p">:</span> <span class="mi">2</span> 478<span class="p">}</span></code></pre></figure> 479 </td> 480 <td></td> 481 </tr> 482 <tr> 483 <td>1234567891</td> 484 <td> 485<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 486 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 487 <span class="nx">totalLength</span><span class="p">:</span> <span class="mi">3</span> 488<span class="p">}</span></code></pre></figure> 489 </td> 490 <td></td> 491 </tr> 492 <tr> 493 <td>1234567891</td> 494 <td> 495<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 496 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 497 <span class="nx">totalLength</span><span class="p">:</span> <span class="mi">4</span> 498<span class="p">}</span></code></pre></figure> 499 </td> 500 <td></td> 501 </tr> 502 <tr> 503 <td>1234567891</td> 504 <td> 505<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 506 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 507 <span class="nx">totalLength</span><span class="p">:</span> <span class="mi">5</span> 508<span class="p">}</span></code></pre></figure> 509 </td> 510 <td></td> 511 </tr> 512 <tr> 513 <td>1234567891</td> 514 <td> 515<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 516 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 517 <span class="nx">totalLength</span><span class="p">:</span> <span class="mi">6</span> 518<span class="p">}</span></code></pre></figure> 519 </td> 520 <td></td> 521 </tr> 522 <tr> 523 <td>1234567891</td> 524 <td> 525<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 526 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 527 <span class="nx">totalLength</span><span class="p">:</span> <span class="mi">7</span> 528<span class="p">}</span></code></pre></figure> 529 </td> 530 <td></td> 531 </tr> 532 <tr> 533 <td>1234567891</td> 534 <td> 535<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 536 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 537 <span class="nx">totalLength</span><span class="p">:</span> <span class="mi">8</span> 538<span class="p">}</span></code></pre></figure> 539 </td> 540 <td></td> 541 </tr> 542 <tr> 543 <td>1234567891</td> 544 <td> 545<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 546 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 547 <span class="nx">totalLength</span><span class="p">:</span> <span class="mi">9</span> 548<span class="p">}</span></code></pre></figure> 549 </td> 550 <td></td> 551 </tr> 552 <tr> 553 <td>1234567891</td> 554 <td> 555<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 556 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 557 <span class="nx">totalLength</span><span class="p">:</span> <span class="mi">10</span> 558<span class="p">}</span></code></pre></figure> 559 </td> 560 <td></td> 561 </tr> 562 563 </tbody> 564 </table> 565 </div> 566 567 <div id="currency" class="sub-section"> 568 <h4>Currency</h4> 569 <p>
570 numbro supports cultural currency formatting via the function <code>formatCurrency</code>. 571 </p> 572 573 <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">numbro</span><span class="p">(</span><span class="mf">1000.234</span><span class="p">).</span><span class="nx">formatCurrency</span><span class="p">();</span> 574<span class="c1">// $1000</span></code></pre></figure> 575 576 <table id="currency-table" class="table table-striped table-bordered demo-table"> 577 <thead> 578 <tr> 579 <th>Number</th> 580 <th>Language</th> 581 <th>String</th> 582 </tr> 583 </thead> 584 <tbody> 585 <tr> 586 <td>1000.234</td> 587 <td>en-US</td> 588 <td></td> 589 </tr> 590 <tr> 591 <td>1000.234</td> 592 <td>fr-FR</td> 593 <td></td> 594 </tr> 595 <tr> 596 <td>1000.234</td> 597 <td>ja-JP</td> 598 <td></td> 599 </tr> 600 <tr> 601 <td>1000.234</td> 602 <td>ru-RU</td> 603 <td></td> 604 </tr> 605 </tbody> 606 </table> 607 608 <p> 609 You can of course precise a more specific format, as long as you do not use the <code>$</code> (that would override defaults). 610 </p> 611 <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">numbro</span><span class="p">(</span><span class="mf">1000.234</span><span class="p">).</span><span class="nx">formatCurrency</span><span class="p">({</span> <span class="na">mantissa</span><span class="p">:</span> <span class="mi">2</span> <span class="p">});</span> 612<span class="c1">// $1000.23</span></code></pre></figure> 613 614 <table id="currency-table2" class="table table-striped table-bordered demo-table"> 615 <thead> 616 <tr> 617 <th>Number</th> 618 <th>Language</th> 619 <th>String</th> 620 </tr> 621 </thead> 622 <tbody> 623 <tr> 624 <td>1000.234</td> 625 <td>en-US</td> 626 <td></td> 627 </tr> 628 <tr> 629 <td>1000.234</td> 630 <td>fr-FR</td> 631 <td></td> 632 </tr> 633 <tr> 634 <td>1000.234</td> 635 <td>ja-JP</td> 636 <td></td> 637 </tr> 638 <tr> 639 <td>1000.234</td> 640 <td>ru-RU</td> 641 <td></td> 642 </tr> 643 </tbody> 644 </table> 645 646 <p> 647 But if you want to, you can always precise a format by hand to override the languages defaults. 648 </p> 649 650 <table class="table table-striped table-bordered format-table demo-table"> 651 <thead> 652 <tr> 653 <th>Number</th> 654 <th>Format</th> 655 <th>String</th> 656 </tr> 657 </thead> 658 <tbody> 659 <tr> 660 <td>1000.234</td> 661 <td> 662<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 663 <span class="nl">thousandSeparated</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 664 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">2</span> 665<span class="p">}</span></code></pre></figure> 666 </td> 667 <td></td> 668 </tr> 669 <tr> 670 <td>1000.2</td> 671 <td> 672<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 673 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 674 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> 675 <span class="nx">optionalMantissa</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 676 <span class="nx">currencyPosition</span><span class="p">:</span> <span class="dl">"</span><span class="s2">postfix</span><span class="dl">"</span><span class="p">,</span> 677 <span class="nx">spaceSeparated</span><span class="p">:</span> <span class="kc">true</span> 678<span class="p">}</span></code></pre></figure> 679 </td> 680 <td></td> 681 </tr> 682 <tr> 683 <td>1001</td> 684 <td> 685<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 686 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 687 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> 688 <span class="nx">optionalMantissa</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 689 <span class="nx">currencyPosition</span><span class="p">:</span> <span class="dl">"</span><span class="s2">prefix</span><span class="dl">"</span> 690<span class="p">}</span></code></pre></figure> 691 </td> 692 <td></td> 693 </tr> 694 <tr> 695 <td>-1000.234</td> 696 <td> 697<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 698 <span class="nl">thousandSeparated</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 699 <span class="nx">negative</span><span class="p">:</span> <span class="dl">"</span><span class="s2">parenthesis</span><span class="dl">"</span> 700<span class="p">}</span></code></pre></figure> 701 </td> 702 <td></td> 703 </tr> 704 <tr> 705 <td>-1000.234</td> 706 <td> 707<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 708 <span class="nl">mantissa</span><span class="p">:</span> <span class="mi">2</span> 709<span class="p">}</span></code></pre></figure> 710 </td> 711 <td></td> 712 </tr> 713 <tr> 714 <td>1230974</td> 715 <td> 716<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 717 <span class="nl">average</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 718 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> 719 <span class="nx">optionalMantissa</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 720 <span class="nx">spaceSeparated</span><span class="p">:</span> <span class="kc">true</span> 721<span class="p">}</span></code></pre></figure> 722 </td> 723 <td></td> 724 </tr> 725 </tbody> 726 </table> 727 </div> 728 729 <div id="bytes" class="sub-section"> 730 <h4>Bytes</h4> 731 <table class="table table-striped table-bordered format-table demo-table"> 732 <thead> 733 <tr> 734 <th>Number</th> 735 <th>Format</th> 736 <th>String</th> 737 </tr> 738 </thead> 739 <tbody> 740 <tr> 741 <td>100</td> 742 <td> 743<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 744 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">byte</span><span class="dl">"</span><span class="p">,</span> 745 <span class="nx">base</span><span class="p">:</span> <span class="dl">"</span><span class="s2">binary</span><span class="dl">"</span> 746<span class="p">}</span></code></pre></figure> 747 </td> 748 <td></td> 749 </tr> 750 <tr> 751 <td>2048</td> 752 <td> 753<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 754 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">byte</span><span class="dl">"</span><span class="p">,</span> 755 <span class="nx">base</span><span class="p">:</span> <span class="dl">"</span><span class="s2">binary</span><span class="dl">"</span><span class="p">,</span> 756 <span class="nx">spaceSeparated</span><span class="p">:</span> <span class="kc">true</span> 757<span class="p">}</span></code></pre></figure> 758 </td> 759 <td></td> 760 </tr> 761 <tr> 762 <td>7884486213</td> 763 <td> 764<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 765 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">byte</span><span class="dl">"</span><span class="p">,</span> 766 <span class="nx">base</span><span class="p">:</span> <span class="dl">"</span><span class="s2">binary</span><span class="dl">"</span><span class="p">,</span> 767 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">1</span> 768<span class="p">}</span></code></pre></figure> 769 </td> 770 <td></td> 771 </tr> 772 <tr> 773 <td>3467479682787</td> 774 <td> 775<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 776 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">byte</span><span class="dl">"</span><span class="p">,</span> 777 <span class="nx">base</span><span class="p">:</span> <span class="dl">"</span><span class="s2">binary</span><span class="dl">"</span><span class="p">,</span> 778 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">3</span><span class="p">,</span> 779 <span class="nx">spaceSeparated</span><span class="p">:</span> <span class="kc">true</span> 780<span class="p">}</span></code></pre></figure> 781 </td> 782 <td></td> 783 </tr> 784 </tbody> 785 </table> 786 </div> 787 788 <div id="percentages" class="sub-section"> 789 <h4>Percentages</h4> 790 <table class="table table-striped table-bordered format-table demo-table"> 791 <thead> 792 <tr> 793 <th>Number</th> 794 <th>Format</th> 795 <th>String</th> 796 </tr> 797 </thead> 798 <tbody> 799 <tr> 800 <td>1</td> 801 <td> 802<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 803 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">percent</span><span class="dl">"</span> 804<span class="p">}</span></code></pre></figure> 805 </td> 806 <td></td> 807 </tr> 808 <tr> 809 <td>0.974878234</td> 810 <td> 811<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 812 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">percent</span><span class="dl">"</span><span class="p">,</span> 813 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">4</span> 814<span class="p">}</span></code></pre></figure> 815 </td> 816 <td></td> 817 </tr> 818 <tr> 819 <td>-0.43</td> 820 <td> 821<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 822 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">percent</span><span class="dl">"</span><span class="p">,</span> 823 <span class="nx">spaceSeparated</span><span class="p">:</span> <span class="kc">true</span> 824<span class="p">}</span></code></pre></figure> 825 </td> 826 <td></td> 827 </tr> 828 <tr> 829 <td>0.43</td> 830 <td> 831<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 832 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">percent</span><span class="dl">"</span><span class="p">,</span> 833 <span class="nx">mantissa</span><span class="p">:</span> <span class="mi">3</span><span class="p">,</span> 834 <span class="nx">negative</span><span class="p">:</span> <span class="dl">"</span><span class="s2">parenthesis</span><span class="dl">"</span><span class="p">,</span> 835 <span class="nx">spaceSeparated</span><span class="p">:</span> <span class="kc">true</span> 836<span class="p">}</span></code></pre></figure> 837 </td> 838 <td></td> 839 </tr> 840 </tbody> 841 </table> 842 </div> 843 844 <div id="time" class="sub-section"> 845 <h4>Time</h4> 846 <table class="table table-striped table-bordered format-table demo-table"> 847 <thead> 848 <tr> 849 <th>Number</th> 850 <th>Format</th> 851 <th>String</th> 852 </tr> 853 </thead> 854 <tbody> 855 <tr> 856 <td>25</td> 857 <td> 858<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 859 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">
859time</span><span class="dl">"</span> 860<span class="p">}</span></code></pre></figure> 861 </td> 862 <td></td> 863 </tr> 864 <tr> 865 <td>238</td> 866 <td> 867<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 868 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">time</span><span class="dl">"</span> 869<span class="p">}</span></code></pre></figure> 870 </td> 871 <td></td> 872 </tr> 873 <tr> 874 <td>63846</td> 875 <td> 876<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> 877 <span class="nl">output</span><span class="p">:</span> <span class="dl">"</span><span class="s2">time</span><span class="dl">"</span> 878<span class="p">}</span></code></pre></figure> 879 </td> 880 <td></td> 881 </tr> 882 </tbody> 883 </table> 884 <p> 885 If you want to format time more than that, we recommend you <a href="//momentjs.com/" target="_blank">Momentjs</a> which inspired numbro. 886 </p> 887 </div> 888</div> 889 890<div id="unformat" class="section"> 891 <h4>Unformat</h4> 892 893 <p> 894 Got a formatted string? Use the <code>unformat</code> function to make it useful again. 895 </p> 896 897 <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">string</span> <span class="o">=</span> <span class="nx">numbro</span><span class="p">.</span><span class="nx">unformat</span><span class="p">(</span><span class="dl">'</span><span class="s1">($10,000.00)</span><span class="dl">'</span><span class="p">);</span> 898<span class="c1">// -10000</span></code></pre></figure> 899 900 <table id="unformat-table" class="table table-striped table-bordered"> 901 <thead> 902 <tr> 903 <th>String</th> 904 <th>Function</th> 905 <th>Number</th> 906 </tr> 907 </thead> 908 <tbody> 909 <tr> 910 <td>'10,000.123'</td> 911 <td>.unformat('10,000.123')</td> 912 <td></td> 913 </tr> 914 <tr> 915 <td>'0.12345'</td> 916 <td>.unformat('0.12345')</td> 917 <td></td> 918 </tr> 919 <tr> 920 <td>'1.23m'</td> 921 <td>.unformat('1.23m')</td> 922 <td></td> 923 </tr> 924 <tr> 925 <td>'23rd'</td> 926 <td>.unformat('23rd')</td> 927 <td></td> 928 </tr> 929 <tr> 930 <td>'$10,000.00'</td> 931 <td>.unformat('$10,000.00')</td> 932 <td></td> 933 </tr> 934 <tr> 935 <td>'100B'</td> 936 <td>.unformat('100B')</td> 937 <td></td> 938 </tr> 939 <tr> 940 <td>'3.154TB'</td> 941 <td>.unformat('3.154TB')</td> 942 <td></td> 943 </tr> 944 <tr> 945 <td>'-76%'</td> 946 <td>.unformat('-76%')</td> 947 <td></td> 948 </tr> 949 <tr> 950 <td>'2:23:57'</td> 951 <td>.unformat('2:23:57')</td> 952 <td></td> 953 </tr> 954 </tbody> 955 </table> 956</div> 957 958<div id="defaults" class="section"> 959 <h4>Defaults</h4> 960 961 <p> 962 numbro allows you to the default format to use, as well as how to format 0. 963 </p> 964 965 <div id="default-format" class="sub-section"> 966 <h4>Default format</h4> 967 968 <p> 969 Set a default format so you can use <code>.format()</code> without a string. The default format to <code>'0,0'</code>. 970 </p> 971 972 <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">number</span> <span class="o">=</span> <span class="nx">numbro</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span> 973 974<span class="nx">number</span><span class="p">.</span><span class="nx">format</span><span class="p">();</span> 975<span class="c1">// '1,000'</span> 976 977<span class="nx">numbro</span><span class="p">.</span><span class="nx">setDefaults</span><span class="p">({</span> 978 <span class="na">thousandSeparated</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> 979 <span class="na">mantissa</span><span class="p">:</span> <span class="mi">2</span> 980<span class="p">});</span> 981 982<span class="nx">number</span><span class="p">.</span><span class="nx">format</span><span class="p">();</span> 983<span class="c1">// '1,000.00'</span></code></pre></figure> 984 985 </div> 986 987 <div id="default-zero" class="sub-section"> 988 <h4>Default zero</h4> 989 990 <p> 991 Set a custom output when formatting numbers with a value of <code>0</code>. 992 </p> 993 994 995 <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">number</span> <span class="o">=</span> <span class="nx">numbro</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> 996 997<span class="nx">numbro</span><span class="p">.</span><span class="nx">zeroFormat</span><span class="p">(</span><span class="dl">'</span><span class="s1">
997N/A</span><span class="dl">'</span><span class="p">);</span> 998 999<span class="kd">var</span> <span class="nx">zero</span> <span class="o">=</span> <span class="nx">number</span><span class="p">.</span><span class="nx">format</span><span class="p">(</span><span class="dl">'</span><span class="s1">0.0</span><span class="dl">'</span><span class="p">)</span> 1000<span class="c1">// 'N/A'</span></code></pre></figure> 1001 1002 </div> 1003</div> 1004
1005<script> 1006 $(function() { 1007 $("#format .format-table").each(function(index, table) { 1008 $(table).find("tr").each(function(index, tr) { 1009 if (index === 0) { 1010 return; 1011 } 1012 1013 var tds = $(tr).find("td"); 1014 var number = $(tds[0]).text(); 1015 eval("var format = " + $(tds[1]).text()); 1016 $(tds[2]).text(numbro(number).format(format)); 1017 }); 1018 }); 1019 1020 $("#format #currency-table").each(function(index, table) { 1021 $(table).find("tr").each(function(index, tr) { 1022 if (index === 0) { 1023 return; 1024 } 1025 1026 var tds = $(tr).find("td"); 1027 var value = $(tds[0]).text(); 1028 var lang = $(tds[1]).text(); 1029 numbro.setLanguage(lang); 1030 $(tds[2]).text(numbro(value).formatCurrency()); 1031 numbro.setLanguage("en-US"); 1032 }); 1033 }); 1034 1035 $("#format #currency-table2").each(function(index, table) { 1036 $(table).find("tr").each(function(index, tr) { 1037 if (index === 0) { 1038 return; 1039 } 1040 1041 var tds = $(tr).find("td"); 1042 var value = $(tds[0]).text(); 1043 var lang = $(tds[1]).text(); 1044 numbro.setLanguage(lang); 1045 $(tds[2]).text(numbro(value).formatCurrency("0[.]00")); 1046 numbro.setLanguage("en-US"); 1047 }); 1048 }); 1049 1050 $("#unformat-table").each(function(index, table) { 1051 $(table).find("tr").each(function(index, tr) { 1052 if (index === 0) { 1053 return; 1054 } 1055 1056 var tds = $(tr).find("td"); 1057 var value = $(tds[0]).text().split("'")[1]; 1058 $(tds[1]).text(".unformat(\"" + value + "\")"); 1059 $(tds[2]).text(numbro.unformat(value)); 1060 console.log("numbro.unformat(value)", numbro.unformat(value)); 1061 }); 1062 }); 1063 1064 $("#old-format .format-table").each(function(index, table) { 1065 $(table).find("tr").each(function(index, tr) { 1066 if (index === 0) { 1067 return; 1068 } 1069 1070 var tds = $(tr).find("td"); 1071 var number = $(tds[0]).text(); 1072 var format = $(tds[1]).text().split("'")[1]; 1073 $(tds[2]).text(numbro(number).format(format)); 1074 }); 1075 }); 1076 1077 $("#old-format #currency-table").each(function(index, table) { 1078 $(table).find("tr").each(function(index, tr) { 1079 if (index === 0) { 1080 return; 1081 } 1082 1083 var tds = $(tr).find("td"); 1084 var value = $(tds[0]).text(); 1085 var lang = $(tds[1]).text(); 1086 numbro.setLanguage(lang); 1087 $(tds[2]).text(numbro(value).formatCurrency()); 1088 numbro.setLanguage("en-US"); 1089 }); 1090 }); 1091 1092 $("#old-format #currency-table2").each(function(index, table) { 1093 $(table).find("tr").each(function(index, tr) { 1094 if (index === 0) { 1095 return; 1096 } 1097 1098 var tds = $(tr).find("td"); 1099 var value = $(tds[0]).text(); 1100 var lang = $(tds[1]).text(); 1101 numbro.setLanguage(lang); 1102 $(tds[2]).text(numbro(value).formatCurrency("0[.]00")); 1103 numbro.setLanguage("en-US"); 1104 }); 1105 }); 1106 }); 1107</script>
1107 1108 1109 1110 </div> 1111 <div id="side-nav" class="col-md-3 hidden-sm hidden-xs" role="navigation"> 1112 <ul class="nav nav-list"> 1113 </ul> 1114 </div> 1115 </div> 1116 </div> 1117</div> 1118
1119<script> 1120 $(function() { 1121 var scrollTreshold = 300; 1122 var sidemenu = $("#side-nav").find("ul"); 1123 var body = $("body"); 1124 $(".section").each(function(index, each) { 1125 var $each = $(each); 1126 var text = $($each.find("h4").get(0)).text(); 1127 var href = each.id; 1128 1129 1130 var subs = $each.find(".sub-section"); 1131 if (subs.length) { 1132 var li = $("<li><a href=#" + href + ">" + text + "</a>").appendTo(sidemenu); 1133 var ul = $('<ul class="nav nav-stacked submenu">').appendTo(li); 1134 subs.each(function(index, sub) { 1135 var text = $($(sub).find("h4").get(0)).text(); 1136 var href = sub.id; 1137 ul.append("<li><a href=#" + href + ">" + text + "</a></li>"); 1138 }); 1139 sidemenu.append("</ul></li>"); 1140 } else { 1141 sidemenu.append("<li><a href=#" + href + ">" + text + "</a></li>"); 1142 } 1143 }); 1144 1145 body.scrollspy({ 1146 target: "#side-nav", 1147 offset: 20 1148 }); 1149 1150 $(window).scroll(function() { 1151 var scrollTop = $(window).scrollTop(); 1152 if (scrollTop < scrollTreshold) { 1153 sidemenu.removeClass("affix"); 1154 } else { 1155 sidemenu.addClass("affix"); 1156 sidemenu.get(0).style.top = "64px"; 1157 } 1158 }); 1159 }); 1160</script>
1160 1161 1162 1163 </div> 1164 1165 <div class="footer"> 1166 <div class="container"> 1167 <p class="text-muted"> 1168 Made with <i class="fa fa-heart"></i> by <a href="https://benjamin.vanryseghem.com" target="_blank">Benjamin Van Ryseghem</a> 1169 </p> 1170 </div> 1171</div> 1172 1173 1174
1174<script> 1175 Object.values(numbro.allLanguages).forEach(function(data) { 1176 numbro.registerLanguage(data); 1177 }) 1178 </script>
1178 1179 </body> 1180</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.