parseInt()とNumber()を使いこなして爆速開発！JavaScriptのパフォーマンスアップの秘訣
2024-07-02
JavaScriptにおけるparseInt()とNumber()の違い：パフォーマンスと使い分け
変換対象の違い
- parseInt(): 文字列の先頭から連続する整数部分のみを抽出し、数値に変換します。小数点以下の部分は切り捨てられます。
- Number(): 文字列全体を数値として解釈し、変換します。文字列が数値に変換できない場合は、**NaN（Not a Number）**を返します。
例：
parseInt("12.3abc") // 結果：12
Number("12.3abc") // 結果：12.3
基数の指定
- parseInt(): オプションで基数を第二引数として指定できます。基数は、文字列が表現する数値の表現形式を決定します。例えば、基数8を指定すると、8進数として解釈されます。
- Number(): 基数の指定はできません。常に10進数として解釈されます。
parseInt("11", 2) // 結果：11（2進数表記の11を10進数に変換）
Number("11") // 結果：11（10進数として解釈）
空白文字の扱い
- parseInt(): 文字列の先頭に空白があっても、最初の数字に到達するまで空白を読み飛ばして解析します。ただし、数字列の中に空白があると、その時点で解析を終了し、以降の数字は無視されます。
- Number(): 文字列の先頭または数字列の中に空白があると、NaNを返します。
parseInt(" 123 45") // 結果：123
Number(" 123 45") // 結果：NaN
parseInt("123 abc") // 結果：123
Number("123 abc") // 結果：NaN
パフォーマンス
- parseInt(): 一般的に、Number()よりも高速に動作します。これは、parseInt()が数値部分のみを解析するのに対し、Number()は文字列全体を解釈する必要があるためです。
- **ただし、**基数の指定やエラー処理など、parseInt()が複雑な処理を行う場合は、Number()の方が高速になる場合もあります。
使い分け
- 整数値のみを扱う場合は、**parseInt()**の方が高速で簡潔なためおすすめです。特に、基数を変換する必要がある場合は、parseInt()の基数指定オプションが便利です。
- 小数点を含む数値や、エラー処理を考慮する必要がある場合は、**Number()**の方が汎用性が高く、安全に使用できます。
- パフォーマンスが特に重要な場合は、ベンチマークテストを行い、それぞれの関数のパフォーマンスを比較することをおすすめします。
整数のみを抽出
const str1 = "123abc";
console.log(parseInt(str1)); // 結果：123
console.log(Number(str1)); // 結果：123
小数点を含む数値
const str2 = "123.45";
console.log(parseInt(str2)); // 結果：123
console.log(Number(str2)); // 結果：123.45
const str3 = "111";
console.log(parseInt(str3, 2)); // 結果：7（2進数表記の111を10進数に変換）
console.log(Number(str3)); // 結果：111（10進数として解釈）
空白文字
const str4 = " 123 45";
const str5 = "123 abc";
console.log(parseInt(str4)); // 結果：123
console.log(Number(str4)); // 結果：NaN
console.log(parseInt(str5)); // 結果：123
console.log(Number(str5)); // 結果：NaN
const iterations = 100000;
const startTime1 = performance.now();
for (let i = 0; i < iterations; i++) {
parseInt("123");
}
const endTime1 = performance.now();
const time1 = endTime1 - startTime1;
const startTime2 = performance.now();
for (let i = 0; i < iterations; i++) {
Number("123");
}
const endTime2 = performance.now();
const time2 = endTime2 - startTime2;
console.log(`parseInt() time: ${time1} ms`);
console.log(`Number() time: ${time2} ms`);
このコードを実行すると、それぞれの関数の処理時間が表示されます。parseInt()の方が、Number()よりも高速に動作することが確認できます。
補足
- パフォーマンス測定結果は、環境やブラウザによって異なる場合があります。
- 実際のコードでは、処理対象のデータや処理内容に合わせて、適切な関数を選択してください。
parseInt()とNumber()以外の方法
**1. parseFloat()
- 小数点を含む数値に変換する場合に使用します。
- parseInt()と異なり、小数点以下の部分は切り捨てられません。
- 基数の指定も可能です。
const str1 = "123.45";
console.log(parseFloat(str1)); // 結果：123.45
**2. +演算子
- 数値に変換できる文字列であれば、+演算子で数値に変換できます。
- 小数点を含む数値も変換できます。
- 基数は指定できません。
const str2 = "123.45";
console.log(+str2); // 結果：123.45
**3. eval()
- 文字列を式として評価し、結果を数値に変換します。
- 柔軟性の高い方法ですが、セキュリティ上のリスクがあるため、一般的には推奨されません。
const str3 = "123 + 45";
console.log(eval(str3)); // 結果：168
**4. RegExp
- 正規表現を使用して、特定の形式の文字列を数値に変換できます。
- より複雑な変換に適しています。
const str4 = "$123.45";
const regex = /^\$([0-9]+(\.[0-9]+)?)$/;
const match = str4.match(regex);
if (match) {
console.log(parseFloat(match[1])); // 結果：123.45
} else {
console.log("数値に変換できません");
}
用途に応じて、適切な方法を選択することが重要です。
- 整数のみを扱う場合は、**parseInt()**がおすすめです。
- 小数点を含む数値の場合は、parseFloat()または+演算子を使用します。
- より複雑な変換が必要な場合は、RegExpを使用します。
- セキュリティ上のリスクを考慮する必要がある場合は、**eval()**は避けてください。
javascript performance
