skillup

技術ブログ

JavaScript

JSでの金額変換で気をつけることなど

投稿日:2020年4月18日 更新日:

以前、ちょっと特集した

JSでの画面の金額集計

の続きです。

画面で帳票系のアプリを作ろうとしている時など、画面上の値から金額の合計金額を出すなどがよく見られます。

すごく基本的ですが、PHPに慣れていると意外とJSのこういうところでハマったりするので自戒の意味も込めてメモしておこうかと。

文字列と数値の違い

PHPが例外なのですが、一般のプログラミング言語では文字列と数字を使い分けることが一般的です。

非常に基本的なことですが、PHPにずっと慣れているとついつい忘れてしまい

"1"+"2" のようなことをやってしまいます。

下記のように文字の場合では単純に値を繋げることになってしまい、数値に変換しないと正常な計算はできないので注意しましょう。

そのほかにも金額計算の場合、

カンマ除去の処理の場合、実は数字に対して

などの処理をすると落ちてしまいます。

型が数字か文字列化をしっかりと判定しましょう。

parseIntの前提条件に要注意

例えば文字列を数値に変換する場合、

  • 空白
  • undefined
  • null
  • 全角文字

などは全てNaNになります。

ですので、parseIntする場合はこれらの値でないかどうか(あるいは変換をかける)処理をしっかりと入れるようにしましょう。

NaNに関して

JSの場合、数値変換する前にNaNでの判定をしておく必要があります。

例を列挙しておくと、

になります。一般的には isNaN == false の判定をして、数値変換することになりますが、nullや””でもNaNになりますし、当然parseIntしてもうまく数値にならないので気をつけましょう。

まとめると

数値文字の変換では

  • 不必要な文字の除去
  • 全角から半角への変換
  • 数値変換可能な文字列群かどうかの確認

を行い、そこから変換するようにしましょう。

あるいは上記のリンクで紹介したライブラリなどを使うようにしましょう。

またPHPでもそうですが0と空白の違いに敏感になりましょう。

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …

no image

非同期通信のまとめ($.ajax,fetch,axiosなど)

非同期通信処理に関して、年明けに少し調べたのでメモします。 非同期通信に関しては長い間、$.ajaxを使っておりました。 フロント側でそれほど複雑な処理をやらなかった、昔覚えたのでそのまま・・ってパタ …

no image

webpackについて再履修2

以前やったこの記事への追記的な意味で。 webpackについて再履修 Contents1 webpack-cli2 gulp-webpackは非推奨3 devtoolでデバッグ可能 webpack-c …

no image

cssフレームワークをnode_modulesから読み込む+cssの拡張

JavaScriptを1ファイルでまとめて読み込める方法が分かったので(参考リンク npmでのJSライブラリインストール)、CSSでも似たような方法があったのでメモ。 流れを言うと、下記のようになりま …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …