JavaScriptで文字列を数値変換する際は+ではなくparseIntを使用する

JavaScriptで文字列を数値変換

JavaScriptで文字列を数値に型変換する際は+が使用されることがある。

+は文字列の数字の先頭に付けると数値に変換されるので割と良く見かけるが、空文字の場合は0になってしまうので使うべきではない。

例えばinput type="number"から数字を取得して0以上の場合は条件分岐で判定する際に+の場合、未入力(空文字)だと0に変換されるためtrueの処理になってしまう。

// <input type="number" id="num">
const num = document.getElementById('num')
const score = +num.value
console.log(score) // 0

if (score >= 0 && score < 40) {
  console.log('赤点')
} else {
  console.log('点数未入力')
}
// => '赤点'

上記のコードを見るとわかるように本来であれば入力されていないのであれば点数未入力と処理されるべきだが+だと未入力(空文字)だと0に変換されるため正しく処理されなくなる。

parseIntで数値に変換する

このような問題を防ぐためにはparseIntを使用する。

parseIntであれば空文字はNaNを返すので条件分岐を正しく処理できる。

ほとんどのケースの場合はparseIntでの数値変換で問題なく処理できるので、普段から+ではなくparseIntを使用するようにしたほうが良いだろう。

// <input type="number" id="num">
const num = document.getElementById('num')
const score = parseInt(num.value)
console.log(score) // NaN

if (score >= 0 && score < 40) {
  console.log('赤点')
} else {
  console.log('点数未入力')
}
// => '点数未入力'

parseIntの基数指定は不要

parseIntのコードでparseInt('123', 10)のように第2引数に10の基数を指定しているコードをたまに見かけるが、これはECMAScript 5より前の時代に第2引数に10の基数を指定しないと8進数の文字列を10進数で処理できなかったことによる名残。

現在のほとんどのブラウザはECMAScript 5対応なので10進数の数値に変換したい場合は第2引数の基数を指定せずにparseInt('123')のように書いても問題ない。