【JavaScript】文字列に埋め込まれた数値をすべて抽出する関数の作り方

JavaScriptには、文字列を数値に変換するparseInt()やparseFloat()といった標準関数が用意されています。しかし、これらのメソッドには弱点があります。数値が文字列の途中に埋め込まれている場合、先頭の連続した数字しか取得できません。

例えば、次のコードは「454」しか返しません。本来であれば「4545453」を取得したいところです。

parseInt('454ffdg54hg53')

そこで本記事では、数字と文字が混在する文字列を受け取り、含まれるすべての数字を順に結合した数値を返すJavaScript関数を作成します。

実装例

以下がそのコードです。

const numStr = '454ffdg54hg53';
const parseInteger = numStr => {
    let res = 0;
    for(let i = 0; i < numStr.length; i++){
        if(!+numStr[i]){
            continue;
        };
        res = (res * 10) + (+numStr[i]);
    };
    return res;
};
console.log(parseInteger(numStr));

この関数の仕組みは次のとおりです。

• 文字列を1文字ずつ走査し、単項プラス演算子（+）で各文字を数値に変換します。
• 変換結果が0（数字以外の文字）であればcontinueでスキップします。
• 数字であれば「res * 10 + 現在の数字」とすることで、桁をずらしながら結果を蓄積していきます。

なお、この実装では数字の「0」もスキップされる点に注意してください。0を正しく扱いたい場合は、isNaN(+numStr[i])で判定するように変更するとよいでしょう。

出力結果

コンソールには次のように出力されます。

4545453

補足：正規表現を使ったより簡潔な方法

実務では、正規表現を使うとより簡潔に記述できます。数字以外の文字（\D）をすべて取り除くだけで、同じ結果が得られます。

const numStr = '454ffdg54hg53';
const result = +numStr.replace(/\D/g, '');
console.log(result); // 4545453

状況に応じてループ処理と正規表現を使い分けることで、可読性と保守性の高いコードを実現できます。