2b:null 2c:["$","title",null,{"children":"Huge floating integers | Shaun Lebron | Observable"}] 31:T98d,// If the given float has an integer value, use BigNumber.js to render out all the digits. function renderFullInt(x) { // NOTE: By default, JS will only print about 15-17 significant digits. // We can use `.toPrecision(n)` to get exactly n digits, but only n<=100. // So we use `isSafeInteger` to check if JS can't print a full integer (i.e. when exponent>52) if (Number.isInteger(x) && !Number.isSafeInteger(x)) { const floats = new Float64Array([x]); const bytes = new Uint8Array(floats.buffer); // sign │ exponent (11 bits) │ mantissa (52 bits) // ┌─┼─────────────────────┼───────── // │s│e e e e e e e e e e e│m m m m ... // ├─┴─────────────┬───────┴───────┬─ // │7 6 5 4 3 2 1 0│7 6 5 4 3 2 1 0│ ... // └───────────────┼───────────────┼─ // byte 7 │ byte 6 │ ... const sign = bytes[7] >> 7 ? -1 : 1; let exponent = ((bytes[7] & 0x7f) << 4 | bytes[6] >> 4) - 0x3ff; // Our goal is to extract the mantissa as an integer by moving the "floating point" (dot) // to just after the mantissa. The exponent tells us how far to move the dot from its // normalized position. // // normalized: 1.mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm * 2^e // integerized: 1mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm. * 2^(e-52) // We want the 52-bit mantissa as unsigned integer. // (setting the float's exponent to 52 and its sign to 0 causes the float to evaluate to this) // (exponent 52 has to be offset by +0x3ff, so 52+0x3ff = 0x433) bytes[7] = 0x43; // 0100 0011 bytes[6] = 0x30 | (bytes[6] & 0xf); // 0011 XXXX const uint = floats[0]; // float's value is now exactly equal to the mantissa integer // Our `exponent` is guaranteed to be >52 (because of our !isSafeInteger precondition above) // We already moved the floating point over 52 places when extracting our `integer`, so // we take the remainder exponent, which should still be positive. const expRemainder = exponent - 52; console.assert(exponent > 0); return BigNumber(2).pow(expRemainder).times(uint*sign).toString(10); } return String(x); }32:[] 2f:{"id":"cc83cde9ac4dcf05","slug":"huge-floating-integers","title":"Huge floating integers","thumbnail":"f7a23b7ae83f604f7fc1528bb826c55ff6f015c8b0aaafa93019573becdff878","access_level":"public","create_time":"$D2018-04-30T18:01:17.321Z","update_time":"$D2018-07-10T15:02:07.764Z","view_time":null,"first_public_time":"$D2018-05-03T00:13:35.594Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ed9847273198461c","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":"starter_2024"},"version":1215,"publish_version":1215,"role":null,"authored":false,"authors":[{"type":"individual","id":"22dcd5a87171b339","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":null}],"members":[{"type":"individual","id":"22dcd5a87171b339","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Huge floating integers","cells":[{"id":0,"value":"md`# Huge floating integers\n\n_[BigInt] literals are coming to JavaScript, finally allowing larger than 53-bit integers. But JavaScript still always allowed representing some huge integers (albeit sparesely), and it's interesting to revisit how and why._\n\n[BigInt]:https://github.com/tc39/proposal-bigint\n\n64-bit binary floats in JavaScript can represent all integers ${tex`n < 2^{53}`},\nbecause 52 of those bits hold actual digits (with an implied 1 at the head).\n\nThe rest of the bits in the float allow you to right-pad the number with quite a lot of invisible binary zeros. This allows us to perfectly fit some huge integers into this binary format, as long as they have lots of binary zeros at the end.\n\nPrinting these floating point integers in our usual base 10 format is an interesting affair because all those nice padded zeros in base 2 explode to noisy digits in base 10 (_since 10 is not a power of 2_), we can see this below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"md`## Native limit (100 digits)\n

\nThe highest base-10 integer that can be natively rendered by JavaScript is ${tex`\\sim 2^{332}`}, since it is at the 100 digit limit supported by [Number.toPrecision](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"(2**332).toPrecision(100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"md`Its base-2 number can be fully printed with [Number.toString(radix)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"(2**332).toString(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"md`\n## Full resolution (319 digits)\n

\nTo render all base-10 digits, we can just reach inside the float to extract the 52-bit integer part, ${tex`n`}, and the number of zeros to pad on the right, ${tex`m`}, then fully compute all the digits of ${tex`n*2^m`} ourselves.\n\nThis is _exactly_ how the future \\`BigInt(2**1023)\\` will extract all the base 10 digits out of a binary float without loss of precision ^{[[1](https://github.com/tc39/proposal-bigint/issues/132)][[2](https://github.com/tc39/proposal-bigint/pull/138)]}. Today, we can use something like [bignumber.js](http://mikemcl.github.io/bignumber.js/) to do likewise:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"renderFullInt(2**1023)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"md`## Biggest 64-bit integer\n

\nSo, even though 64-bit floats can hold 53-bit integers safely, they can still sparsely hold numbers larger than their 64-bit integer counterparts.\n\nThe max 64-bit **integer** is 64 ones:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"\"1\".repeat(64)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1162,"value":"md`The max 64-bit **float** is 53 ones, floating above 971 zeros:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"Number.MAX_VALUE.toString(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"md`## Oh, and fractions`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"md`The min 64-bit **float** is one, floating _below_ 1073 zeros:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"\".\" + \"0\".repeat(1073) + \"1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1195,"value":"md`\n

\nThe whole \"padded zeros\" thing is what an _exponent_ describes—which moves the [binary point](https://en.wikipedia.org/wiki/Radix_point) further to the right to grow the number, or to the _left_ to shrink it.\n\nI hope this was an easier way to learn how floating point numbers work!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"md`## References\n\n- [May 2018 BigInt Stage 3 status update](https://docs.google.com/presentation/d/1Bx13eCgM9Rujs4zNdfO95de_4wehhx8RxNx5aZl-3D4/edit#slide=id.g38adc008f3_0_256) - learned about large ints in floats\n- [Extracting exponent/mantissa in JS](https://stackoverflow.com/a/17156580/142317) - learned how to extract float bytes\n- [IEEE-754 visualized](http://bartaz.github.io/ieee754-visualization/) - facilitated exploration\n- \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"BigNumber = require('bignumber.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"// allow big numbers to be broken up into multiple lines\nstyles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"