Javascriptでカンマの入った数字から数字だけを取り出す。

2024年2月6日

先日Javascriptで金額の合計を計算するスクリプトを作成していました。
単純な足し算なので、計算自体は簡単です。
ただ金額にはカンマ（,）が付随するため、そのままだと計算できません。
なぜならば、Javscirptで数字以外の文字列が混ざった足し算は、文字結合になるためです。

Javascriptで計算するには、数字だけ抽出する必要があります。
どのようにやれば実現できるのかググって調べました。

今回やりたいこと

Javascriptでカンマ付きの金額をカンマなしに変換する。

例）
123,456　を　123456　に変換する

数字以外の文字が混ざっている場合、javascriptでは計算ができません。
計算するためには、数字以外の文字列を除外する必要があります。

javascriptで数字以外を除外する方法

特定文字列を削除する方法は、どのような言語でも「置換」で行います。
replace処理です。

replace処理を実行することで数字だけを抽出できます。
やり方は次の通りです。

上記の結果は「123456」とカンマが取れた状態で値を取得できます。

疑問：.replace()って何?

Javascriptでは、関数を変数につけて呼び出します。
PHP等と比べても独自性の強い仕様のため、記述方法について戸惑いやすいです。
ただ、変数に関数をくっつけるということを知っていれば違和感はなくなります。

疑問：/[^0-9]/g って何？

これは正規表現になります。
意味的には数字以外の文字を探すという意味になります。
各記号の意味は次の通りです。

//の意味

検索するという意味になります。
/と/の間に検索条件を記述し、その内容について検索します。

g の意味

/　/g の「g」は、文字列すべてを検索するという意味になります。
gがない場合は、最初に見つかるまでという意味になります。
今回のケースでは、すべてのカンマを置換したいので、gをつけています。

[] の意味

[]の中に記載されている一文字と一致する場合「真」という意味になります。
[0-9]だと、数字の0～9に一致する場合「真」という意味になります。

[^] の意味

＾は通常だと先頭からという意味ですが、[　]の中の場合否定という意味になります。
[^0-9]は、数字でない場合「真」という意味になります。

これらの意味を組み合わせて、数字でないものを検索しています。

JavascriptもPHPも正規表現で検索する部分は同じ

過去の記事を調べたところ、PHPで郵便番号からハイフンを除外するというものがありました。

PHPで郵便番号のハイフンがあってもなくてもハイフンありに変換する

検索手法は全く同じで、違いはPHPかJavascriptかの違いでした。
正規表現は、一見わかりにくいですが知っていると様々な言語で応用ができます。

本記事がまたお役に立てば幸いです。