【PR】を含みます。

フロントエンド

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

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

この記事では、JavaScriptを使って文字列から数字のみを抽出する方法を3つ紹介します。

フロントエンドの業務で電話番号や金額の計算など、数字のみを取り出したいケースが時々に発生するため、抽出方法をまとめました。

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

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

実装コード

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

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

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

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

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

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

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

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

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

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

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

実装コード

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

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

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

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

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

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

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

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

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

実装コード

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

JavaSctipt
Copy
  1. const str = '商品コード: A123B456';
  2. let result = '';
  4. for (let i = 0; i < str.length; i++) {
  5.   if (/^[0-9]$/.test(str[i])) {
  6.     result += str[i];
  7.   }
  8. }
  10. console.log(result); // "123456"

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

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

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

udemyでJavaScriptを学ぶ

講座名
【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編） icon
学習時間
24.5時間
学習内容
  • 本格的なWEBサイトを作成する方法について学びます。
  • Sass（※以下CSSと記載）、JavaScriptの基礎について深く学びます。
  • CSS、JavaScriptの実践的な記述について深く学びます。
  • CSS、JavaScriptアニメーションの実装について学びます。
  • 最新の実践的なWEB画面の作成方法について深く学びます。
  • CSS、JavaScriptのコードの最適化、安定化について学びます。
  • 維持管理、持続可能なコードの記述方法について学びます。
対象受講者
  • ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
  • 他の先生のフロントエンドの入門編を終えたレベルの方
  • 自分で本格的なWEBサイトを作ってみたい方
  • CSS、JavaScriptの実践的な基礎を効率的に学びたい方
  • CSS、JavaScriptを今後仕事で使う予定の方
  • CSS、JavaScriptのコードの整理方法について学びたい方
  • CSS、JavaScriptのアニメーションを学びたい方
  • CSS、JavaScriptのレベルアップしたいWeb開発初級者の方
  • CSS、JavaScriptでどのようにすればレベルアップできるのか悩んでいる方
アイコン画像

もみじ

HTML・CSS・JavaScripの基礎的なことを理解しており、Webのフロントエンジニアを目指している方にオススメの講座です。

講座内容は実践で使用するものが多く、実務でも役立つ内容でした。

講座名
【JS】ガチで学びたい人のためのJavaScriptメカニズム icon
学習時間
20.5時間
学習内容
  • JavaScriptの動作原理について深く学びます。
  • JavaScriptがどのように実行されるのかについて深く学びます。
  • ES6+の最新のJavaScriptの記法について幅広く学びます。
  • 変数や参照の仕組みについて深く学びます。
  • オブジェクトのメカニズムについて深く学びます。
  • 関数のメカニズムについて深く学びます。
  • スコープの仕組みについて深く学びます。
  • プロトタイプのメカニズムについて深く学びます。
  • 反復処理のメカニズムについて深く学びます。
  • ジェネレーターやイテレーターについて深く学びます。
  • コールバック関数について深く学びます。
  • 非同期処理のメカニズムについて深く学びます。
  • モジュールの仕組みについて深く学びます。
  • クロージャーの仕組みについて深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • thisの仕組みについて深く学びます。
  • bind、apply、callの動作原理について深く学びます。
  • クラスと継承の仕組みについて深く学びます。
  • ReflectやProxyなどの強力なオブジェクトへの理解を深めます。
  • Map，Setなどの強力なコレクションについて実践を交えて学びます。
  • よく使用される強力な実装パターンを演習を交えて学びます。
  • 独自のフレームワークを構築していく中でJavaScriptのメカニズムについて理解を深めます。
対象受講者
  • JavaScriptをコアの動作原理からキチンと理解したい方。
  • 自分の思った通りコードが動かずに悩んでいる方。
  • 自分の思った通りに動かず、気付いたら解決するのに１日経ってしまっていた経験のある方。
  • React, Vue, Angularが使いこなせず悩んでいる方。
  • JavaScriptの不可解な動きが理解できず、苦しんでいる方。
  • 少し複雑なコードを書こうとすると、ぐちゃぐちゃになって整理しきれず、悩んでいる方。
  • JavaScriptを本気で勉強したいと思っている方。
  • JavaScriptの変態仕様に苦しんでいる方。
  • JavaScriptが苦手なプログラマーの方。
アイコン画像

もみじ

JavaScripの基礎的なことを理解しており、より深くJavaScriptについて理解したいという方にオススメの講座です。

初心者の方が一度の受講で全てを吸収するのは難しいですが、繰り返し受講することでフロントエンドの業務で役立つ知識を身に付けることができます。

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-フロントエンド
-