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

vueに関する小ネタ(computed、v-classなど)

先日は埋め込み形式で、vueを書いてましたが、その時に新たな気づいた小ネタなど。 Contents1 computed2 v-class3 ajaxのasync:false computed 主に、v …

no image

bowerのインストール

業務でAngularJSをいじっていますが、そこでbowerというソフトウェアの存在を知りました。 Contents1 bowerとは?2 インストール方法 bowerとは? フロントエンドのパッケー …

no image

dataTableによる無限スクロール

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

no image

JavaScriptのトランスパイルについて

今回はJavaScriptのトランスパイルについて。 JavaSciprtではwebpackでコンパイルなどをする時に同時にトランスパイルという処理を行います。 トランスパイルとは? 主にES2015 …

no image

vueの環境構築

vueについて勉強したことなどを。 Contents1 vueとは?1.1 方法1 CDN1.2 方法2 npm+コンパイル vueとは? 近年のJavaScriptフレームワークの一種で「双方向デー …

アーカイブ