numeral
Version:
Format and manipulate numbers.
282 lines (266 loc) • 9.75 kB
HTML
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.content {
width: 550px;
margin: 20px auto;
}
.table {
width: 100%;
}
.table th, .table td {
text-align: center;
}
</style>
<script src="../min/numeral-min.js"></script>
</head>
<body>
<div class="content">
<h2>Numeral.js</h2>
<p class="lead">A javascript library for formatting and manipulating numbers.</p>
<h3>Use it</h3>
<h4>In the Browser</h4>
<pre>
<script src="numeral-min.js"></script>
</pre>
<h4>In Node.js</h4>
<pre>
npm install numeral
</pre>
<pre>
var numeral = require('numeral');
</pre>
<h3>Format</h3>
<p>
Numbers can be formatted to look like money, percentages, times, or even plain old numbers with decimal places, comma delineated thousands, and abbreviations.
</p>
<pre>
var string = numeral(1000).format('0,0');
// 1,000
</pre>
<h4>Numbers</h4>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Number</th>
<th>Format</th>
<th>String</th>
</tr>
</thead>
<script type="text/javascript">
var nums = [
10000,
10000,
-10000,
10000.1234,
-10000,
-.23,
-.23,
.23,
1230974,
1460,
-104000,
1,
52,
23,
100
],
formats = [
'0,0.0000',
'0,0',
'0,0.0',
'0.000',
'(0,0.0000)',
'.00',
'(.00)',
'0.00000',
'0.0a',
'0a',
'0a',
'0o',
'0o',
'0o',
'0o'
];
for (var i = 0; i < nums.length; i++) {
document.write('<tr><td>' + nums[i] + '</td><td>\'' + formats[i] + '\'</td><td>' + numeral(nums[i]).format(formats[i]) + '</td></tr>')
}
</script>
</table>
<h4>Money</h4>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Number</th>
<th>Format</th>
<th>String</th>
</tr>
</thead>
<script type="text/javascript">
nums = [
1000.234,
-1000.234,
-1000.234,
1230974
],
formats = [
'$0,0.00',
'($0,0)',
'$0,0.00',
'($0.00a)'
];
for (i = 0; i < nums.length; i++) {
document.write('<tr><td>' + nums[i] + '</td><td>\'' + formats[i] + '\'</td><td>' + numeral(nums[i]).format(formats[i]) + '</td></tr>')
}
</script>
</table>
<h4>Percentages</h4>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Number</th>
<th>Format</th>
<th>String</th>
</tr>
</thead>
<script type="text/javascript">
var nums = [
1,
.974878234,
-.43,
.43
],
formats = [
'0%',
'0.000%',
'0%',
'(0.000%)'
];
for (var i = 0; i < nums.length; i++) {
document.write('<tr><td>' + nums[i] + '</td><td>\'' + formats[i] + '\'</td><td>' + numeral(nums[i]).format(formats[i]) + '</td></tr>')
}
</script>
</table>
<h4>Time</h4>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Number</th>
<th>Format</th>
<th>String</th>
</tr>
</thead>
<script type="text/javascript">
var nums = [
25,
238,
63846
],
formats = [
'00:00:00',
'00:00:00',
'00:00:00'
];
for (var i = 0; i < nums.length; i++) {
document.write('<tr><td>' + nums[i] + '</td><td>\'' + formats[i] + '\'</td><td>' + numeral(nums[i]).format(formats[i]) + '</td></tr>')
}
</script>
</table>
<h3>Unformat</h3>
<p>
Got a formatted string? Use the unformat function to make it useful again.
</p>
<pre>
var string = numeral().unformat('($10,000.00)');
// -10000
</pre>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>String</th>
<th>Function</th>
<th>Number</th>
</tr>
</thead>
<script type="text/javascript">
document.write('<tr><td>10,000.123</td><td>.unformat(\'10,000.123\')</td><td>' + numeral().unformat('10,000.123') + '</td></tr>');
document.write('<tr><td>(0.12345)</td><td>.unformat(\'(0.12345)\')</td><td>' + numeral().unformat('(0.12345)') + '</td></tr>');
document.write('<tr><td>($1.23m)</td><td>.unformat(\'($1.23m)\')</td><td>' + numeral().unformat('($1.23m)') + '</td></tr>');
document.write('<tr><td>23rd</td><td>.unformat(\'23rd\')</td><td>' + numeral().unformat('23rd') + '</td></tr>');
document.write('<tr><td>$10,000.00</td><td>.unformat(\'$10,000.00\')</td><td>' + numeral().unformat('$10,000.00') + '</td></tr>');
document.write('<tr><td>-76%</td><td>.unformat(\'-76%\')</td><td>' + numeral().unformat('-76%') + '</td></tr>');
document.write('<tr><td>2:23:57</td><td>.unformat(\'2:23:57\')</td><td>' + numeral().unformat('2:23:57') + '</td></tr>');
</script>
</table>
<h3>Manipulate</h3>
<p>
Not that you will uses these often, but they're there when you need them.
</p>
<pre>
var number = numeral(1000);
var added = number.add(10);
// 1010
</pre>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Before</th>
<th>Function</th>
<th>After</th>
</tr>
</thead>
<script type="text/javascript">
var num = numeral(1000);
document.write('<tr><td>' + num.format('0,0') + '</td><td>.add(100)</td><td>' + num.add(100).format('0,0') + '</td></tr>');
document.write('<tr><td>' + num.format('0,0') + '</td><td>.subtract(100)</td><td>' + num.subtract(100).format('0,0') + '</td></tr>');
document.write('<tr><td>' + num.format('0,0') + '</td><td>.multiply(100)</td><td>' + num.multiply(100).format('0,0') + '</td></tr>');
document.write('<tr><td>' + num.format('0,0') + '</td><td>.divide(100)</td><td>' + num.divide(100).format('0,0') + '</td></tr>');
</script>
</table>
<h3>Value</h3>
<p>
The value is always available.
</p>
<pre>
var number = numeral(1000);
var string = number.format('0,0');
// 1,000
var value = number.value();
// 1000
</pre>
<h3>Set</h3>
<p>
Set the value of your numeral object.
</p>
<pre>
var number = numeral();
number.set(1000);
var value = number.value();
// 1000
</pre>
<h3>Clone</h3>
<p>
Go ahead and clone any numeral object while you're at it.
</p>
<pre>
var a = numeral(1000);
var b = numeral(a);
var c = a.clone();
var aVal = a.set(2000).value();
// 2000
var bVal = b.value();
// 1000
var cVal = c.add(10).value();
// 1010
</pre>
<h3>Acknowlegements</h3>
<p>
Numeral.js, while less complex, was inspired by and heavily borrowed from <a href="http://momentjs.com/">Moment.js</a>
</p>
</div>
</body>
</html>