【PR】を含みます。

フロントエンド

【JavaScript】文字列から数字のみを取り出す方法3選

JavaScript 文字列から数字のみを取り出す方法3選

フロントエンド開発や日常のWeb制作では、「文字列から数字だけを抜き出したい」というシーンが意外とよくあります。

たとえば、金額や電話番号、会員IDなど、ユーザーが入力したテキストから数値情報だけを取得したい場合です。

本記事では「JavaScriptで文字列から数字のみを簡単に抽出する方法」を3つ、実践的なサンプルコード付きで紹介します。

作業効率を上げたい方や、より柔軟なデータ処理を目指す方はぜひ参考にしてください。

replace()メソッドと正規表現を使った方法

replace()メソッドと正規表現を使って、数字以外を空文字に置き換えることができます。

実装コード

\D（数字以外の文字）をすべて削除して、結果として数字のみが残ります。

カンマや通貨記号などを取り除きたいときに便利です。

JavaScript
Copy
const str = '金額: ¥1,234,567';
const onlyNumbers = str.replace(/\D/g, '');
console.log(onlyNumbers); // '1234567'

正規表現/\D/g部分は/[^0-9]/gに書き換え可能です。

JavaScript
Copy
const str = '金額: ¥1,234,567';
const onlyNumbers = str.replace(/[^0-9]/g, '');
console.log(onlyNumbers); // '1234567'

replace()メソッドと正規表現を使うメリット

  1. シンプルな記述
    不要な文字を一括で削除するため、コードがシンプルになります。

  2. 高速処理
    不要な部分を一気に置換するので、大量のデータでも効率よく処理できます。

  3. 余計な手間がかからない
    複数の操作を行わずに、簡潔に数字のみを取得したい場合に最適です。

match()メソッドと正規表現を使った方法

match()メソッドを使用すると、正規表現にマッチしたすべての数字部分を配列として取得できます。

実装コード

以下のコードでは、変数numbersに「090」、「1234」、「5678」という3つの数字の配列が返されます。

返された配列をjoin()メソッドを使って連結しています。

JavaScript
Copy
const str = '電話番号は090-1234-5678です';
const numbers = str.match(/\d+/g);
const concatenatedNumbers = numbers.join('');
console.log(concatenatedNumbers); // "09012345678"

match()メソッドと正規表現を使うメリット

  1. 配列で取得できる
    match()メソッドは、数字を部分ごとに配列形式で返すため、個別の数字にアクセスしたり、特定の数字だけを操作することが可能です。

  2. 効率的な操作
    配列形式のため、forEachやmapなどの配列メソッドを活用し、各要素に対して柔軟な操作が可能です。

  3. 部分的な利用が容易
    例えば、電話番号やIDなど、複数の部分に分かれた数字を取得したい場合、各部分をそのまま配列として管理することができます。

ループと条件分岐を使った方法

文字列を1文字ずつ確認し、数字だけを取り出す方法です。

実装コード

以下のコードは、文字列内の各文字をチェックし、数字であれば変数resultに文字列を追加しています。

JavaScript
Copy
const str = '商品コード: A123B456';
let result = '';
for (let i = 0; i < str.length; i++) {
  if (/^[0-9]$/.test(str[i])) {
    result += str[i];
  }
}
console.log(result); // "123456"

ループと条件分岐を使うメリット

  1. 細かい制御が可能
    文字列を1文字ずつ確認できるため、特定の条件に応じて数字を抽出したり無視したりすることが可能です。

  2. 複雑な条件に対応可能
    例えば、数字の前後に特定の文字がある場合など、複雑なロジックを加えることができます。

まとめ

文字列から数字だけを抽出する方法は、正規表現の活用やループ処理などさまざまですが、用途や目的によって最適な手法は異なります。

シンプルに数字だけ欲しい場合はreplaceやmatch、複雑な条件で抽出したい場合はループと条件分岐が便利です。

ご紹介した3つの方法を使い分けることで、日々の開発やデータ処理がよりスムーズになるはずです。

ぜひご自身のシーンにあった方法を選んで活用してください。

-フロントエンド
-