JavaScriptでNumberオブジェクトの使い方(プロパティ、メソッド一覧)

こんにちは!Webコーダー・プログラマーの貝原(@touhicomu)です。

今日は、JavaScriptで数値を扱うためのNumberオブジェクトについて解説したいと思います。

この記事では、

・そもそもオブジェクトとは?
・「Number」とは?
・基本的な使い方
・「Number」プロパティについて
・「Number」メソッドについて

という基本的な内容から、

・文字列⇔数値の相互変換について
・数値型の桁区切りと桁数について
・数値型の型について

などの応用的な使い方に関しても解説していきます。

この記事で、「Number」オブジェクトをしっかり学習して自分のスキルアップを目指しましょう!

そもそもオブジェクトとは?

JavaScript は、シンプルなオブジェクトベースの枠組みを持つ言語として設計されています。

オブジェクトは一言でいうとプロパティの集まりです。

プロパティ名前(もしくはキー)と値とのセットです。

プロパティの値を関数にすることもでき、これがオブジェクトのメソッドになります。

ブラウザではあらかじめオブジェクトがいくつか定義されています。

もちろん独自のオブジェクトを定義することもできます。

この記事で解説する「Number」オブジェクトもあらかじめ定義されたオブジェクト群の中のひとつで、様々なプロパティとメソッドを持っています。

「Number」とは?

それでは、まず最初に「Number」オブジェクトの基本的な知識から学んでいきましょう!

「Number」オブジェクトは、JavaScriptで扱う「数値」の整形や定数などを利用するために使うのが一般的です。

主に、「プロパティ」「メソッド」の2つに分かれているのは一般的なオブジェクトと同じです。

「Number」オブジェクトを活用すれば、値が数値であるかを検証したり文字列を数値に変換するなど多彩なことが実現できるのです!

本記事では、「Number」オブジェクトの基本から応用技まで詳しく解説していきますので、ぜひ参考にしてみてください!

基本的な使い方

ここからは、「Number」オブジェクトを使ったプログラミング手法について見ていきましょう!

最も基本的な「Number」オブジェクトの使い方としては、文字列や日付などさまざまな値を「数値」に変換するという用途があります。

記述方法は、【 Number( 値 ) 】のように数値に変換したい「値」を引数に指定します。

次のサンプル例を見てください!

実行結果

この例では、「①数値 / ②文字列 / ③日付 / ④16進数」という値をそれぞれ引数に指定しています。

①はそのまま数値なので、結果も数値になりますね。

②は文字列型の数値なのですが自動的に数値に変換されます。(ただし「hello」など普通の文字列は変換されません)

③は日付データですが、Numberオブジェクトが自動的に「経過ミリ秒」に換算した数値を返してくれます。

④は16進数という特殊な値ですが、一般的な数値型(10進数)に変換してくれます。

このように、Numberオブジェクトを利用するとさまざまな値を「数値」にしてから処理を行えるので便利ですね。

ちなみにですが、「Number」はオブジェクトということもあり「new」を使って数値を作ることもできますが注意が必要です。

実行結果

「new」を使って作成した数値を「num1」に代入し、普通の数値データ(リテラル)を「num2」に代入しています。

「typeof」で型を見てみると「object」になっているのが分かりますね。

つまり、「new」を使うと数値型ではなくオブジェクト型になるため「num1 / num2」はそれぞれ別の値ということになります。

「型」を気にしないで「num1 == num2」と比較すれば「true」になるのですが、基本的にこの方法はあまり使われません。

そのため、「new」を使ったNumberオブジェクトの使い方は理由がない限り利用しないほうが良いでしょう。

「Number」プロパティ一覧

次に、「Number」オブジェクトのプロパティについて見てみましょう!

プロパティには、JavaScriptの演算で扱える最大値 / 最小値や無限大といった特殊な値を簡単に求められるようになっているので便利です。

基本的なプロパティ一覧は次のとおりです。

