MENU

JavaScriptで確実に数値を判定する方法と実践テクニック

JavaScriptで数値を扱うとき、「これって本当に数値なの?」って悩むことありませんか?大丈夫です、誰もが通る道なんです。この記事では、JavaScriptでの数値判定について、基本から応用まで、具体例を交えてわかりやすく解説していきます。複雑に見える数値判定も、コツさえつかめば怖くありません。一緒に学んでいきましょう!

目次

数値判定の基本:isNaN関数とTypeofオペレータの使い方

JavaScriptで数値を判定する基本的な方法といえば、isNaN関数とtypeofオペレータです。これらは初心者の方でも簡単に使えるツールですが、使い方を間違えると思わぬ結果になることも。ここでは、これらの使い方と注意点を詳しく見ていきます。正しく使いこなせば、数値判定の強力な味方になりますよ。

isNaN関数を使った数値チェックの実装方法と注意点

isNaN関数、聞いたことありますか?「is Not a Number」の略で、「数値じゃないよね?」を確認する関数なんです。使い方は超シンプル!でも、ちょっとした落とし穴もあるので要注意です。

例えば、こんな感じで使います:

console.log(isNaN(123));  // false(123は数値だから)
console.log(isNaN("456")); // false(文字列だけど数値に変換できるから)
console.log(isNaN("こんにちは")); // true(数値に変換できないから)

簡単そうに見えますよね。でも、ちょっと待って!isNaNには意外な動きをする場合があるんです。

console.log(isNaN("")); // false(空文字列は0に変換されるから)
console.log(isNaN(null)); // false(nullは0に変換されるから)

「えっ、空文字列やnullが数値扱い?」って思いましたよね。そうなんです、isNaNは引数を数値に変換しようとするクセがあるんです。だから、空文字列やnullは0に変換されて、「数値じゃない」とは判定されないんです。

これって、初心者の方にとっては混乱のもとかもしれません。でも大丈夫、この特性を知っているだけでも大きな武器になりますよ。

isNaN関数の戻り値を正しく解釈するためのテクニック

isNaN関数の戻り値、ちょっとややこしいですよね。「数値じゃない」ときにtrueを返すなんて、直感に反する気がします。でも、こんな風に考えると覚えやすいかも:「これって数値として扱えないよね?」ってisNaNに聞いているんです。

例えば、こんな使い方はどうでしょう:

function isValidNumber(value) {
  return !isNaN(value) && typeof value === 'number';
}

console.log(isValidNumber(123)); // true
console.log(isValidNumber("456")); // false
console.log(isValidNumber(NaN)); // false

このisValidNumber関数、ちょっと賢いでしょ?isNaNだけじゃなくて、typeofも使って二重チェックしているんです。これなら「文字列の数字」も弾けるし、NaN(Not a Number)も見逃しません。

覚えておいてほしいのは、isNaNは便利だけど、それだけを信じ切らないこと。他の方法と組み合わせて使うのが、上級者へのステップアップのコツです!

typeofオペレータによる変数型判定の手順と利点

さて、次はtypeofオペレータについて話しましょう。これ、変数の型を教えてくれる便利なやつなんです。数値判定だけじゃなくて、いろんな場面で重宝しますよ。

使い方はこんな感じ:

console.log(typeof 42);  // "number"
console.log(typeof "42");  // "string"
console.log(typeof true);  // "boolean"

見た目はシンプルでしょ?でも、これがかなり強力なんです。特に数値判定では、isNaNよりも直感的に使えるメリットがあります。

ただし、typeofにも注意点があります。例えば:

console.log(typeof NaN);  // "number"
console.log(typeof Infinity);  // "number"

NaNやInfinityも”number”として判定されちゃうんです。これって、ちょっと意外かもしれません。

だから、完璧な数値判定をしたいときは、typeofだけじゃなくて他の方法と組み合わせるのがおすすめです。例えば、こんな感じ:

function isRealNumber(value) {
  return typeof value === 'number' && isFinite(value);
}

console.log(isRealNumber(42));  // true
console.log(isRealNumber(NaN));  // false
console.log(isRealNumber(Infinity));  // false

このisRealNumber関数、なかなかのやり手でしょ?typeofで数値型かチェックした上で、isFinite()で有限数かどうかも確認しているんです。これなら、NaNやInfinityも見逃しません。

typeofは簡単に使えるけど、その特性をよく理解して使うことが大切。それができれば、数値判定の達人への道も近いですよ!

typeofを用いた数値判定の具体的なコード例と解説

