数値（Number）の表現方法について教えてください。

Question

前提・実現したいこと

JavaScriptの学習の一環として電卓を作成していたのですが、ある桁を超えると数字の表示が
おかしくなる現象が発生しました。

そこで調べてみたところ、整数で表現できる最大値が原因だと思われるのですが、最大値の表現に
ついてわからない点があり、質問させていただきました。

該当のソースコード

<div id='box1'></div>
<div id='box2'></div>

const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');
    
box1.textContent = Number.MAX_VALUE;
//1.7976931348623157e+308と表示される

box2.textContent = 111111111111111111;
//111111111111111100と表示される

質問

box2の値はbox１の値（MDNには「表現可能な正の数の最大値」と書かれていました。）よりも
小さい数値にも関わらず、なぜ正しく表示されないのでしょうか。

また、MDNには、Numberの整数範囲として、以下の記載もありますが、こちらは上記のNumber.MAX_VALUE
とは別物なのでしょうか。

var biggestInt = 9007199254740991;
var smallestInt = -9007199254740991;

初歩的な質問で恐縮ですが、よろしくお願いします。

Answer 1

box2の値はbox１の値（MDNには「表現可能な正の数の最大値」と書かれていました。）よりも

小さい数値にも関わらず、なぜ正しく表示されないのでしょうか。

JavaScriptのnumberは浮動小数点数なので、大きな数になると設定できる単位が大きくなっていきます。1単位まで設定可能な限界が±9007199254740991まで（実際には±9007199254740992も問題ないですが、その次の数が表現不能です）です。

Comments

[T.Takeda]

ご回答ありがとうござます。

浮動小数点数の特性により、box2に表示される値が111111111111111100となっているという事ですね。
浮動小数点数について調べてみたいと思います！

Answer 2

正しく表示されていると思いますが、もしかしたら Number.MAX_SAFE_INTEGER が欲しいのではないでしょうか？
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE

Comments

[T.Takeda]

ご回答いただきありがとうございます。
質問が下手で申し訳ありません。
質問の意図は、box2.textContent = 111111111111111111;としているのにも関わらず、なぜbox2には111111111111111100と表示されるのかという事に疑問を感じていました。
ただ、ご教示頂いた内容も勉強させていただきます！