プロパティ名 概要
MAX_VALUE 表現することができる最も大きな値
MIN_VALUE 表現することができる最も小さな値
MAX_SAFE_INTEGER 安全に扱うことができる最も大きな値
MIN_SAFE_INTEGER 安全に扱うことができる最も小さな値
NEGATIVE_INFINITY 負(マイナス値)の無限大
POSITIVE_INFINITY 正(プラス値)の無限大
NaN 数値ではないことを表す値

これらプロパティの使い方ですが、【 Number.プロパティ 】のように続けてプロパティ名を記述すればOKです!

実行結果

この例のように、例えば最大値を求めるプロパティ「MAX_VALUE」を使う場合は「Number.MAX_VALUE」のように記述します。

ちなみに、②のような安全に扱える「最小値 / 最大値」というのは、JavaScriptの演算処理が保証されているという意味でもあるので覚えておきましょう!

「Number」メソッド一覧

今度は、「Number」オブジェクトのメソッドについて見ていきましょう!

メソッドは、数値の文字列変換や数値かどうかの判断、四捨五入や桁数変換など数値を便利に扱えるように用意されています。

基本的なメソッドの一覧は次のとおりです!

メソッド名 概要
toString 数値を文字列に変換(n進数に変換も可能)
toFixed 四捨五入もしくは小数点の桁数を指定する
toPrecision 指定した桁数に変換する
isNaN NaNであるかどうかを判定
isFinite 有限な数値であるかどうかを判定
isSafeInteger 安全な数値であるかどうかを判定
parseFloat 文字列の数字を小数点に変換する
parseInt 文字列の数字を整数に変換する

メソッドの使い方ですが、【 値.メソッド 】のように対象となる値に対してメソッドを実行します。

次のサンプル例を見てください!

実行結果

この例では、数値「123」を変数numに代入しています。

このnumに対して、例えば文字列に変換したければ「num.toString()」と記述するわけです。

実行結果を見ると、見事に数値が文字列型(String)に変換されているのが分かりますね。

また、「toFixed(4)」を実行することで強制的に小数点第4位までの数値に変換することも出来ているのが分かります。

さらに、【 メソッド( 値 ) 】のように記述することで対象となる値を引数に取るメソッドもあります。

実行結果

この例では、「isNaN()」の引数に文字列の「hello」を指定しているので、数値と認識できずにNaNとなり結果はtrueを示していますね。

また、「parseInt()」の引数に小数点の「12.345」を指定していますが、整数に変換されて結果的に「12」が返っているのが分かります。

ちなみに、「isNaN()」などのメソッドを活用した数値チェックの活用事例については、次の記事で詳しく解説しているので参考にしてみてください!

【JavaScript入門】数値チェックの方法まとめ(isNaN/isFinite)
更新日 : 2019年4月5日

文字列⇔数値の相互変換について

「toString()」で文字列変換

数値型を文字列型に変換する最も簡単な方法として「toString()メソッド」があります。

これは、正負の数値や小数などを文字列に変換することが可能です。

次のサンプル例を見てください!

実行結果

この例では、任意の数値に対して「toString()」を実行することで文字列に変換しているのが分かります。

また、面白いのは引数に「基数」を指定することで、16進数・8進数・2進数に変換したあとで文字列にすることができる点です!

実行結果

この例では、「255」という数値を「10進数・16進数・8進数・2進数」に変換した文字列の例です。

例えば、16進数に変換した文字列を作成したければ「 (255).toString(16)」のように引数へ「16」を指定すれば実現できます。

以上のように、正負の数値や小数を文字列に変換でき、また、toString()の引数に基数を指定した文字列に変換できるわけです。

「parseInt()」で数値変換

文字列型を数値型へ変換する最も簡単な方法は「parseInt()」を利用することです!

記述方法としては、【 parseInt( 文字列, 基数 ) 】のように引数へ変換したい「文字列」「基数」を指定するようにします。

次のサンプル例を見てください!

実行結果

この例では、文字列の数字に対してparseInt()を実行しているのが分かりますね。

注意点としては、parseInt()で変換された数値は「整数」なので小数点は排除されるということを覚えておきましょう!

また、数字ではない文字列だった場合の挙動も見ておきましょう!

実行結果

1つ目は文字列「hello」が引数に指定されているので、数値として認識できなかったことを意味する「NaN」が返されています。

2つ目は先頭が数字で次に文字列「hello」がくっついている場合ですが、先頭の数字部分だけ認識されているのが分かります。

このことからも分かるように、parseInt()は先頭が数字で始まる文字列だけ数値に変換できるというメソッドになります。

さらに、第2引数の「基数」を変えることで10進数だけでなく、16進数・8進数なども扱えます!

実行結果

例えば、16進数の文字列「0xFFFF」をparseInt()する際に、基数を16に指定すれば結果は10進数の値に変換されるわけです。

つまり、指定された文字列が16進数であるということを明示的にJavaScriptに教えてあげているわけです。

以上のように、parseInt()を使うと正負の数値、小数、非数値、16進数、8進数などの文字列を数値に変換できるわけです。

また、parseInt()について更なる活用事例やエラー処理などの手法を次の記事で詳しくまとめているのでぜひ参考にしてみてください!

【JavaScript入門】文字列を数値に変換する方法|parseInt、 parseFloat
更新日 : 2019年5月2日

数値型の桁区切りと桁数について

数値型の桁区切り

数値型を桁区切りした文字列に変換するには、Number型のtoLocaleString()メソッドを使用します。

ただし、小数点以下は3桁までしか表示されず、小数点下4桁以降は下3桁に丸められます。

以上のように、toLocaleString()メソッドで桁区切りが行われますが、小数点以下は3桁までしか表示されていませんね。

数値型の桁数

数値型の桁数を数えるメソッドはありません。

そのため、自分で実装する必要があります。

例えば、以下のサンプルコードの getNumLength()を参考にされてください。

getNumLength()は負数の場合の「-」を桁数に加えないようにMath.abs()で数値の絶対値をとり、その後、文字列に変換しています。

その文字列の文字数が数値の桁数と一致するため、文字列の文字数をlengthメソッドで求め、返値にしています。

但し、 getNumLength()は、整数の桁数しか数えることができません。

例えば、小数点以下を考慮した桁数を数える場合は、仕様に応じて実装されてください。

以上のように、 getNumLength()は整数ならば正負に関わらず、桁数を取得できています。

数値型の型について

数値や無限大リテラル、最小値リテラル、非数値リテラル、Number型のコンストラクタの引数にnullを与えたときの数値などについて、それぞれの型をtypeof演算子で確認してみましょう。

以上のように、いずれの場合においても、typeof演算子の型判定結果は “number” になっています。

無限大リテラルや非数値リテラルなど数値では表せないリテラルなども型は数値型であることが確認できました。

まとめ

いかがでしたでしょうか。

数値型はtoLocaleString()メソッドを使用して桁区切りの文字列に変換できました。

ただ、数値型の桁数を求めるには、自分でロジックを実装しないといけませんでした。

また、数値型と文字列型はの相互変換でき、変換する際には基数を指定し、16進数や8進数、2進数などでの変換も可能でした。

数値型には無限大や無限小、最大値、最小値、非数値なども定義されており、それらはリテラルとして扱うことが可能でした。

また、それらリテラルの型も数値型でした。

数値型やそのリテラル、文字列型との相互変換なども、実務で多用しますので、ぜひ、ここで覚えておいてください。

JavaScriptの数値型について忘れてしまったら、またこのページをご覧になってください!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

貝原 輝昌

貝原 輝昌

こんにちは!貝原(@touhicomu)と申します。
現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。
現住所は、日本の西海岸、長崎県は波佐見町です。田舎ライフです。^^
地元の観光団体「笑楽井石」にボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。
以下の活動も行っています。
 ・笑楽井石のブログ
 ・エクセル関数を日本語化するソフト
 ・エクセルVBAを日本語で記述するソフト

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説