typeofを使った数値判定、もう少し具体的な例を見てみましょう。実際のコーディングでどう使うのか、イメージがわくはずです。

例えば、ユーザーから入力を受け取って、それが数値かどうかをチェックする関数を作ってみましょう:

function validateUserInput(input) {
  if (typeof input === 'number') {
    return "有効な数値です!";
  } else if (typeof input === 'string' && !isNaN(Number(input))) {
    return "文字列ですが、有効な数値に変換できます。";
  } else {
    return "これは数値として扱えません。";
  }
}

console.log(validateUserInput(42));  // "有効な数値です!"
console.log(validateUserInput("42"));  // "文字列ですが、有効な数値に変換できます。"
console.log(validateUserInput("四十二"));  // "これは数値として扱えません。"

この関数、なかなか賢いでしょ?まずtypeofで型をチェックして、数値ならOK。文字列の場合は、さらにNumber()で変換を試みて、isNaNで判定しています。

これを使えば、フォームの入力チェックなんかもバッチリ。ユーザーが入力した値が本当に数値として使えるのか、きちんと判断できますよ。

でも、ここでちょっと注意。JavaScriptの数値型は、整数も小数も全部「number」なんです。だから、整数だけを許可したいときは、さらに一工夫必要になります:

function isInteger(value) {
  return typeof value === 'number' && Number.isInteger(value);
}

console.log(isInteger(42));  // true
console.log(isInteger(42.0));  // true
console.log(isInteger(42.5));  // false

このisInteger関数、typeofNumber.isInteger()を組み合わせて使っているんです。これなら、小数点以下がある数値はしっかり弾けます。

typeofは本当に便利なツールですが、それだけで完璧な判定はできません。他の方法と組み合わせて使うことで、より堅牢な数値判定ができるんです。プログラミングって、そういう工夫の積み重ねなんですよ。楽しいでしょ?

高度な数値判定テクニック:Number.isFinite()とNumber.isInteger()の活用法

さて、ここからは少し発展的な内容に入ります。JavaScriptには、より精密な数値判定を行うためのメソッドがあるんです。具体的には、Number.isFinite()とNumber.isInteger()です。これらを使いこなせれば、数値判定の精度がグッと上がります。初心者の方にはちょっと難しく感じるかもしれませんが、基本を押さえればそれほど複雑ではありません。一緒に見ていきましょう。

Number.isFinite()を使った有限数の判定方法とユースケース

Number.isFinite()、ちょっと難しそうな名前ですよね。でも、実は「この数値って有限?」って聞いているだけなんです。infinite(無限)の反対、finiteが「有限」ってことですね。

使い方はこんな感じ:

console.log(Number.isFinite(42));  // true
console.log(Number.isFinite(Infinity));  // false
console.log(Number.isFinite(-Infinity));  // false
console.log(Number.isFinite(NaN));  // false

見てわかる通り、普通の数値ならtrueを返しますが、InfinityやNaNにはfalseを返します。これ、すごく便利なんです。

例えば、計算結果が正常かどうかをチェックするのに使えます:

function safeDivide(a, b) {
  const result = a / b;
  if (Number.isFinite(result)) {
    return result;
  } else {
    return "計算できません";
  }
}

console.log(safeDivide(10, 2));  // 5
console.log(safeDivide(10, 0));  // "計算できません"

このsafeDivide関数、0で割ったときにエラーにならずに「計算できません」って教えてくれます。Number.isFinite()を使うことで、簡単に異常な計算結果を検出できるんです。

でも、ちょっと注意が必要です。Number.isFinite()は、引数を数値に変換しようとしないんです。だから:

console.log(Number.isFinite("42"));  // false

文字列の”42″はfalseになっちゃいます。これって、isFinite()という古い関数とは違う動きなんです。

Number.isFinite()とisFinite()の違いと適切な使い分け

さて、ここで少し混乱するかもしれません。JavaScriptにはNumber.isFinite()の他にisFinite()という関数もあるんです。似てるけど、実は挙動が違うんですよ。

まず、isFinite()を見てみましょう:

console.log(isFinite(42));  // true
console.log(isFinite("42"));  // true
console.log(isFinite(null));  // true

おや?文字列の”42″やnullまでtrueになってますね。これはisFinite()が引数を数値に変換しようとするからなんです。

一方、Number.isFinite()はもっと厳密です:

console.log(Number.isFinite(42));  // true
console.log(Number.isFinite("42"));  // false
console.log(Number.isFinite(null));  // false

