新游乐场：integer.exposed – 搞英语 → 看世界

你好！在过去的几个月里，我们一直在制作一本关于整数和浮点数如何工作的杂志。每当我制作一个 zine 时，我都喜欢发布一个 playground 来配合它，比如 DNS zine 或sql playground的mess with dns 。

对于这个，我制作了一个名为integer.exposed 的简单游乐场，灵感来自 Bartosz Ciechanowski 的float.exposed 。

它比 Mess With DNS 要简单得多，所以我会尽量简短地写这篇博文。

上个月我做了几次关于整数和浮点数如何工作的演讲，在关于浮点数的演讲中，我发现自己经常引用这个名为Float Exposed的网站来演示各种事情。（旁白：如果您还没有看过 Ciechanowski 令人难以置信的关于自行车、机械表、镜头、内燃机等的交互式解释器，您应该检查一下！）

这是它的样子：

浮动暴露.png

我用它做的事情：

还有更多！这是一种令人难以置信的方式，可以让您亲身体验漂浮物并提高您对漂浮物工作原理的直觉。

整数不像浮点数那么复杂，但是它们有一些不明显的东西：你有带符号的整数和无符号的整数，你有字节顺序，还有一些奇怪的操作，比如右移/左移。所以当我谈论整数时，我发现自己想要一个类似于float.exposed 的网站来演示东西。

因此，在获得许可的情况下，我将一个放在一起integer.exposed 。这是一个截图：

暴露.png

用户界面略有不同：整数不像浮点数那样有很多不同的部分，因此只有一行按钮可用于对整数执行各种操作。

关于字节顺序的注意事项：与 float.exposed 一样，它使用 big endian 字节顺序，因为我认为它阅读起来更直观。但是你必须记住，在大多数计算机上，字节实际上是相反的顺序。

以下是一些我认为很有趣的尝试：

有符号整数：看看-1是如何表示的。递增和递减几次，看看有符号和无符号值如何变化。对-128做同样的事情。另请查看 -1 如何表示为 16/32/64 位整数。
有符号/无符号右移：与-1类似：尝试有符号右移（也称为“算术右移”）并查看结果与无符号右移（又称为“逻辑右移”）有何不同。
二进制计数：从0开始递增多次，然后观察二进制值的计数。
not ：取任何数字（如123 ）而不是它。看看NOT否定几乎完全相同，但又不完全相同。
交换字节顺序。拿一个像12345678这样的数字，看看如果你交换字节顺序，结果是一个无法识别的不同数字。
看看2 的幂是如何表示的

像往常一样，它使用 Vue.js。如果你想看看它是如何工作的，你可以查看源代码——它只有两个文件， index.html和script.js 。

我从float.exposed中获取了一堆 CSS。

如果您发现任何错误，请告诉我！我可能会添加更多功能，但我希望保持简单。

我还建立了另一个更复杂的游乐场，我希望尽快发布并写下来。