文字列から数値への変換における parseInt() と Number() のニュアンスを理解する

文字列から数値への変換を扱う場合JavaScript で変換を行うには、parseInt() と Number() の違いを理解することが不可欠です。これら 2 つのメソッドは、文字列入力の処理において異なる動作を示します。

意味の違い: 解析と型変換

parseInt() は解析を実行します。つまり、次の部分を解釈します。文字列を数値として表示しますが、指定された数値体系に適合しない末尾の文字は無視されます。一方、Number() は型変換を実行し、文字列全体を数値に変換しようとします。

例:

// Parsing
parseInt("20px");       // 20
parseInt("10100", 2);   // 20
parseInt("2e1");        // 2

// Type conversion
Number("20px");       // NaN
Number("2e1");        // 20 (exponential notation)

末尾の文字と暗黙の 8 進数

parseInt() は、指定された基数の数値に対応しない末尾の文字を無視します。ただし、Number() コンストラクターは、暗黙的な 8 進数 (8 進数体系を表す、先頭に 0 が付いている数値) を検出しません。明示的な 8 進数表記 (0o) は Number().

// Implicit octal detection
Number("010");         // 10
Number("0o10")         // 8

// Parsed as octal by default
parseInt("010");       // 8
parseInt("010", 10);   // 10 (force decimal radix)

16 進表記と単項プラス演算子

parseInt() と Number() はどちらも 16 進表記を処理でき、数値は先頭に0x プレフィックス。さらに、単項プラス演算子 ( ) を使用して、Number() コンストラクターを使用するのと同等の数値型変換を実行することもできます。

// Hexadecimal notation
Number("0xF");   // 15
parseInt("0xF"); //15

// Unary Plus Operator
 "2e1";   // 20
 "0xF";   // 15
 "010";   // 10

parseInt() と Number() の特定の特性を理解することで、開発者は JavaScript で文字列を数値に変換するときに情報に基づいた決定を下すことができ、正確で信頼性の高い結果を保証できます。