【初心者向け】JavaScriptで数値チェックのすべて！isNaN(), isFinite(), 正規表現を使いこなそう

2024-06-15

JavaScript で変数が数字か文字列かをチェックする方法

typeof 演算子を使う

最も簡単な方法は、typeof 演算子を使うことです。typeof 演算子は、オペランドの型を返します。

const num = 10;
const str = "Hello";

console.log(typeof num); // "number"
console.log(typeof str); // "string"

isNaN() 関数を使う

isNaN() 関数は、引数が数値でないかどうかを判断します。つまり、数値であるかどうかを判定することができます。

const num = 10;
const str = "Hello";

console.log(isNaN(num)); // false
console.log(isNaN(str)); // true

Number.isFinite() 関数を使う

const num = 10;
const infinity = Infinity;
const str = "Hello";

console.log(Number.isFinite(num)); // true
console.log(Number.isFinite(infinity)); // false
console.log(Number.isFinite(str)); // false

正規表現を使って、文字列が数値かどうかを判定することもできます。

const numStr = "123";
const nonNumStr = "abc";

const numRegex = /^[0-9]+$/;

console.log(numRegex.test(numStr)); // true
console.log(numRegex.test(nonNumStr)); // false

使い分け

シンプルな判定であれば、typeof 演算子を使うのが最も簡単です。
文字列が数値に変換できるかどうかを判定したい場合は、isNaN() 関数を使うのが適切です。
無限大や非数を含むかどうかを判定したい場合は、Number.isFinite() 関数を使うのが適切です。
より複雑な判定や、細かい条件を設定したい場合は、正規表現を使うのが柔軟です。

補足

上記以外にも、parseInt() 関数や parseFloat() 関数を使って、文字列を数値に変換できるかどうかを試す方法もあります。
オブジェクトの場合は、typeof 演算子で "object" と判定されますが、instanceof 演算子を使って Number インスタンスかどうかを判定することもできます。

ぜひ、これらの方法を理解して、状況に合わせて使い分けてみてください。

typeof 演算子を使う

const checkNumOrStr = (value) => {
  if (typeof value === "number") {
    console.log(`${value} は数値です。`);
  } else if (typeof value === "string") {
    console.log(`${value} は文字列です。`);
  } else {
    console.log(`${value} は数値でも文字列でもありません。`);
  }
};

checkNumOrStr(10); // 10 は数値です。
checkNumOrStr("Hello"); // Hello は文字列です。
checkNumOrStr(true); // true は数値でも文字列でもありません。

isNaN() 関数を使う

const checkIsNumber = (value) => {
  if (isNaN(value)) {
    console.log(`${value} は数値ではありません。`);
  } else {
    console.log(`${value} は数値です。`);
  }
};

checkIsNumber(10); // 10 は数値です。
checkIsNumber("Hello"); // Hello は数値ではありません。
checkIsNumber(Infinity); // Infinity は数値ではありません。

Number.isFinite() 関数を使う

const checkIsFiniteNumber = (value) => {
  if (Number.isFinite(value)) {
    console.log(`${value} は有限な数値です。`);
  } else {
    console.log(`${value} は有限な数値ではありません。`);
  }
};

checkIsFiniteNumber(10); // 10 は有限な数値です。
checkIsFiniteNumber("Hello"); // Hello は有限な数値ではありません。
checkIsFiniteNumber(Infinity); // Infinity は有限な数値ではありません。

正規表現を使う

const checkIsNumStr = (value) => {
  const numRegex = /^[0-9]+$/;
  if (numRegex.test(value)) {
    console.log(`${value} は数値を表す文字列です。`);
  } else {
    console.log(`${value} は数値を表す文字列ではありません。`);
  }
};

checkIsNumStr("123"); // 123 は数値を表す文字列です。
checkIsNumStr("abc"); // abc は数値を表す文字列ではありません。
checkIsNumStr("123.45"); // 123.45 は数値を表す文字列です。

これらのサンプルコードは、あくまでも一例です。状況に合わせて、自由に改造して使用してください。

JavaScript で変数が数字か文字列かをチェックするその他の方法

instanceof 演算子を使って、変数が Number インスタンスかどうかを判定することができます。

const num = 10;
const str = "Hello";

console.log(num instanceof Number); // true
console.log(str instanceof Number); // false

isInteger() 関数を使う

isInteger() 関数は、引数が整数かどうかを判断します。これは、Number.isFinite() 関数と似ていますが、小数を含む数値はfalse と判定されます。

const num = 10;
const decimalNum = 10.5;
const str = "Hello";

console.log(isInteger(num)); // true
console.log(isInteger(decimalNum)); // false
console.log(isInteger(str)); // false

正規表現と組み合わせて使う

より複雑な判定を行う場合は、正規表現と組み合わせて使うこともできます。例えば、以下のように、小数点を含む数値かどうかを判定することができます。

const numStr = "123.45";
const nonNumStr = "abc";

const numRegex = /^\d+(\.\d+)?$/;

console.log(numRegex.test(numStr)); // true
console.log(numRegex.test(nonNumStr)); // false

カスタム関数を作る

上記のいずれの方法でも十分でない場合は、カスタム関数を作ることもできます。例えば、以下のように、特定の条件に合致するかどうかを判定する関数を作ることができます。

const checkNumOrStr = (value) => {
  if (typeof value === "number") {
    return true;
  } else if (typeof value === "string") {
    const numRegex = /^\d+(\.\d+)?$/;
    return numRegex.test(value);
  } else {
    return false;
  }
};

const num = 10;
const str = "123.45";
const nonNumStr = "abc";

console.log(checkNumOrStr(num)); // true
console.log(checkNumOrStr(str)); // true
console.log(checkNumOrStr(nonNumStr)); // false