JavaScriptで数値の桁数をチェックする方法を現役エンジニアが解説【初心者向け】

本記事では、JavaScriptで数値の桁数をチェックする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

lengthメソッドを使ってもうまくいかない、やり方が分からないという方は、本記事でぜひマスターしてみてくださいね。

目次

• 数値にlengthが使えない理由
• 数値の桁数をチェックする方法
• 小数点以下の桁数をチェックする方法
•  まとめ
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

 

数値にlengthが使えない理由

JavaScriptで文字列の文字数を取得するには、lengthプロパティを使います。

しかし、lengthプロパティは、数値の桁数を取得できません。

 

プログラミングには、情報の形、データ型という概念があります。

var integer  = 123; /数値*/ 
var context  = 'hello world'; /*文字列*/
var array    = [123 , 456]; /*配列*/

 

lengthのようなプロパティは、それぞれのデータ型にひもづいた専用の処理です。

lengthプロパティを提供しているのは、文字列型と配列型だけなんです。

数値型のデータは、lengthメソッドを提供していません。

 

数値の桁数をチェックする方法

ここでは、数値の桁数を取得する方法についてみていきましょう。

See the Pen
Num digits by TAKAYOSHI (@lspuwbkv)
on CodePen.

 

ポイントはこちらです。

/*桁数を返す関数*/
function numDigits(num){
    /*一旦数値を文字列に変換し、長さを求める*/
    return num.toString().length;
}

 

toString()メソッドを使って、数値をいったん文字列に変換します。

その文字列に対して、lengthプロパティを使い、長さを求めています。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

小数点以下の桁数をチェックする方法

小数点以下の桁数を取得するための方法をみていきましょう。

See the Pen
Numdigits under 1 by TAKAYOSHI (@lspuwbkv)
on CodePen.

 

ポイントはこちらです。

/*小数点以下の桁数を返す関数*/
function numDigitsUnder1(num){
  /*一旦数値を文字列に変換し、小数点で分割、2つめの長さを求める*/
   return num.toString().split('.')[1].length;
}

数値をtoString()メソッドで文字列に変換し、splitメソッドで小数点を区切りに2つに分割します。

1以上の数と文字列と、1以下の数の文字列に分割され、配列になります。

例

数値             123.789
↓ toString()     
文字列          "123.789" 
↓ split('.')
文字列の配列    ["123","789"]
↓ [1]
1以下数 文字列   "789"
↓ length
小数点以下の桁数   3 桁

 

配列は0から数えるので、0番目には1以上の数、1番目には1以下の数が入ります。

1番目に格納された文字列に対して、lengthプロパティを用いて桁数を取得します。

 

 まとめ

JavaScriptで数値の桁数をチェックする方法について現役エンジニアが解説しました。

文字列に変換した場合、lengthプロパティが使用可能なことを知っておきましょう。

 

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！