PageSourceSearch

https://numbrojs.com/format.html

html numbrojs.com collected 2026-10-03 22:19:33 UTC 42,480 bytes, 1,180 lines download raw bytes

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.