JavaScript - 文字列を数値に変換する【ES2015対応】

JavaScriptで文字列を数値に変換する場合、3つの方法があります。

Number()関数を使う方法と、NumberオブジェクトのparseInt()メソッド、 parseFloat()メソッドを使う方法です。

Number()で数値に変換する

Number()関数は、整数と浮動少数点数のどちらにも対応しています。

「'5a'」のように数値と文字が混在している場合は、「NaN」を返します。


console.log(Number('5a')); // NaN

console.log(Number('54')); // 54

console.log(Number('54.6')); // 54.6

console.log(Number('abc')); // NaN

Number.parseInt() で数値に変換する

NumberオブジェクトのparseInt()メソッドは整数に対応したメソッドです。

「'54.6'」のように、少数点以下は切り捨てます。

「'5a'」のように数値と文字が混在している場合は、 先頭から解析できる部分を数値として返します。

「'a5'」の場合は、先頭が文字なので「NaN」を返します。


console.log(Number.parseInt('5a')); // 5

console.log(Number.parseInt('a5')); // NaN

console.log(Number.parseInt('54')); // 54

console.log(Number.parseInt('54.6')); // 54

console.log(Number.parseInt('abc')); // NaN

Number.parseFloat() で数値に変換する

NumberオブジェクトのparseFloat() メソッドは浮動小数点数に対応したメソッドです。

浮動少数点数に対応しているという点以外では、parseInt()メソッドと似ています。

文字と数値が混在している場合は、先頭から数値として認識できる部分を返します。

ですから「'5.3a'」の場合は「5.3」を返し、

「'a5.3'」の場合は「NaN」を返します。


console.log(Number.parseFloat('5.3a')); // 5.3

console.log(Number.parseFloat('a5.3')); // NaN

console.log(Number.parseFloat('54')); // 54

console.log(Number.parseFloat('54.6')); // 54.6

console.log(Number.parseFloat('abc')); // NaN

ES2015からの変更点

parseInt()とparseFloat()に関しては、 ES2015以前からもGlobalオブジェクトのメンバーとして使用できていましたが、

ES2015からNumberオブジェクトのメンバーとして追加されました。

そして、現在はどちら方法でも記述できます。



console.log(Number.parseInt('54'));
console.log(parseInt('54'));

console.log(Number.parseFloat('54.6'));
console.log(parseFloat('54.6'));

このページでは、ES2015対応として「Number.parseInt()」「Number.parseFloat()」 という書き方をしました。

数値に関する機能ですから、 今後使う場合は、Numberオブジェクトのメソッドとして使う方がわかりやすいと思います。

まとめ

・JavaScriptで文字列を数値に変換する場合は、主に次の3つの方法があります。

・Number()関数

・Number.parseInt() メソッド

・Number.parseFloat() メソッド

・parseInt()とparseFloat() は、 ES2015からNumberオブジェクトのメンバーとしても使えるようになりました。

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする