+で型を数値型に無理やり変換してisNaNで制御

変数の前に+を書くことで数字になる

const number123 = 123;
typeof(number123); // number
const string123 = "123";
typeof(string123); // string
const hoge = "hoge"
typeof(hoge); // string

変数の前に+を書くことで、string123は数値(123)になり、hogeはNaNになる。

const changeString123 = +string123;
typeof(changeString123); // number
console.log(changeString123); // 123

const changeHoge = +hoge
typeof(changeHoge); // number
console.log(changeHoge); // NaN

数字か文字列かはisNaN()で判断

isNaN(changeString123); // isNaN(123)⇒false
isNaN(changeHoge); // isNaN(NaN)⇒true

余談・こんな時に使いました

Next.jsにて、現在いるパスが年(2021とか)の数字である定義。それ以外はエラーページを出す。

import { useRouter } from 'next/router';

const router = useRouter();
const thisSlug = router.query.year;
/* /[year]/[month]/[day]を想定 */

yearもといthisSlugが数値であってほしい設計。hugaやfooなど受け取っても、ページとしての整合性が取れなくなる。

よって、上記のやり方を適用した。

const router = useRouter();
const thisSlug = +router.query.year;
if (isNaN(thisSlug)){
  return (
    <>
      <p>illegal use of url...</p>
    </>
  )
}