文字列やnullは容赦なくfalseです。数値以外は全部はじいちゃいます。

じゃあ、どっちを使えばいいの?って思いますよね。実は、場面によって使い分けるのがベストなんです。

例えば、ユーザー入力をチェックする場合:

function validateInput(input) {
  if (isFinite(input)) {
    return "有効な入力です(数値に変換可能)";
  } else {
    return "無効な入力です";
  }
}

console.log(validateInput("42"));  // "有効な入力です(数値に変換可能)"
console.log(validateInput("abc"));  // "無効な入力です"

この場合、isFinite()を使うことで、文字列の数値もOKとしています。

一方、厳密に数値のみを扱いたい場合はNumber.isFinite()が適しています:

function strictlyNumber(value) {
  if (Number.isFinite(value)) {
    return "これは有限の数値です";
  } else {
    return "これは数値ではないか、無限大です";
  }
}

console.log(strictlyNumber(42));  // "これは有限の数値です"
console.log(strictlyNumber("42"));  // "これは数値ではないか、無限大です"

このように、目的に応じて使い分けることが大切です。Number.isFinite()は厳密さが求められる場面で、isFinite()は少し緩めの判定が必要なときに使う、覚えておくといいですよ。

プログラミングって、こういう細かな違いを理解して使いこなすのが醍醐味なんです。難しく感じるかもしれませんが、使っているうちに自然と身についていきますよ。頑張ってマスターしちゃいましょう!

Number.isInteger()による整数判定の実装とパフォーマンス考察

さて、次はNumber.isInteger()についてお話しましょう。これ、整数かどうかを判定するためのメソッドなんです。単純そうに見えて、実はかなり便利な機能なんですよ。

Number.isInteger()は、その名の通り、与えられた値が整数かどうかをチェックします。使い方はこんな感じ:

console.log(Number.isInteger(42));  // true
console.log(Number.isInteger(42.0));  // true
console.log(Number.isInteger(42.5));  // false
console.log(Number.isInteger("42"));  // false

見てわかる通り、42も42.0も整数として認識されます。でも42.5や文字列の”42″は整数じゃないとされるんです。

これ、どんな時に使えるか想像つきますか?例えば、年齢を入力してもらうフォームがあったとします。そこで小数点以下の数値や文字列を弾きたい。そんな時にピッタリなんです。

function validateAge(age) {
  if (Number.isInteger(age) && age > 0) {
    return "有効な年齢です";
  } else {
    return "無効な年齢です。正の整数を入力してください";
  }
}

console.log(validateAge(25));  // "有効な年齢です"
console.log(validateAge(25.5));  // "無効な年齢です。正の整数を入力してください"
console.log(validateAge("25"));  // "無効な年齢です。正の整数を入力してください"

このvalidateAge関数、Number.isInteger()を使って整数かどうかをチェックした上で、0より大きいかも確認しています。これなら、確実に正の整数の年齢だけを受け付けられますね。

でも、ここで気をつけたいのが、Number.isInteger()は非常に大きな数や小さな数に対しても正確に動作するという点です。例えば:

console.log(Number.isInteger(9007199254740991));  // true
console.log(Number.isInteger(9007199254740992));  // true(これは実際には正確ではありません)

9007199254740991は、JavaScriptで正確に表現できる最大の整数(Number.MAX_SAFE_INTEGER)です。それより大きな数になると、JavaScriptの数値の精度限界により、整数として正確に表現できなくなります。でも、Number.isInteger()はそれを検出できないんです。

だから、非常に大きな数を扱う場合は、追加のチェックが必要になることがあります:

function isSafeInteger(n) {
  return Number.isInteger(n) && Math.abs(n) <= Number.MAX_SAFE_INTEGER;
}

console.log(isSafeInteger(9007199254740991));  // true
console.log(isSafeInteger(9007199254740992));  // false

このisSafeInteger関数なら、JavaScriptで安全に扱える範囲の整数かどうかをチェックできます。

Number.isInteger()を用いた整数チェックの実践的なコード例

では、Number.isInteger()を使った、もう少し実践的なコード例を見てみましょう。例えば、配列の中から整数だけを抽出する関数を作ってみます:

function filterIntegers(arr) {
  return arr.filter(Number.isInteger);
}

const mixedArray = [1, 2.5, 3, "4", 5.0, null, 6, 7.7, 8];
console.log(filterIntegers(mixedArray));  // [1, 3, 5, 6, 8]

