ゼロサプレスをする時にNumber()とparseInt()というメソッドを使ってみました。がどちらも動きが似ていて違いがよくわからなかったので２つの違いをすこしまとめてみたいと思います。
違いは思っているよりあったので、簡易的に調べました。
私の調べた違いは以下になります。
- parseInt()は数値のみとり出せる
- Number()は文字を識別する
- Number(null)→ 0になる
- Number(‘ ‘)→ 0になる
- 進数の取り扱い方の違い(接頭辞の有無)
- parseInt() 接頭辞なし
- Number() 接頭辞あり
parseInt()はJavaScriptのグローバル関数、NumberはオブジェクトでNumber()はその関数という違いがあるのですがその辺りは初心者には難しいので飛ばしています。
実際にコードで確認してみたいと思います。
Numberはタイプを変換する機能、parseIntは文字を解体するものと説明している方もいました。
parseInt()は数値のみとり出せる
parseInt()は数値のみ取り出せます。
num = Number(‘123px’);
par = parseInt(‘123px’);
console.log(num); // NaN ※NaNは不正です(数値に変換できていない)
console.log(par); // 123
parseInt()は単位(GB, px, min)などが含まれている値から数値のみ取り出すときに便利なようです。
Number()は文字を識別する
Number()は文字を識別します。
Number(null)→ 0になる
num = Number(null);
par = parseInt(null);
console.log(num); // 0
console.log(par); // NaN
nullを0にしたい状況があれば最適そうです。
Number(‘ ‘)→ 0になる
空の値を0にしてくれます。
num = Number(”);
par = parseInt(”);
console.log(num); // 0
console.log(par); // NaN
nullと似ていますね。
進数の取り扱い方の違い (接頭辞の有無)
進数をどちらも10進数に変換してくれますが接頭辞の有無で使いわけができそうです。
parseInt() 接頭辞なし
接頭辞なしの場合、進数変換が簡単にできそうです。
par1 = parseInt(’11’, 16); // 16進数を10進数に変換
par2 = parseInt(’11’, 2); // 2進数を10進数に変換
par3 = parseInt(’11’, 8); // 8進数を10進数に変換
par4= parseInt(‘0b11’, 2); //接頭辞あり
console.log(par1); // 17
console.log(par2); // 3
console.log(par3); // 9
console.log(par4); // 0 はじめの0のみ値を認識しています
Number() 接頭辞あり
2進数、8進数、16進数を認識します。
num1 = Number(‘0x11’) // 16進数
num2 = Number(‘0b11’) // 2進数
num3 = Number(‘0o11’) // 8進数
console.log(num1); // 17
console.log(num2); // 3
console.log(num3); // 9
接頭辞なしはもちろん、そのまま10進数として認識します。
