Numberオブジェクトって結構厄介

Numberオブジェクトの挙動が意外にも厄介だったのでまとめておく。

something.js

Number("0"); // → 0 
Number("hoge"); // → NaN
Number(""); // → 0 (NaNじゃないんかい)

Reactにおいて、以下のようにクエリの値に応じて表示する内容を変えようと思ったのだが、実際にはクエリが指定されていない場合、blockID=0となってしまうため、「0以上やで〜」が表示されてしまう。

something.tsx

// 省略

const component = () => {
    // urlは、https://localhost:3000/something
    const location = useLocation();
    const search = location.search;
    const query = new URLSearchParams(search);
    const blockID = Number(query.get("id"));

    return(<>
        {/* 「クエリないで〜」が表示されるようにしたい */}
        {Number.isNaN(blockID) && <div>クエリないで〜</div>}
        {blockID >= 0 && <div>0以上やで〜</div>}
    </>);
}