JSFiddle - React, Tailwind, and code Playground
HTML
<table id="bastard">
<caption>Comparison table for integer cast operations</caption>
</table>
<br></br>
<table id="ffoxbastard">
<caption>Results on Firefox 31</caption>
<tbody>
<tr>
<td>n</td>
<td>Math.ceil(n)</td>
<td>Math.floor(n)</td>
<td>Math.trunc(n)</td>
<td>Math.imul(n, 1)</td>
<td><<0</td>
<td>>>0</td>
<td>^0</td>
<td>& -1</td>
<td>~~(n)</td>
<td>|0</td>
</tr>
<tr>
<td>Math.PI</td>
<td>4</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>-Math.PI</td>
<td>-3</td>
<td>-4</td>
<td>-3</td>
<td>-3</td>
<td>-3</td>
<td>-3</td>
<td>-3</td>
<td>-3</td>
<td>-3</td>
<td>-3</td>
</tr>
<tr>
<td>Math.E</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>-Math.E</td>
<td>-2</td>
<td>-3</td>
<td>-2</td>
<td>-2</td>
<td>-2</td>
<td>-2</td>
<td>-2</td>
<td>-2</td>
<td>-2</td>
<td>-2</td>
</tr>
<tr>
<td>Number.EPSILON</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
...
CSS
body {
background-color: #202020;
font-family: DejaVu Sans Mono, Lucida Console, monospace;
font-size: 16px;
}
#bastard, #ffoxbastard, #chromebastard, #operabastard {
color: lime;
display: block;
text-align: center;
vertical-align: middle;
border-collapse: collapse;
white-space:nowrap;
}
#bastard caption, #ffoxbastard caption, #chromebastard caption, #operabastard caption {
text-align: center;
}
#bastard td, #ffoxbastard td, #chromebastard td, #operabastard td {
font-size: 12px;
padding: 4px;
border: 1px solid purple;
background-color: #303030;
}
td:first-child {
border-right: 2px solid purple !important;
border-left: 2px solid purple !important;
background-color: #333333;
}
tr:first-child {
border-bottom: 2px solid purple !important;
border-top: 2px solid purple !important;
background-color: #333333;
}
#bastard:last-child-of-type, #ffoxbastard:last-child-of-type, #chromebastard:last-child-of-type, #operabastard:last-child-of-type {
border-bottom: 2px solid purple !important;
}
JavaScript
/*
* Test to compare the behaviors of various approaches
* to truncating decimal digits
*/
/*
* To add functions to test against, add a string to the 'methody' array
* Don't forget to put '(n)' for where the number should go
*
* To add numbers to check for, add a string to the `enny` array
*
* All of these go to eval() so pretty much anything should work
*
* If you need quotes in there, don't forget to escape them or use the alternate
* version
*
*/
// "Math.floor((!Number.isInteger(n) && (n) !== null) ? (n)+1 : (n))"
// is intended to emulate Math.ceil as closely as possible
// "((n) >= 0) ? Math.floor(n) : Math.floor((!Number.isInteger(n) && (n) !== null) ? (n)+1 : (n))"
// is intended to emulate Math.trunc as closely as possible
var methody = ["Math.ceil(n)",
//"Math.floor(n + 1)",
"Math.floor(n)",
//"Math.floor((!Number.isInteger(n) && (n) !== null) ? (n)+1 : (n))",
//"((n) >= 0) ? Math.floor(n) : Math.floor((!Number.isInteger(n) && (n) !== null) ? (n)+1 : (n))",
"Math.trunc(n)", "Math.imul(n, 1)", "<<0", ">>0", "^0", "& -1", "~~(n)", "|0"];
// polyfill for Math.trunc
if (!Math.trunc){
Math.trunc = function(x) {
return x < 0 ? Math.ceil(x) : Math.floor(x);
}
}
var enny = ["Math.PI", "Math.E", "Number.EPSILON", "42", "0", "1", "Number.NaN", "Number.POSITIVE_INFINITY", "undefined", "null"];
var enns = [];
var methods = [];
// we need to expand the numbers array for negatives
enny.map(function (elem) {
enns.push("" + elem);
enns.push("-" + elem);
});
// this doesn't do anything unless you uncomment the
// middle section, which then adds tests for Number(n) and void(n)
// they're not really interesting so I left them out by default
methody.map(function (elem) {
methods.push("" + elem);
/* //uncomment this for "Number(n)" and "void(n" tests
if(elem.contains("(n")){
methods.push(elem.replace("(n",...