format_list_bulleted
【JavaScript】Numberオブジェクトについて解説
最終更新日時:2020-05-03 12:50:16



プログラミングをするのに数値を使った処理は欠かせないですよね!そこで、本記事では、JavaScriptのNumberオブジェクトについて説明し、数値から文字列の変換(int to string)についてや、その逆の文字列から数値の変換(string to int)についても説明します。

Numberオブジェクトとは

Numberオブジェクトとは数値型(number)の値を扱うためのラッパーオブジェクトです。数値の整形を行うための機能や、数値型の最大値や最小値など、特別な値(定数)を表すためのプロパティを公開しています。また、Numberオブジェクトを用いることで、値が数値であるか判定することができたり、数値と文字列の相互変換を可能にすることができます。

Numberオブジェクトの使い方

Numberオブジェクトは次のコードのように日付や”1234”などの数字の文字列も数値に変換することができます。日付については1970/01/01からの経過時間を数値として変換しています。(詳しくはこちらで解説しています。)nullや空白文字については0に変換されます。”アイウエオ”などの引数が数値に変換できない場合は、NaNを返します。

//数値=>1234
console.log(Number(1234))
//文字列(数字)=>1234
console.log(Number('1234'))
//文字列(文字)=>NaN
console.log(Number("アイウエオ"))
//空白文字=>0
console.log(Number('') )      
//null=>0
console.log(Number(null))     
//日付=>1581910224436
console.log(Number(new Date()))
//16進数=>43981
console.log(Number('0xabcd'))

Numberオブジェクトのメソッド

Numberオブジェクトのメソッドは次の表の通りです。

本記事では、これらのメソッドのうち数値から文字列に変換するメソッド、文字列から数値に変換するメソッドについて紹介します。

メソッド名
意味
isFinite()
数値が取り扱えるかどうかを判定(true or false)
isInteger
引数が整数型か判定(true or false)
isNaN()
引数がNaNか判定(true or false)
isSafeInteger()
安全な数値であるかどうかを判定(true or false)
parseFloat()
文字列の数字を小数点に変換(string to float)
parseInt()
文字列の数字を整数に変換(string to int)
toString()
数値を文字列に変換(n進数に変換も可能)(num to string)
toFixed()
数値を固定小数点数の文字列に変換
toPrecision()
指定した有効な桁数に変換して文字列に変換
toExponential()
指数表記で数値を文字列に変換

数値から文字列の変換について(toString)

数値型から文字列に変換する場合、NumberオブジェクトのtoString メソッドを用います。次のコードのように123(数値)と456(数値)を繋げて123456(文字列)と表示させたい場合、両方(またはどちらか)の数値に(数値).toString()と書くことで、数値と数値を繋げることができます。ちなみに、どちらかをtoStringメソッドで文字列に変換し、数値+文字列とすると、数値が文字列に変換されて繋がるようになります。なお、文字列の処理にはこちらで説明してあります。

var num123 = 123
var num123_toString = num123.toString()
var num456 = 456
var num456_toString = num456.toString()

console.log(num123+num456)  //579
console.log(num123_toString+num456_toStribg) //123456
console.log(num123+num456_toString)  //123456

また、toStringメソッドでは引数に基数(n)を指定することで数値をn進数に変換してから文字列に変換することができます。

console.log((4).toString(2)) //100
console.log((10).toString(16)) //a
console.log((100).toString(16))//64

文字列から数値の変換について(parseInt,parseFloat)

文字列から数値型に変換する場合、NumberオブジェクトのparseIntメソッドかparseFloatメソッドを使います。parseIntメソッドは、次のコードのように第一引数に文字列、第二引数に基数を指定します。parseIntメソッドの場合、整数部分以外排除されて整数に変換されます。

var string_1 = "123.45"
var string_2 = "456.78"
var string_3 = "123.45aaa"

var String_toInt1 = parseInt(string_1,10)
var String_toInt2 = parseInt(string_2,10)
var String_toInt3 = parseInt(string_3,10)

console.log(String_toInt1) //123
console.log(String_toInt2) //456
console.log(String_toInt3) //123
console.log(string_1+String_toInt2)//123.45456
console.log(String_toInt1+String_toInt2)//579

parseFloatメソッドは、次のコードのように引数に変換したい文字列を指定します。parseFloatメソッドの場合、parseIntと異なり、小数点まで全て数値に変換されます。また、aなどの文字は変換する際に排除されます。

var string_1 = "123.45"
var string_2 = "456.78"
var string_3 = "123.45aaa"

var String_toFloat1 = parseFloat(string_1)
var String_toFloat2 = parseFloat(string_2)
var String_toFloat3 = parseFloat(string_3)

console.log(string_1) //123.45(文字列)
console.log(String_toFloat1) //123.45(数値)
console.log(String_toFloat3) //123.45(数値)
console.log(string_1+string_2) //123.45456.78
console.log(String_toFloat1+String_toFloat2) //580.23

parseIntメソッドとparseFloatメソッドの違いは、変換した結果の値が整数か小数点かです。必要に応じて、使い分けましょう!また、parseIntメソッドでは基数を指定できますがparseFloatは基数を指定できないという違いもあります。

ちなみに、toStringメソッドで説明したように数値+文字列とすると、数値が文字列に変換されて繋がるようになってしまうので、数値を足し合わせるには全て数値に変換して足し合わせないといけません。

この記事のまとめ

本記事ではJavaScriptでのNumberオブジェクトについて説明しました!最後に記事の要点をまとめてみましょう。

  • Numberオブジェクトで文字列変換や数値変換など数値を操作することができる。
  • toStringメソッドで数値を文字列に変換することができる
  • parseIntメソッドで文字列を数値に変換することができる

JavaScriptのNumberオブジェクトを是非活用してみましょう。