JavaScriptで小数点以下の部分を取得する3つの方法

タイトルの通り

計算処理してるときに、整数を除いて小数点部分だけを取り出したいこと がありました。

▼ 例えばこういうこと

  • 例1 : 7.142857  =>  0.142857
  • 例2 : 11.09  =>  0.09
  • 例3 : -13.076923  =>  -0.076923

考えてみると色々やり方があったので
ここでは JavaScriptで小数点以下の部分を取り出す方法 をメモしておきます。

1.floor と ceil で小数部分を取り出すやり方

まずは次の2つのメソッドを使うやり方

  • Math.floor
    引数として与えた数以下の最大の整数を返してくれるメソッド
  • Math.ceil
    引数として与えた数以上の最小の整数を返してくれるメソッド

この2つをうまく使うと、正負かかわらず小数部分を正しく得られます。(しかも数値として)

 

実際に作ってみたのが次みたいな関数

▼ このコード

正数だったら元の数から Math.floor  したのを引き、逆に負数だったら Math.ceil  したものを引くことで小数部分を求めるという処理。また そのまま数を渡してしまうと桁数以上の数が返ってくるので decDigits  で元の小数点以下の桁数も指定できるようにしてます。

▼ 実際にいくつか試してみると・・・

うん、ちゃんと取り出せてる。

有効桁数が決まってて多くの数値を扱う場面なら、こちらの方法がスマートかもしれません。

2.split で小数点以下を文字列として取得する方法

お次は split メソッドを使って小数点以下を切り出す方法

例えば数値 n  の小数点以下を "文字列" で取得したいなら次のコード

小数点なら必ず ドット( .  ) が含まれるので、その文字で整数部と小数部分を配列に分けてるだけ。

こちらは文字列として扱ってるので、桁数が丸められるとかの心配する必要なしです。

 

▼ 以下この方法を使ったコード例

コメントの出力結果にも書いた通り、ドット以下の部分だけ抜き出してくれてます。

ただし、この方法は次の点が少し不便ですね。

  • 直接数値として扱えない
    たとえば 37.027  なら "027"  と返ってくるので数値に変換するには parseFloat  などを挟む必要あり。
  • 正負の情報が失われてしまう
    ドット以降を 文字列 として切り出してるので、正負の情報も失われる。

こういう欠点が気にならないなら、この方法は使いやすいかも。

ただし 値ではなく文字列として取得する部分には要注意

3.indexOf と substring を組み合わせた方法

最後は indexOf と substring を組み合わせたやり方

各メソッドは次みたいな役割があります。

  • String.indexOf
    文字列から特定の値が含まれる最初のインデックスを返す。ここでは数値のドット( .  )の位置を調べるために使うことにする
  • String.substring
    開始・終了インデックスを指定し、文字列を切り出すためのメソッド。ここではドットの位置から小数部分を切り出すために利用する

この2つを上手く使っても、小数部分の切り出しが可能です。

 

たとえば次みたいな切り出し用の関数を作ってみました。

▼ このようなコード

▼ この関数で小数点以下を 数値 で取り出してみた

こちらは正負の情報も残ってるし、なにより数値として取得できるから汎用性高いかもしれないです。

ここまでのまとめ

ここまでで紹介したやり方は次の通り

もし間違いなどあれば、コメント欄でご指摘ください。ではまた バイバイ

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

4件のコメント
  • nag

    console.log(decimalPart(0.0000001)); // 0

    になりました。

    10月 31, 2020 7:44 am
    • ぴー助

      その理由は次コードを実行すれば分かります。

      この出力は “1e-7” になるですよね。つまり指数表現になるということです。そのため正規表現がうまく機能しないものと思われます。もし厳密に対応させるなら、指数表現でも機能するようなコード修正が必要になるようです。

      10月 31, 2020 10:23 am
    • ぴー助

      ちなみに指数表現(1e-7)ですが、標準では小数表記(0.0000001)に直す関数もないようです。ただ次記事みたいに変換する方法はあります。

      https://bl.ocks.org/sounisi5011/a5039aedd1c378971d966fa55a61f473

      一応やり方はあるのですが、小数点部分を取得するためだけに新しく関数を追加するのもアレかな・・・といった感じですね。

      10月 31, 2020 10:29 am
  • Ferry

    助かりました
    ありがとうございます。

    4月 30, 2021 10:49 pm

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください