こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。
今日は、JavaScriptで数値を扱うためのNumberオブジェクトについて解説したいと思います。
この記事では、
・そもそもオブジェクトとは？
・「Number」とは？
・基本的な使い方
・「Number」プロパティについて
・「Number」メソッドについて
という基本的な内容から、
・文字列⇔数値の相互変換について
・数値型の桁区切りと桁数について
・数値型の型について
などの応用的な使い方に関しても解説していきます。
この記事で、「Number」オブジェクトをしっかり学習して自分のスキルアップを目指しましょう！
そもそもオブジェクトとは？
JavaScript は、シンプルなオブジェクトベースの枠組みを持つ言語として設計されています。
オブジェクトは一言でいうとプロパティの集まりです。
プロパティは名前(もしくはキー)と値とのセットです。
プロパティの値を関数にすることもでき、これがオブジェクトのメソッドになります。
ブラウザではあらかじめオブジェクトがいくつか定義されています。
もちろん独自のオブジェクトを定義することもできます。
この記事で解説する「Number」オブジェクトもあらかじめ定義されたオブジェクト群の中のひとつで、様々なプロパティとメソッドを持っています。
「Number」とは？
それでは、まず最初に「Number」オブジェクトの基本的な知識から学んでいきましょう！
「Number」オブジェクトは、JavaScriptで扱う「数値」の整形や定数などを利用するために使うのが一般的です。
主に、「プロパティ」と「メソッド」の2つに分かれているのは一般的なオブジェクトと同じです。
「Number」オブジェクトを活用すれば、値が数値であるかを検証したり文字列を数値に変換するなど多彩なことが実現できるのです！
本記事では、「Number」オブジェクトの基本から応用技まで詳しく解説していきますので、ぜひ参考にしてみてください！
基本的な使い方
ここからは、「Number」オブジェクトを使ったプログラミング手法について見ていきましょう！
最も基本的な「Number」オブジェクトの使い方としては、文字列や日付などさまざまな値を「数値」に変換するという用途があります。
記述方法は、【 Number( 値 ) 】のように数値に変換したい「値」を引数に指定します。
次のサンプル例を見てください！
//① 数値
console.log( '①1234= ' + Number(1234) );
//② 文字列
console.log( '②hello= ' + Number('1234') );
//③ 日付
console.log( '③date()= ' + Number(new Date()) );
//④ 16進数
console.log( '④0xffff= ' + Number('0xffff') );
実行結果
①1234= 1234 ②1234= 1234 ③date()= 1512968940019 ④0xffff= 65535
この例では、「①数値 / ②文字列 / ③日付 / ④16進数」という値をそれぞれ引数に指定しています。
①はそのまま数値なので、結果も数値になりますね。
②は文字列型の数値なのですが自動的に数値に変換されます。（ただし「hello」など普通の文字列は変換されません）
③は日付データですが、Numberオブジェクトが自動的に「経過ミリ秒」に換算した数値を返してくれます。
④は16進数という特殊な値ですが、一般的な数値型(10進数)に変換してくれます。
このように、Numberオブジェクトを利用するとさまざまな値を「数値」にしてから処理を行えるので便利ですね。
ちなみにですが、「Number」はオブジェクトということもあり「new」を使って数値を作ることもできますが注意が必要です。
var num1 = new Number(10); var num2 = 10; console.log( typeof num1 ); console.log( num1 === num2 );
実行結果
object false
「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です！
//① 最大値を求める console.log( Number.MAX_VALUE ); //② 安全な最小値を求める console.log( Number.MIN_SAFE_INTEGER ); //③ NaNを求める console.log( Number.NaN );
実行結果
1.7976931348623157e+308 -9007199254740991 NaN
この例のように、例えば最大値を求めるプロパティ「MAX_VALUE」を使う場合は「Number.MAX_VALUE」のように記述します。
ちなみに、②のような安全に扱える「最小値 / 最大値」というのは、JavaScriptの演算処理が保証されているという意味でもあるので覚えておきましょう！
「Number」メソッド一覧
今度は、「Number」オブジェクトのメソッドについて見ていきましょう！
メソッドは、数値の文字列変換や数値かどうかの判断、四捨五入や桁数変換など数値を便利に扱えるように用意されています。
基本的なメソッドの一覧は次のとおりです！
| メソッド名 | 概要 |
|---|---|
| toString | 数値を文字列に変換（n進数に変換も可能） |
| toFixed | 四捨五入もしくは小数点の桁数を指定する |
| toPrecision | 指定した桁数に変換する |
| isNaN | NaNであるかどうかを判定 |
| isFinite | 有限な数値であるかどうかを判定 |
| isSafeInteger | 安全な数値であるかどうかを判定 |
| parseFloat | 文字列の数字を小数点に変換する |
| parseInt | 文字列の数字を整数に変換する |
メソッドの使い方ですが、【 値.メソッド 】のように対象となる値に対してメソッドを実行します。
次のサンプル例を見てください！
var num = 123; var result1 = num.toString() var result2 = num.toFixed(4); console.log( 'toString：' + result1 + ' / ' + typeof result1 ); console.log( 'toFiexd：' + result2 );
実行結果
toString：123 / string toFiexd：123.0000
この例では、数値「123」を変数numに代入しています。
このnumに対して、例えば文字列に変換したければ「num.toString()」と記述するわけです。
実行結果を見ると、見事に数値が文字列型(String)に変換されているのが分かりますね。
また、「toFixed(4)」を実行することで強制的に小数点第4位までの数値に変換することも出来ているのが分かります。
さらに、【 メソッド( 値 ) 】のように記述することで対象となる値を引数に取るメソッドもあります。
var result1 = isNaN( 'hello' ); var result2 = parseInt( 12.345 ); console.log( 'isNaN：' + result1 ); console.log( 'parseInt：' + result2 );
実行結果
isNaN：true parseInt：12
この例では、「isNaN()」の引数に文字列の「hello」を指定しているので、数値と認識できずにNaNとなり結果はtrueを示していますね。
また、「parseInt()」の引数に小数点の「12.345」を指定していますが、整数に変換されて結果的に「12」が返っているのが分かります。
ちなみに、「isNaN()」などのメソッドを活用した数値チェックの活用事例については、次の記事で詳しく解説しているので参考にしてみてください！
文字列⇔数値の相互変換について
「toString()」で文字列変換
数値型を文字列型に変換する最も簡単な方法として「toString()メソッド」があります。
これは、正負の数値や小数などを文字列に変換することが可能です。
次のサンプル例を見てください！
console.log('(123).toString() = ' + (123).toString());
console.log('(123.45).toString() = ' + (123.45).toString());
console.log('(-123).toString() = ' + (-123).toString());
実行結果
(123).toString() = 123 (123.45).toString() = 123.45 (-123).toString() = -123
この例では、任意の数値に対して「toString()」を実行することで文字列に変換しているのが分かります。
また、面白いのは引数に「基数」を指定することで、16進数・8進数・2進数に変換したあとで文字列にすることができる点です！
console.log( '(255).toString(10) = ' + (255).toString(10) ); console.log( '(255).toString(16) = ' + (255).toString(16) ); console.log( '(255).toString(8) = ' + (255).toString(8) ); console.log( '(255).toString(2) = ' + (255).toString(2) );
実行結果
(255).toString(10) = 255 (255).toString(16) = ff (255).toString(8) = 377 (255).toString(2) = 11111111
この例では、「255」という数値を「10進数・16進数・8進数・2進数」に変換した文字列の例です。
例えば、16進数に変換した文字列を作成したければ「 (255).toString(16)」のように引数へ「16」を指定すれば実現できます。
以上のように、正負の数値や小数を文字列に変換でき、また、toString()の引数に基数を指定した文字列に変換できるわけです。
「parseInt()」で数値変換
文字列型を数値型へ変換する最も簡単な方法は「parseInt()」を利用することです！
記述方法としては、【 parseInt( 文字列, 基数 ) 】のように引数へ変換したい「文字列」と「基数」を指定するようにします。
次のサンプル例を見てください！
console.log( 'parseInt("12345") = ' + parseInt('12345', 10) );
console.log( 'parseInt("123.45") = ' + parseInt('123.45', 10) );
console.log( 'parseInt("-12345") = ' + parseInt('-12345', 10) );
実行結果
parseInt("12345") = 12345
parseInt("123.45") = 123
parseInt("-12345") = -12345
この例では、文字列の数字に対してparseInt()を実行しているのが分かりますね。
注意点としては、parseInt()で変換された数値は「整数」なので小数点は排除されるということを覚えておきましょう！
また、数字ではない文字列だった場合の挙動も見ておきましょう！
console.log( 'parseInt("hello") = ' + parseInt('hello', 10) );
console.log( 'parseInt("123hello") = ' + parseInt('123hello', 10) );
実行結果
parseInt("hello") = NaN
parseInt("123hello") = 123
1つ目は文字列「hello」が引数に指定されているので、数値として認識できなかったことを意味する「NaN」が返されています。
2つ目は先頭が数字で次に文字列「hello」がくっついている場合ですが、先頭の数字部分だけ認識されているのが分かります。
このことからも分かるように、parseInt()は先頭が数字で始まる文字列だけ数値に変換できるというメソッドになります。
さらに、第2引数の「基数」を変えることで10進数だけでなく、16進数・8進数なども扱えます！
console.log( 'parseInt("0xFFFF") = ' + parseInt('0xFFFF', 16) );
console.log( 'parseInt("0o755") = ' + parseInt('755', 8) );
実行結果
parseInt("0xFFFF") = 65535
parseInt("0o755") = 493
例えば、16進数の文字列「0xFFFF」をparseInt()する際に、基数を16に指定すれば結果は10進数の値に変換されるわけです。
つまり、指定された文字列が16進数であるということを明示的にJavaScriptに教えてあげているわけです。
以上のように、parseInt()を使うと正負の数値、小数、非数値、16進数、8進数などの文字列を数値に変換できるわけです。
また、parseInt()について更なる活用事例やエラー処理などの手法を次の記事で詳しくまとめているのでぜひ参考にしてみてください！
数値型の桁区切りと桁数について
数値型の桁区切り
数値型を桁区切りした文字列に変換するには、Number型のtoLocaleString()メソッドを使用します。
ただし、小数点以下は3桁までしか表示されず、小数点下4桁以降は下3桁に丸められます。
window.onload = function () {
// 数値型の桁区切り
var num1 = 1234567;
var num2 = 1234567.567;
var num3 = 1234567.567890;
console.log('1234567 = ' + num1.toLocaleString());
console.log('1234567.567 = ' + num2.toLocaleString());
// 小数点以下の桁数は3桁で丸められます。
console.log('1234567.567890 = ' + num3.toLocaleString());
}
1234567 = 1,234,567 1234567.567 = 1,234,567.567 1234567.567890 = 1,234,567.568
以上のように、toLocaleString()メソッドで桁区切りが行われますが、小数点以下は3桁までしか表示されていませんね。
数値型の桁数
数値型の桁数を数えるメソッドはありません。
そのため、自分で実装する必要があります。
例えば、以下のサンプルコードの getNumLength()を参考にされてください。
getNumLength()は負数の場合の「-」を桁数に加えないようにMath.abs()で数値の絶対値をとり、その後、文字列に変換しています。
その文字列の文字数が数値の桁数と一致するため、文字列の文字数をlengthメソッドで求め、返値にしています。
但し、 getNumLength()は、整数の桁数しか数えることができません。
例えば、小数点以下を考慮した桁数を数える場合は、仕様に応じて実装されてください。
window.onload = function () {
// 数値型の桁数
function getNumLength(num) {
return Math.abs(num).toString().length;
}
var num1 = 123;
var num2 = 123456;
var num3 = -123456;
console.log("123 len = " + getNumLength(num1));
console.log("123456 len = " + getNumLength(num2));
console.log("-123456 len = " + getNumLength(num3));
}
123 len = 3 123456 len = 6 -123456 len = 6
以上のように、 getNumLength()は整数ならば正負に関わらず、桁数を取得できています。
数値型の型について
数値や無限大リテラル、最小値リテラル、非数値リテラル、Number型のコンストラクタの引数にnullを与えたときの数値などについて、それぞれの型をtypeof演算子で確認してみましょう。
window.onload = function () {
// 数値型の型
console.log('typeof (Number(123.45)) = ' + typeof (Number(123.45)));
console.log('typeof (Number(-123.45)) = ' + typeof (Number(-123.45)));
console.log('typeof (Number.POSITIVE_INFINITY) = ' + typeof (Number.POSITIVE_INFINITY));
console.log('typeof (Number.MIN_VALUE) = ' + typeof (Number.MIN_VALUE));
console.log('typeof (Number.NaN) = ' + typeof (Number.NaN));
console.log('typeof (Number(null)) = ' + typeof (Number(null)));
}
typeof (Number(123.45)) = number typeof (Number(-123.45)) = number typeof (Number.POSITIVE_INFINITY) = number typeof (Number.MIN_VALUE) = number typeof (Number.NaN) = number typeof (Number(null)) = number
以上のように、いずれの場合においても、typeof演算子の型判定結果は “number” になっています。
無限大リテラルや非数値リテラルなど数値では表せないリテラルなども型は数値型であることが確認できました。
まとめ
いかがでしたでしょうか。
数値型はtoLocaleString()メソッドを使用して桁区切りの文字列に変換できました。
ただ、数値型の桁数を求めるには、自分でロジックを実装しないといけませんでした。
また、数値型と文字列型はの相互変換でき、変換する際には基数を指定し、16進数や8進数、2進数などでの変換も可能でした。
数値型には無限大や無限小、最大値、最小値、非数値なども定義されており、それらはリテラルとして扱うことが可能でした。
また、それらリテラルの型も数値型でした。
数値型やそのリテラル、文字列型との相互変換なども、実務で多用しますので、ぜひ、ここで覚えておいてください。
JavaScriptの数値型について忘れてしまったら、またこのページをご覧になってください！