このfilterIntegers関数、シンプルなのに強力でしょ?Number.isInteger()filterメソッドのコールバック関数として直接使っているんです。これで、配列の中から整数だけをサクッと取り出せます。

もう一つ、例を見てみましょう。今度は、オブジェクトの中から整数のプロパティだけを取り出す関数です:

function getIntegerProperties(obj) {
  return Object.entries(obj)
    .filter(([key, value]) => Number.isInteger(value))
    .reduce((acc, [key, value]) => {
      acc[key] = value;
      return acc;
    }, {});
}

const myObj = {
  a: 1,
  b: 2.5,
  c: "3",
  d: 4,
  e: null
};

console.log(getIntegerProperties(myObj));  // { a: 1, d: 4 }

この関数、ちょっと複雑に見えるかもしれませんが、やっていることは単純です。オブジェクトのエントリーを配列に変換し、値が整数のものだけをフィルタリングして、新しいオブジェクトを作っているんです。

こういった使い方ができるのも、Number.isInteger()が単純で使いやすいメソッドだからなんです。

最後に、パフォーマンスについて少し触れておきましょう。Number.isInteger()は、内部的にはとてもシンプルな実装になっています。だから、大量のデータを処理する場合でも、比較的高速に動作します。例えば、100万個の要素を持つ配列から整数だけを抽出する、なんてケースでも問題なく使えるはずです。

ただし、先ほども言ったように、非常に大きな数や小さな数を扱う場合は注意が必要です。そういった場合は、追加のチェックを行うことで処理が少し遅くなる可能性があります。でも、通常の使用では気にするほどの差はないでしょう。

Number.isInteger()、奥が深いけど使いやすいメソッドですよね。整数に関する処理を書くときは、ぜひ活用してみてください。きっと、コードがすっきりして読みやすくなるはずです。

エッジケースに対応する:特殊な数値の判定テクニック

さて、ここまでの話を踏まえた上で、もう一歩進んでみましょう。プログラミングをしていると、時々「えっ、こんなケースもあるの?」っていう特殊なケースに出くわすことがあります。そういうケースのことを「エッジケース」って呼ぶんですよ。

数値判定の世界にも、そういうエッジケースがあります。例えば、無限大(Infinity)や非数(NaN)なんかがそうですね。これらは一筋縄ではいかない厄介者なんです。でも大丈夫、一緒に対策を考えていきましょう。

無限大(Infinity)と非数(NaN)の効果的な判定方法

まず、無限大(Infinity)について。JavaScriptでは、無限大も数値型として扱われるんです。でも、普通の数値とは違う特別な存在ですよね。

console.log(typeof Infinity);  // "number"
console.log(isFinite(Infinity));  // false
console.log(Number.isFinite(Infinity));  // false

見てのとおり、typeofでは”number”と判定されますが、isFinite()Number.isFinite()ではfalseになります。

じゃあ、Infinityを判定するにはどうすればいいでしょうか?実は、単純な比較で判定できるんです:

function isInfinity(value) {
  return value === Infinity || value === -Infinity;
}

console.log(isInfinity(Infinity));  // true
console.log(isInfinity(-Infinity));  // true
console.log(isInfinity(42));  // false

このisInfinity関数、シンプルですが効果的です。正と負の無限大をしっかり判定できます。

次に、非数(NaN)について。これがまた厄介者なんです。NaNの特徴は、自分自身とも等しくないこと。

console.log(NaN === NaN);  // false

そう、NaNは自分自身とすら等しくないんです。だから、普通の比較では判定できません。

でも、心配いりません。NaNを判定する方法はちゃんとあります:

function isNaN(value) {
  return Number.isNaN(value);
}

console.log(isNaN(NaN));  // true
console.log(isNaN("NaN"));  // false
console.log(isNaN(42));  // false

ここで使っているNumber.isNaN()は、グローバル関数のisNaN()とは違って、引数を数値に変換しようとしません。だから、より安全にNaNを判定できるんです。

これらの特殊な数値、プログラムの中で思わぬバグの原因になることがあります。例えば、こんな関数を考えてみましょう:

function calculateAverage(numbers) {
  const sum = numbers.reduce((acc, num) => acc + num, 0);
  return sum / numbers.length;
}

console.log(calculateAverage([1, 2, 3]));  // 2
console.log(calculateAverage([1, 2, Infinity]));  // Infinity
console.log(calculateAverage([1, 2, NaN]));  // NaN

最後の2つの結果、予想外だったかもしれません。でも、InfinityやNaNが紛れ込むと、こんな結果になっちゃうんです。

