【JavaScript】Array.map(Number)で空白が0に変換される原因と対策を解説

まず、次のようなコードとその出力結果を見てください。なぜJavaScriptは文字列中の空白（" "）を0に変換してしまうのでしょうか？

const digify = (str) => {
    const parsedStr = [...str].map(Number)
    return parsedStr;
}
console.log(digify("778 858 7577"))

出力結果

[
  7, 7, 8, 0, 8,
  5, 8, 0, 7, 5,
  7, 7
]

文字列の中に本物の「0」も含まれている場合、この挙動は非常に紛らわしく、思わぬバグの原因になりかねません。

なぜ空白が0になるのか？

この現象が起こる理由は、Number関数による型変換の仕様にあります。Number()は引数を数値へ変換する際、ECMAScriptで定義されたToNumberアルゴリズムに従って処理を行います。そしてこのアルゴリズムでは、空文字列（""）や空白のみで構成される文字列（" "）は数値の0として評価されることになっています。

つまり、map(Number)が文字列の各文字に対してNumber(" ")を実行した結果、空白ごとに0が返されるため、配列内のスペースがすべて0に置き換わってしまうのです。

実際、コンソールでNumber(" ")を実行してみると、0が返されることを確認できます。

対策：parseIntを使う

この直感に反する挙動を防ぎたい場合は、map()のコールバックを少し工夫しましょう。例えば、基数10を指定したparseIntを使う方法があります。

サンプルコード

const digify = (str) => {
    const parsedStr = [...str].map(i => parseInt(i, 10))
    return parsedStr;
}
console.log(digify("778 858 7577"))

parseIntは空白文字を数値として解釈できないため、その場合はNaNを返します。「数字ではないものはNaNになる」というのは、0に変換されるよりもはるかに論理的で直感的な動作と言えるでしょう。

出力結果

[
  7, 7, 8, NaN, 8,
  5, 8, NaN, 7, 5,
  7, 7
]

まとめ

• map(Number)は空白文字を0に変換してしまう（ToNumberの仕様による）
• parseInt(値, 10)を使えば、空白はNaNになり、意図しない0との混同を避けられる