Vanilla JS计算器输入到第17位时数字显示异常是什么原因？

跟随Web Dev Simplified频道的基础计算器教程完成项目开发后，实现版本和教程示例存在完全一致的异常：

• 连续按下任意数字按键17次及以上时，第16位之后输入的数字会显示为错误数值，比如连续按数字'1'，第17位输入的'1'会显示为'2'
• 该问题对所有数字按键生效，无例外
  计算器显示区域对应的HTML代码如下：

<div class="output">
  <div data-previous-operand class="previous-operand"></div>
  <div data-current-operand class="current-operand"></div>
</div>

这个bug是JavaScript原生数值类型的固有精度限制导致的：
JS里的Number类型是遵循IEEE 754标准的64位双精度浮点数，最多只能安全精确表示15~17位长度的十进制整数。数字长度超过这个范围后就会出现精度丢失，JS引擎会自动把数值修正为离它最近的、可被64位浮点数精确表示的值。
该计算器的逻辑中，是把用户输入的数字字符串直接转成Number类型存储的，当输入长度到17位时就触发了精度修正，自然会显示错误数字。比如连续输入17个1得到的字符串"11111111111111111"转成Number后，实际存储值是11111111111111112，渲染出来第17位就变成了2。

• 输入阶段全程用字符串拼接的方式存储当前输入的数字，不要在输入过程中提前把值转为Number类型，仅当用户触发运算操作时再做数值转换
• 增加输入长度限制：当当前输入的数字长度达到16位时，直接拦截后续的数字输入请求，从源头避免数值超出精度安全范围
• 如果需要支持超长数字的精确计算，不要直接使用原生Number类型做运算，可以接入专门的大数计算处理逻辑或相关工具库

内容的提问来源于stack exchange，提问作者Ryu Hiroyama