スライドショースライドショー

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

こんにちは!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()」などのメソッドを活用した数値チェックの活用事例については、次の記事で詳しく解説しているので参考にしてみてください!

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

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

「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()について更なる活用事例やエラー処理などの手法を次の記事で詳しくまとめているのでぜひ参考にしてみてください!

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

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

数値型の桁区切り

数値型を桁区切りした文字列に変換するには、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の数値型について忘れてしまったら、またこのページをご覧になってください!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

貝原 輝昌

貝原 輝昌

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

おすすめコンテンツ

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

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