JavaScript: Number vs. parseInt - 文字列を数値に変換する方法
JavaScriptで文字列を数値に変換する際に、`Number` と `parseInt` のどちらを使うべきか迷ったことはありませんか？どちらも数値への変換に使えますが、その動作には大きな違いがあります。この記事では、それぞれの関数について詳しく解説し、状況に応じて適切な方を選択できるようにします。
parseInt: 文字列の先頭から整数値を取得する
`parseInt`関数は、文字列を受け取り、その文字列の先頭から数字部分を読み取って整数値に変換します。変換できない文字に遭遇するか、文字列の最後まで到達すると、そこで変換を終了します。変換に成功した場合は整数値を、失敗した場合は`NaN` (Not a Number) を返します。
parseInt の動作
以下の表は、`parseInt` がどのように文字列を整数値に変換するかを示しています。
| 文字列 | parseInt の結果 | 解説 |
|---|---|---|
| "123" | 123 | 文字列全体が数字なので、整数値に変換されます。 |
| "123px" | 123 | 先頭から数字部分 "123" が変換され、"px" は無視されます。 |
| "abc123" | NaN | 先頭が数字ではないため、変換に失敗します。 |
| "12.34" | 12 | 小数点以下は切り捨てられます。 |
parseIntの使用例
<script>
const str1 = "123";
const num1 = parseInt(str1);
console.log(num1); // 123
const str2 = "10.5px";
const num2 = parseInt(str2);
console.log(num2); // 10
</script>
Number: 文字列全体を数値に変換する
`Number`関数は、文字列全体を解釈し、可能な限り数値に変換しようとします。整数、小数、指数表記など、様々な形式の数値に対応しています。変換できない文字列が渡された場合は、`parseInt`と同様に `NaN` を返します。
Number の動作
以下の表は、`Number` がどのように文字列を数値に変換するかを示しています。
| 文字列 | Number の結果 | 解説 |
|---|---|---|
| "123" | 123 | 整数値として解釈されます。 |
| "12.34" | 12.34 | 小数値として解釈されます。 |
| "1e3" | 1000 | 指数表記として解釈されます。 |
| "123px" | NaN | 数字以外の文字が含まれているため、変換に失敗します。 |
Numberの使用例
<script>
const str1 = "123";
const num1 = Number(str1);
console.log(num1); // 123
const str2 = "12.34";
const num2 = Number(str2);
console.log(num2); // 12.34
</script>
どちらの関数を使うべきか？
`parseInt` と `Number` のどちらを使うべきかは、状況によって異なります。
* **文字列の先頭から整数値だけを取得したい場合:** `parseInt` を使用します。 * **文字列全体を解釈して、整数、小数、指数表記など、可能な限り数値に変換したい場合:** `Number` を使用します。まとめ
`parseInt` と `Number` はどちらも JavaScript で文字列を数値に変換するために使用されますが、その動作には違いがあります。それぞれの関数の特性を理解し、状況に応じて適切な方を選択することが重要です。
参考文献
よくある質問
Q1: parseInt で基数を指定する必要があるのはなぜですか？
A1: `parseInt` は、2 つ目の引数として基数を指定することができます。基数は、変換元の文字列がどのような進数で表されているかを示します。例えば、"1010" という文字列を2進数として解釈したい場合は、`parseInt("1010", 2)` のように基数に 2 を指定します。基数を省略した場合、デフォルトでは 10 進数として解釈されますが、先頭に "0x" や "0X" が付いている場合は 16 進数として解釈されるなど、状況によって解釈が変わる可能性があるため、明示的に指定することが推奨されます。
Q2: Number 関数はどのような時に NaN を返しますか？
A2: `Number` 関数は、文字列全体を数値として解釈できない場合に `NaN` を返します。例えば、数字以外の文字が含まれている場合や、空文字列などが該当します。また、`Infinity` や `-Infinity` を表す文字列も `NaN` を返します。
Q3: 文字列を数値に変換する方法として、他にどのようなものがありますか？
A3: `parseInt` や `Number` の他に、単項プラス演算子 (`+`) を使用する方法もあります。この方法は、`Number` 関数と同様に文字列全体を解釈して数値に変換しようとしますが、`Number` 関数よりも短い記述で済むというメリットがあります。ただし、`parseInt` や `Number` とは異なり、エラー処理が組み込まれていないため、注意が必要です。
その他の参考記事:JavaScript Number 数値オブジェクト