JavaScript を使用してバイトをギガバイトに変換する
ギガバイトに何バイトあるのか疑問に思ったことはありませんか?ギガバイトは、一般的に使用される測定単位です。ギガバイトは、映画の日々の世界のファイルサイズ、ハードディスクの容量、さらにはラップトップや携帯電話のランダムアクセスメモリのサイズでさえ、ギガバイトで広く使用されています。これらの場合、これらに対処するために使用されるすべての単位はギガバイト単位です。バイトからギガバイトへの変換には、少し数学が必要です。これは、メートルをキロメートルに変換するのと似ています。JavaScript で変換を行う方法を見てみましょう。バイトからギガバイトへの変換には、次の 2つのアプローチがあります。
- ギガバイトを 10 進数のバイトに変換する
- ギガバイトをバイナリベースのバイトに変換する
10 進基数への変換
誰にでも発生する最も一般的な疑問は、キロバイト値が 1024 バイトか 1000 バイトかということです。Google で検索すると、さまざまな応答があります。しかし、根底にある概念は単純です。10 進数システムでは、1 キロバイトの値は 1000
バイトですが、2 進数システムでは、値は 1024
バイトです。したがって、変換パラメータはこのイデオロギーに基づいて変化します。
10 進ベースでの変換の理論的根拠
説明を始める前に、主要な変換単位を見てみましょう。10 進数ベースを扱っているので、次の変換理論的根拠を使用します。
- 1 キロバイト= 1000 バイト
- 1 メガバイト= 1000 キロバイト
- 1 ギガバイト= 1000 メガバイト
したがって、1 ギガバイト= 1000 * 1000 * 1000 バイト。つまり、1 ギガバイトは 10 の 9 乗(10 ^ 9)バイトに相当します。したがって、グーグルで 1 GB
を検索するだけで、1e+9
のような表現が得られます。1e+9
は 1
に等しく、9
はゼロです。それが換算計算の要点です。
変換コード
これで、変換の背後にある計算とさまざまなバイト単位が理解できました。javascript コードをすばやく調べて、入力として指定された数値(バイト数)を変換してみましょう。コードはそれに相当するギガバイトの値を返し、画面に表示します。
<h3><center>Byte to GB</center></h3>
<div>
<center>
<input type="text" id="bytes_input"><label>Bytes</label>
</center>
</div>
<div>
<center>
<button onclick="convertToGB()">Convert</button>
<button onclick="reset()">Reset</button>
</center>
</div>
<center>
<div>
<label>Result: </label> <label id="gbValue">0</label> GB
</div>
</center>
window.onload =
function() {
reset();
updateDisplay(0);
}
function convertToGB() {
let bytesValue = document.getElementById('bytes_input').value;
let gbValue = (bytesValue / (1000 * 1000 * 1000)).toFixed(2);
updateDisplay(gbValue);
}
function reset() {
document.getElementById('bytes_input').value = 0;
updateDisplay(0);
}
function updateDisplay(val) {
document.getElementById('gbValue').innerHTML = val;
}
手順は次のとおりです。
-
ユーザーからのバイト数をキャプチャする HTMLGUI を設計します。GUI には、
Convert
ボタンとReset
ボタンがあります。Convert
ボタンを、指定されたバイト値をギガバイトに変換するconvertToGB()
関数にバインドします。Reset
ボタンはreset()
関数にバインドされて値をリセットし、ユーザーが新しい値を試して変換できるようにします。 -
コードの実行は、
window.onload()
関数から始まります。window.onload()
関数は、ページの読み込み時に最初に実行される関数です。この関数では、入力ギガバイトと出力ギガバイトの値を 0 にリセットします。 -
ユーザーがバイト値を入力して
変換
ボタンをクリックすると、convertToGB()
関数がトリガーされます。 -
convertToGB()
関数では、javascript のdocument.getElementById("bytes_input").value
関数を使用して、ユーザーがバイトフィールドに入力した値をキャプチャし、bytesValue
変数。次のステップでは、bytesValue
を(1000 * 1000 * 1000)
で割って、そのバイト値をギガバイトに変換します。バイトの値を 1000 で除算すると、キロバイト値がさらに 1000 で除算するとメガバイト値が返され、メガバイト値を除算すると、バイトのギガバイト表現が得られることに注意してください。 -
これらの計算を行い、結果を
gbValue
変数に格納します。次の行では、document.getElementById("gbValue").innerHTML
を使用してlabel
値を設定することにより、gbValue
を GUI に表示します。したがって、変換された値は HTML に表示されます。
備考
- 本質的に、それに相当する具体的なギガバイトを取得するには、7 桁を超える値を持つバイトが必要になります。最小出力値は
0.01 GB
で、これは10000000 バイト
に変換されます。つまり、上記のコードを使用すると、10000000 バイト
より大きい値のバイトが出力に表示されます。それよりも小さい値の出力は0 GB
になります。 - 変数が javascript で保持できる桁数には制限があります。JavaScript には、数値変数が javascript で保持できる最大値
9007199254740991
を定義する定数Number.MAX_SAFE_INTEGER
があります。したがって、コードはそれ以上のバイト数をギガバイト表現に変換しません。変換中に精度が低下する場合があります。お勧めしません。 - 上記のコードによると、出力値は小数点以下第 2 位を四捨五入した値を示しています。JavaScript の
Number.toFixed()
関数を使用します。(bytesValue / (1000 * 1000 * 1000)).toFixed(2)
の行のように、出力は小数点以下 2 桁になります。より高い精度でギガバイト値を表示する場合は、要件に応じて.toFixed(3)
または.toFixed(4)
を使用してコードを微調整できます。
バイナリベースへの変換
バイト値をギガバイトに変換するためのより一般的に理解されている方法は、バイナリベースのものを使用することです。私たちのほとんどは、1024
の単位値を知っています。除算が 1000 である 10 進法とは異なり、上位バイト単位に変換するために、2 進数法では、1024
係数で除算します。
バイナリベースによる変換の基礎
変換のコードを見る前に、2 進数システムの変換単位の値を見てみましょう。ここでの理論的根拠は、1024
(つまり、2 の 10
の累乗または 210)を中心に展開します。
- 1 キロバイト= 1024 バイト
- 1 メガバイト= 1024 キロバイト
- 1 ギガバイト= 1024 メガバイト
したがって、バイナリベースシステムでは、1 ギガバイト= 1024 * 1024 * 1024 バイトです。バイト数の値をギガバイトに変換するには、それを 1024 * 1024 * 1024
で割る必要があります。
変換コード
次のコードは、バイナリシステムでバイト数をギガバイト表現に変換します。
<h3><center>Byte to GB</center></h3>
<div>
<center>
<input type="text" id="bytes_input"><label>Bytes</label>
</center>
</div>
<div>
<center>
<button onclick="convertToGB()">Convert</button>
<button onclick="reset()">Reset</button>
</center>
</div>
<center>
<div>
<label>Result: </label> <label id="gbValue">0</label> GB
</div>
</center>
window.onload =
function() {
reset();
updateDisplay(0);
}
function convertToGB() {
let bytesValue = document.getElementById('bytes_input').value;
let gbValue = (bytesValue / (1024 * 1024 * 1024)).toFixed(2);
updateDisplay(gbValue);
}
function reset() {
document.getElementById('bytes_input').value = 0;
updateDisplay(0);
}
function updateDisplay(val) {
document.getElementById('gbValue').innerHTML = val;
}
10 進基数システム変換を使用したコードと比較すると、ここでの唯一の違いは、(bytesValue / (1024 * 1024 * 1024)).toFixed(2)
の行から明らかな 1000
の代わりに 1024
係数を使用することです。
備考
- この方法では、入力できる最大数の範囲についても同じ制限が適用されます。
9007199254740991
より大きい数値は、変換の成功を保証するものではありません。 (bytesValue / (1024 * 1024 * 1024)).toFixed(2)
行のtoFixed()
関数のパラメーターを変更することで、精度を調整できます。通常、ほとんどの場合、小数点以下 2 桁または 3 桁が優先されます。- 結果は、10 進基数変換と 2 進基数変換の両方の変換で異なる場合があります。リンゴとオレンジを比較するようなものになるため、2つの方法の比較は無効です。結果は、それぞれの基数システムにあります。つまり、バイトをギガバイトに変換する 10 進数の基数システムでは、結果は 10 進数のシステムではギガバイト表現になり、2 進数の基数システムではその逆になります。