以前、ちょっと特集した
の続きです。
画面で帳票系のアプリを作ろうとしている時など、画面上の値から金額の合計金額を出すなどがよく見られます。
すごく基本的ですが、PHPに慣れていると意外とJSのこういうところでハマったりするので自戒の意味も込めてメモしておこうかと。
文字列と数値の違い
PHPが例外なのですが、一般のプログラミング言語では文字列と数字を使い分けることが一般的です。
非常に基本的なことですが、PHPにずっと慣れているとついつい忘れてしまい
"1"+"2" のようなことをやってしまいます。
下記のように文字の場合では単純に値を繋げることになってしまい、数値に変換しないと正常な計算はできないので注意しましょう。
|
1 2 3 |
console.log(1 + '0') //10 console.log(1 + '2') //12 console.log("1" + "2") //12 |
そのほかにも金額計算の場合、
カンマ除去の処理の場合、実は数字に対して
|
1 |
str.replace(/¥/g,''); |
などの処理をすると落ちてしまいます。
型が数字か文字列化をしっかりと判定しましょう。
parseIntの前提条件に要注意
例えば文字列を数値に変換する場合、
- 空白
- undefined
- null
- 全角文字
などは全てNaNになります。
ですので、parseIntする場合はこれらの値でないかどうか(あるいは変換をかける)処理をしっかりと入れるようにしましょう。
NaNに関して
JSの場合、数値変換する前にNaNでの判定をしておく必要があります。
例を列挙しておくと、
|
1 2 3 4 5 6 7 |
a:true 1(純粋な数字):false 2(半角文字列):false ２(全角):true null:false "":false undefined:true |
になります。一般的には isNaN == false の判定をして、数値変換することになりますが、nullや””でもNaNになりますし、当然parseIntしてもうまく数値にならないので気をつけましょう。
まとめると
数値文字の変換では
- 不必要な文字の除去
- 全角から半角への変換
- 数値変換可能な文字列群かどうかの確認
を行い、そこから変換するようにしましょう。
あるいは上記のリンクで紹介したライブラリなどを使うようにしましょう。
またPHPでもそうですが０と空白の違いに敏感になりましょう。
