JavaScriptで文字列に含まれる数字を抽出して数値として返す方法

JavaScriptでは、文章の中に数字が埋め込まれている文字列を扱う場面に出会うことがあります。本記事では、文字列を受け取ってその中の数字だけをすべて抜き出し、ひとつの数値として返す関数の実装方法を解説します。

要件

• 引数として文字列（数字が埋め込まれている可能性がある）を受け取る
• 文字列内の数字をすべて抽出し、出現順に連結した数値を返す
• 数字が1つも含まれていない場合は 0 を返す

サンプルコード

const str = 'sfsd8fsdf6dsfsd8sdfs28fd0';

const pickNumbers = (str = '') => {
  let res = 0;
  for (let i = 0; i < str.length; i++) {
    const el = str[i];
    if (+el) {
      res = (res * 10) + +el;
    }
  }
  return res;
};

console.log(pickNumbers(str));
console.log(pickNumbers('this string contains no numbers'));

実行結果

86828
0

処理の解説

1. 結果を格納する変数 res を 0 で初期化します。
2. for ループで文字列を先頭から1文字ずつ走査します。
3. 単項プラス演算子 + で各文字を数値へ変換します。数字以外の文字は NaN になるため条件式が偽となり、スキップされます。
4. 数字だった場合には「これまでの結果 × 10 ＋ 新しい数字」を計算することで、桁を1つずつ追加していきます。

たとえば最初の数字 8 が見つかった時点で res は 8 になり、次の 6 では 8 × 10 + 6 = 86、さらにその後の 8 で 868 というように数値が組み上がり、最終的に 86828 が出力されます。数字を含まない文字列の場合は res が初期値のままなので 0 が返ります。

注意点：「0」が無視される挙動

この実装では if (+el) という条件を使っているため、文字 '0' は数値 0 に変換された時点で偽（falsy）と評価され、スキップされてしまいます。上記の出力で末尾の 0 が消えて 86828 になっているのはこのためです。「0 も正確に抽出したい」場合は、次のように判定を置き換えましょう。

if (!Number.isNaN(Number(el))) {
  res = res * 10 + Number(el);
}

正規表現を使ったより簡潔な書き方

ループを自前で書かなくても、正規表現と match() メソッドを組み合わせることで同じ処理を実現できます。

const pickNumbers = (str = '') => {
  const digits = str.match(/\d/g);
  return digits ? Number(digits.join('')) : 0;
};

/\d/g は 0〜9 の1文字に全体マッチするパターンです。match() はマッチした数字の配列を返すので、join('') で連結してから Number() で数値化します。数字が1つもなければ null が返るため、その場合は 0 を返します。こちらの方法であれば「0」も正しく抽出されます。

なお、非常に長い桁数の数字列を扱う場合は Number.MAX_SAFE_INTEGER（約9千兆）を超えて精度が失われる可能性がある点に留意してください。そのようなケースでは BigInt の利用や、文字列のまま扱うことを検討するとよいでしょう。