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

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

モジュールバンドラparcelについて

現在のフロントエンドだと、es6以降の書き方が主流になっていることもあり、一度慣れてしまうとなかなか戻れない便利さがあります。 私の場合、設定が面倒だったり、Chromeではトランスパイルしなくても動 …

no image

vue-routerについて

vueでのルーティングに関して。 Vueの場合、いわゆるSPA(シングルページアプリケーション)という用途で使われることがあると思います。 ただその場合でも擬似的なルーティング(URLの切り替えなどに …

no image

dataTableによる無限スクロール

Angularで無限スクロールをやったので一般のjqueryで。 dataTablesというプラグインです。 以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。 ページャ …