【JavaScript】HTMLの要素を取得する方法（getElement,querySelector,querySelectorAll）
takahide
初心者がITを楽しむブログ
【JavaScript】数値の桁数を指定しよう（toPrecision/toFixed）
takahide
おはようございます。タカヒデです。
「43.3573975637…」
こんな数字があった際にそのまま記載してもよく分からないですよね。
具体的には「43.3573975637…」→「43.36」こんな処理を行うはずです。
今回紹介するのはそんな時に活用するメソッドです。
というわけで本日は、「JavaScriptにおける、『数値の桁数の指定』について、『toPrecisionメソッド』『toFixedメソッド』」を紹介します。
こんな人にオススメ
- JavaScriptにおける『数値の桁数の指定』をしたい
- 『toPrecisionメソッド』『toFixedメソッド』の記載方法を知りたい
ぜひ本記事を参考にしてください。
整数・小数含めた桁数を指定（toPrecisionメソッド）
まずは「整数・小数含めた桁数」を指定する方法です。
整数・小数含めた桁数を指定する場合、『toPrecisionメソッド』を使用します。
ちなみに行っているのは「切り捨て」ではなく「四捨五入」です。
この後紹介する「toFixedメソッド」も同じく「四捨五入」なので覚えておいてください。
では早速記載方法から見ていきます。
//記載方法
toPrecision (指定する桁数)そして以下が記載例です。
let test = 12.3456;
console.log(test.toPrecision(3));
//実行結果：12.3
console.log(test.toPrecision(8));
//実行結果：12.345600指定した桁数が表示されていることが分かります。
ちなみに、指定した桁数に対し、不足している場合には『0』を追加することで桁数を合わせます。
では、4桁の整数なのに引数に「3」を指定したらどうなるのでしょうか？
let test = 1234.56;
console.log(test.toPrecision(3));
//実行結果：1.23e+3このような「e」が含まれた指数表示になります。
WEBサイトを見ていてこんな指数表示が出てきたら見ている人は混乱してしまうので注意しましょう。
小数以下の桁数を指定（toFixedメソッド）
続けて「小数以下の桁数を指定する場合」を見ていきましょう。
こちらは、『toFixedメソッド』を使用します。
基本的には記載方法は『toPrecisionメソッド』と同様です。
//記載方法
toFixed (指定する桁数)こちらも記載例を見てみます。
let test = 12.3456;
console.log(test.toFixed(3));
//実行結果：12.346
console.log(test.toFixed(8));
//実行結果：12.34560000『toFixedメソッド』についても指定した桁数に対し、不足している場合には『0』を追加することで桁数を合わせていることが分かりますね。
「toPrecision」と「toFixed」を比較してみる
最後に「toPrecision」と「toFixed」を比較して見てみましょう。
let test = 12.3456;
console.log(test.toPrecision(3));
//実行結果：12.3
console.log(test.toFixed(3));
//実行結果：12.346同じ引数が「3」でも、「12.3」「12.346」で実行結果が異なることが分かりますね。
ちなみに、実務においては「toFixedメソッド」を活用し金額表示を指定することが多いようです。
「toPrecision」については先ほどお伝えした「指数表示」にならないように注意してつかいましょう。
まとめ
以上が「『数値の桁数の指定』について、『toPrecisionメソッド』『toFixedメソッド』」の紹介でした。
まとめ
- toPrecisionメソッド：整数・小数含めた桁数を指定
- toFixedメソッド：小数以下の桁数を指定
- 実務においては「toFixedメソッド」を活用し金額表示を指定することが多い
この記事が誰かの参考になれば幸いです。
お疲れさまでした。
ABOUT ME
通信会社の企画職で働く30代
非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中
IT初心者が楽しいと思えるように発信することを目指しています
↓Xもやっているのでフォローしてね
