JavaScriptでハマった件。「数値と文字列」やっぱり「数値と文字列」
こんにちは。
今回は、JavaScriptでハマったことをつらつら書いていきます。
「JavaScriptに型宣言がないせいだ。JavaScriptに型宣言がないせいだ。くっそ~」って記事。
目次
- 文字列なのに「replace」「split」などの文字列操作メソッドが使えなかった話
- 文字列と数値で出力する値が違った話
- 余談
1.文字列なのに数値だから「replace」「split」などの文字列操作メソッドが使えなかった話
■処理
税込金額： 税抜金額： 消費税：
「54,000」の部分をクリックして別の部分をクリックしてみてください。
※スマホは対応しておりません。
上のように税込金額に入力された値に応じて税抜金額と消費税を計算する処理をしたかった。
※実際に入力された値で計算しようと思ったけど、Markdown記法では値を取得できなかったから固定値。。。できんのこれ？笑
■事象
税込金額に入力された値を取得して税抜金額と消費税を計算後、カンマ(3桁ごと)を付与したかったので、
replace()と正規表現を使おうと思ったら「オブジェクトでサポートされていないプロパティまたはメソッドです」のエラーメッセージ発動された。。。くそう。
この謎が全く解けなかったから、仕方なく計算した値をテキストにセットしてから、もう一回値を取得してカンマ付与した。。。。ん~冗長。
■原因
内部では、
消費税 = 税込金額 * (消費税率 / 100 + 消費税率)、
税抜金額 = 税込金額 - 消費税
って計算してた。ここでハマった。
文字列と数値を計算すると暗黙的に数値型に変換されるみたい。
だから、計算したあとの消費税と税抜金額のデータ型は「数値」！！！
数値型に対して、replace()やら、split()使えるわけないよね。そりゃエラーメッセージ発動するわけだ。。。
■対策
数値型になった消費税と税抜金額を文字列に変換する。
①文字列と結合(+ "")
②文字型変換メソッド(String(消費税)、消費税.toString())
■演算子による暗黙型変換
数値 + 数値 → 数値（分かる）
文字列 + 文字列 → 文字列（分かる）
数値 + 文字列 → 文字列（は？）
数値 -(/、*、%) 文字列 → 数値（は？）
この仕様を知らないと思わぬところでバグを埋め込みそうなので気をつけねば。。。
■努力が水の泡(toLocaleString())
正規表現を使って3桁区切りにしなくても「toLocaleString()」を使えば自動で3桁区切りにしてくれるらしい。まじなんなの。知らなかった。くそう。
■結論
タイトルはこうなります。
1.文字列なのに数値だから「replace」「split」などの文字列操作メソッドが使えなかった話
2.文字列と数値で出力する値が違った話
■処理
サーバサイドから取得した値をJSPで使用したかった。ただそれだけだったのに。。ハマった。(ハマった時間：5分)
■事象
<c:set var="test">020</c:set>
alert(${test})→16
なんで16って表示されんの？なんなのまじ。ってなった。
EL式のせいか。お？お？お？って思ったけど違いました。
■原因
数値型の先頭に0(例：020)が付いてると、その数字を8進数とみなすからである。
だから、020は16と表示されてしまったんか。くそう。
この仕様は初めましてこんにちは。
やっぱり原因は「数値と文字列」でした。
■対策
020を使いたいなら、
alert(${test})ではなく
alert("${test}")のように「""」で囲んで文字列としましょう。そうしましょう。
3.余談
JSONについて話してたときに、近くにいた上司に「厚切りJSON♪い〜じょう！」とかつぶやかれて以降、 JSON見るたびに思い出してしまって仕事になりません。。どうにかしてください。
※JSON
テキストベースのデータフォーマットの一種。データフォーマットは他にxmlとかがあります。い〜じょう
