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

タイトルの通り

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

▼ 例えばこういうこと

例１： 7.142857 　＝＞　 0.142857
例２： 11.09 　＝＞　 0.09
例３： -13.076923 　＝＞　 -0.076923

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

このページの目次

１．floor と ceil で小数部分を取り出すやり方
２．split で小数点以下を文字列として取得する方法
３．indexOf と substring を組み合わせた方法
ここまでのまとめ

１．floor と ceil で小数部分を取り出すやり方

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

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

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

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

▼ このコード

function decimalPart(num, decDigits){
  var decPart = num - ((num >= 0) ? Math.floor(num) : Math.ceil(num));
  return decPart.toFixed(decDigits);
}

function decimalPart(num, decDigits){

var decPart = num - ((num >= 0) ? Math.floor(num) : Math.ceil(num));

return decPart.toFixed(decDigits);

}

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

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

var num = 7.142857;
console.log(decimalPart(num, 6));
  /// => 0.142857

var num = 37.027;
console.log(decimalPart(num, 3));
  /// => 0.027

var num = -41.02439;
console.log(decimalPart(num, 5));
  /// => -0.02439

var num = 7.142857;

console.log(decimalPart(num, 6));

/// => 0.142857

var num = 37.027;

console.log(decimalPart(num, 3));

/// => 0.027

var num = -41.02439;

console.log(decimalPart(num, 5));

/// => -0.02439

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

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

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

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

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

var decPart = String(n).split(".")[1];

1	var decPart = String(n).split(".")[1];

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

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

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

var num = 7.142857;
console.log(String(num).split(".")[1]);
  /// => 142857

var num = 37.027;
console.log(String(num).split(".")[1]);
  /// => 027

var num = -41.02439;
console.log(String(num).split(".")[1]);
  /// => 02439

var num = 7.142857;

console.log(String(num).split(".")[1]);

/// => 142857

var num = 37.027;

console.log(String(num).split(".")[1]);

/// => 027

var num = -41.02439;

console.log(String(num).split(".")[1]);

/// => 02439

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

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

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

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

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

３．indexOf と substring を組み合わせた方法

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

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

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

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

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

▼ このようなコード

function decimalPart(num){
  numStr = num+'';
  dotIdx  = numStr.indexOf("."),
  result  = "0." + (dotIdx > -1 ? numStr.substring(dotIdx + 1) : "0");
  return  parseFloat( ((num>0)?'+':'-') + result );
}

function decimalPart(num){

numStr = num+'';

dotIdx = numStr.indexOf("."),

result = "0." + (dotIdx > -1 ? numStr.substring(dotIdx + 1) : "0");

return parseFloat( ((num>0)?'+':'-') + result );

}

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

var num = 7.142857;
console.log(decimalPart(num));
  /// => 0.142857

var num = 37.027;
console.log(decimalPart(num));
  /// => 0.027

var num = -41.02439;
console.log(decimalPart(num));
  /// => -0.02439

var num = 7.142857;

console.log(decimalPart(num));

/// => 0.142857

var num = 37.027;

console.log(decimalPart(num));

/// => 0.027

var num = -41.02439;

console.log(decimalPart(num));

/// => -0.02439

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

ここまでのまとめ

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

floor と ceil で小数部分を取り出すやり方
split で小数点以下を文字列として取得する方法
indexOf と substring を組み合わせた方法

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

nag

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

になりました。

10月 31, 2020 7:44 am

ぴー助

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

var num = 0.0000001;var numStr = num+'';

1

var num = 0.0000001;var numStr = num+'';

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

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

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

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

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

10月 31, 2020 10:29 am