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

jQuery子要素の取得方法など

jQueryで要素を取得する方法って$(“セレクタ”)しか知らなかったんですが、他にもいろいろあることがわかったのでちょっと紹介。 例えばtrの列の中に横1列に<inpu …

no image

Angularでのfilter

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

no image

vueでのコンポーネント間の変数のやりとりに関して

vueをコツコツと勉強していますが、コンポーネント間で変数の受け渡しをしたいときなどは色々注意が必要かと思います。 個人的には下記のような解釈で組んでおります。 Contents1 vuex2 syn …

no image

JSでの画面の金額集計

主に金額などを画面で計算するような請求関係のアプリを作っていますと、JSを駆使して集計作業をすることが多いのではないかと思います。 ようはテーブルみたいなものがあり、それを集計するようなパターンです。 …

no image

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …

アーカイブ