だから、こういうケースに備えて、入力値をチェックする関数を作っておくといいでしょう:

function safeCalculateAverage(numbers) {
  const validNumbers = numbers.filter(num => Number.isFinite(num));
  if (validNumbers.length === 0) {
    return "計算できません";
  }
  const sum = validNumbers.reduce((acc, num) => acc + num, 0);
  return sum / validNumbers.length;
}

console.log(safeCalculateAverage([1, 2, 3]));  // 2
console.log(safeCalculateAverage([1, 2, Infinity]));  // 1.5
console.log(safeCalculateAverage([1, 2, NaN]));  // 1.5

このsafeCalculateAverage関数、賢いでしょ?InfinityやNaNを除外して、有効な数値だけで平均を計算してくれます。

エッジケースへの対応、最初は面倒くさく感じるかもしれません。でも、こういった細かい配慮が、信頼性の高いプログラムを作る秘訣なんです。少しずつでいいので、こういった技を身につけていってくださいね。

Object.is()を使った厳密な数値比較の実装テクニック

さて、ここでもう一つ、面白いメソッドを紹介しましょう。Object.is()というメソッドです。これ、二つの値が同じかどうかを厳密に比較してくれるんです。

普通の等価演算子(==)や厳密等価演算子(===)とは少し違う動きをするんですよ。特に、NaNや+0と-0の比較で威力を発揮します。

console.log(Object.is(NaN, NaN));  // true
console.log(NaN === NaN);  // false

console.log(Object.is(0, -0));  // false
console.log(0 === -0);  // true

console.log(Object.is(42, 42));  // true
console.log(Object.is(42, "42"));  // false

面白いでしょ?NaNの比較ではtrueを返すし、+0と-0を区別してくれます。

このObject.is()を使って、より厳密な数値比較関数を作ることができます:

function strictNumberCompare(a, b) {
  if (!Number.isFinite(a) || !Number.isFinite(b)) {
    return Object.is(a, b);
  }
  return Math.abs(a - b) < Number.EPSILON;
}

console.log(strictNumberCompare(0, -0));  // false
console.log(strictNumberCompare(NaN, NaN));  // true
console.log(strictNumberCompare(0.1 + 0.2, 0.3));  // true

このstrictNumberCompare関数、かなりの優れものです。InfinityやNaNも正しく比較できるし、浮動小数点数の誤差も考慮してくれます。

ここで使っているNumber.EPSILONは、1と、1より大きい最小の浮動小数点数との差です。これを使うことで、浮動小数点数の計算誤差を吸収できるんです。

例えば、0.1 + 0.2の結果は、厳密には0.3にはなりません。でも、この関数を使えば「十分に近い」と判断してくれるんです。

こういった細かい違いを理解して使いこなせるようになると、より堅牢なプログラムが書けるようになります。一朝一夕には身につきませんが、少しずつ覚えていけば大丈夫。プログラミングって、そういう小さな発見の積み重ねが楽しいんですよ。

文字列型の数値を適切に判定するためのパースとバリデーション手法

最後に、もう一つ重要なトピックを取り上げましょう。文字列型の数値の扱い方です。ユーザー入力やファイルから読み込んだデータなど、文字列として表現された数値を扱うことは多いですよね。

文字列型の数値、一見単純そうに見えて、実はいろいろな落とし穴があるんです。例えば、”42″は簡単に数値に変換できそうですが、”4.2″や”1e3″、”0xFF”なんかはどうでしょう?さらに、”123”(全角数字)や”二十三”(漢数字)なんてのもありえますよね。

まずは、基本的なパース(構文解析)方法から見ていきましょう:

console.log(parseInt("42"));  // 42
console.log(parseFloat("4.2"));  // 4.2
console.log(Number("1e3"));  // 1000

parseIntparseFloatNumberを使えば、多くの場合は問題なく数値に変換できます。でも、注意点もあります:

console.log(parseInt("08"));  // 8 (ES5以降。それ以前は0)
console.log(parseInt("0xFF"));  // 255
console.log(Number("0xFF"));  // 255

parseIntは文字列の先頭から解析を始めて、数値として解釈できなくなったところで止まります。だから、”42px”のような文字列でも”42″の部分だけを数値として解釈します。

一方、Numberはより厳密で、文字列全体が有効な数値表現でない場合はNaNを返します:

console.log(parseInt("42px"));  // 42
console.log(Number("42px"));  // NaN

これらの特性を理解した上で、適切な方法を選ぶことが大切です。例えば、こんな関数を作ってみるのはどうでしょう:

function parseNumericString(str) {
  if (typeof str !== 'string') return NaN;

  // 全角数字を半角に変換
  str = str.replace(/[0-9]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
  });

  if (/^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/.test(str)) {
    return Number(str);
  } else if (/^[-+]?0x[0-9a-fA-F]+$/.test(str)) {
    return parseInt(str, 16);
  } else {
    return NaN;
  }
}

console.log(parseNumericString("42"));  // 42
console.log(parseNumericString("4.2"));  // 4.2
console.log(parseNumericString("1e3"));  // 1000
console.log(parseNumericString("0xFF"));  // 255
console.log(parseNumericString("42"));  // 42
console.log(parseNumericString("42px"));  // NaN

このparseNumericString関数、なかなかの優れものでしょ?全角数字を半角に変換した上で、10進数、16進数、指数表記などさまざまな形式の数値を適切に解析してくれます。

でも、これでもまだ完璧じゃありません。例えば、カンマ区切りの数値(”1,000,000″)や、通貨記号付きの数値(”$1000″)なんかは対応できていませんね。

実際のアプリケーションでは、想定される入力形式に応じて、さらに複雑な解析ロジックが必要になることもあります。例えば:

function parseCurrency(str) {
  if (typeof str !== 'string') return NaN;

  // 通貨記号と桁区切りのカンマを除去
  str = str.replace(/[^\d.-]/g, '');

  return parseFloat(str);
}

console.log(parseCurrency("$1,234.56"));  // 1234.56
console.log(parseCurrency("1,234.56円"));  // 1234.56

こういった関数を作っておくと、ユーザー入力のバリデーションがグッと楽になります。

parseInt()とparseFloat()を用いた文字列からの数値変換と判定の実践

さて、ここまで来たら、もう一歩踏み込んで、より実践的な例を見てみましょう。例えば、フォームから送信されたデータを処理する関数を考えてみます:

function processFormData(formData) {
  const processedData = {};

  for (const [key, value] of Object.entries(formData)) {
    if (value === '') {
      processedData[key] = null;
    } else if (!isNaN(parseFloat(value)) && isFinite(value)) {
      processedData[key] = parseFloat(value);
    } else {
      processedData[key] = value;
    }
  }

  return processedData;
}

const formData = {
  name: "John Doe",
  age: "30",
  height: "175.5",
  weight: "70kg",
  score: "1e3",
  empty: ""
};

console.log(processFormData(formData));
// {
//   name: "John Doe",
//   age: 30,
//   height: 175.5,
//   weight: "70kg",
//   score: 1000,
//   empty: null
// }

このprocessFormData関数、なかなか賢いでしょ?文字列を適切に数値に変換しつつ、変換できないものはそのまま文字列として残しています。空文字列はnullに変換しているのもポイントです。

ここではparseFloatisFiniteを組み合わせて使っています。parseFloatで数値に変換を試み、その結果が有限数かどうかをisFiniteでチェックしているんです。これによって、”30″や”175.5″、”1e3″のような文字列は数値に変換されますが、”70kg”のような文字列は変換されずにそのまま残ります。

こういった関数を作っておくと、フォームデータの処理がグッと楽になりますよ。

最後に、ちょっとしたヒントを。文字列の数値判定や変換は、想像以上に複雑になることがあります。例えば、国際化対応を考えると、小数点や桁区切りの記号が国によって違ったりします(”1,234.56″ vs “1.234,56”)。そういった場合は、Intl.NumberFormatを使うのも一つの手です:

function parseLocaleNumber(stringNumber, locale) {
  const thousandSeparator = Intl.NumberFormat(locale).format(11111).replace(/\p{Number}/gu, '');
  const decimalSeparator = Intl.NumberFormat(locale).format(1.1).replace(/\p{Number}/gu, '');

  return parseFloat(stringNumber
    .replace(new RegExp('\\' + thousandSeparator, 'g'), '')
    .replace(new RegExp('\\' + decimalSeparator), '.')
  );
}

console.log(parseLocaleNumber('1,234.56', 'en-US'));  // 1234.56
console.log(parseLocaleNumber('1.234,56', 'de-DE'));  // 1234.56

こういった細かい配慮が、国際的に使えるアプリケーションを作る鍵になるんです。

数値判定、特に文字列からの変換は奥が深いですね。でも、基本をしっかり押さえて、少しずつ応用していけば、どんな複雑なケースにも対応できるようになります。頑張ってマスターしていきましょう!

「#javascript」人気ブログランキング
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次