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

npmでのjQueryライブラリの読み込み+datepickerメモ

npm経由でjQueryやDatepickerなど一般的なライブラリをrequireしてビルドする手法について。 以前も下記エントリーで書きましたが、再学習。 npmでのJSライブラリインストール&ビ …

no image

webpackについて再履修2

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

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

Angularでのfilter

今回はAnuglarでよく使うfilterという機能です。 使いどころとしては入力フォームに対応させて表示項目を絞る、みたいな使い方が一般的かと思います。 一番簡単なものとしては配列があり、入力値にあ …

no image

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

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

アーカイブ