きり丸の技術日記

技術・エンジニアのイベント・資格等はこちらにまとめる予定です

JSで文字列から数値に変換する(カンマで3桁ごとに区切られた文字列を数値に変換する)

小ネタ。

JavaScript(ECMAScript)、TypeScriptで文字列型(String型)から数値型(number型)に変換しようとしましたが、小数点セパレータが国によって違うため、微妙にハマったのでメモします。

なお、きれいな処理だとは思っていないので、もしよりよい表現があれば教えていただきたいです。

環境

  • Node.js
    • v14.17.6

ゴール

  • 文字列から数値に変換する
    • 文字列「-123,456,789円」を数値の「-123456789」に変換する
  • 日本のセパレータに合わせる

今回ハマったのが、カンマで3桁ごとに区切られた文字列を数値変換できなかったのがきっかけです。

ですので、上記の変換ができればゴールとします。

要約

  • 小数点セパレータ以外のセパレータを削除する
  • paserFloatで文字列から数値型に変換する

手順

小数点セパレータ以外のセパレータを削除する

参考情報によると、国によって桁の区切る文字と小数を区切る文字が異なります。

今回の記事では、日本に合わせて「1,234,567.89」という文字列があった時に、小数点を意味するピリオドを小数点セパレータ、ピリオドとカンマの区切り文字を合わせてセパレータと表現しています。


今回はカンマを全部削除したいので、次の正規表現で変換します。

"-123,456,789円".replace(/,/g, "")
// -123456789円

文字列を数値に変換する

parseFloatを使用することで数値に変換できます。

parseFloat("-123456789円")
// -123456789

備考

そのほかの変換の検証結果

Numberで変換することもできますが、変換不可能な文字列が入るとNaNに変換されます。「円」や「ドル」を変換できないのはわかりやすいですが、カンマもNaNに変換されてしまいます。

また、NaNで変換した方が後続の処理が動かなくて安全ですが、セパレータがカンマかそうでないかは国(ロケール)の問題だと思いますので、今回はNumberを使用しない方式を採用しています。

Number(-123,45)
// NaN

parseIntは整数部のみを取得します。間違いなく整数しか扱わないという場合であればparseIntでよいですが、こだわりがなければparseFloatを使った方がよいと思われます。

parseInt(-123.45)
// -123

parseIntparseFloatは文字列の最初にヒットした数値部分を取得します。数値と文字列が今後に存在する文字列を入力する場合は注意してください。

parseFloat("12.3円45,6ドル789円")
// 12.3

数値から文字列に変換する

数値から文字列にする場合は、Stringで囲むだけで変換できます。

String(-123456789)

ソースコード

Jestで挙動をテストしています。

終わりに

数値から文字列の変換はStringで変換できるので、同様にNumberでやるのが簡単だと思っていましたが痛い目にあいました。まさか、カンマが文字列として扱われるとは…。

気付いてみれば、3桁区切りの数値は表示上の問題でしかないので、文字列フォーマットではあるのですが…。気付くまでにかなり時間がかかってしまいました。

今後もこういう細かい仕様は頭の片隅に入れておきたいです。


この記事がお役に立ちましたら、各種SNSでのシェアや、今後も情報発信しますのでフォローよろしくお願いします。

参考情報

f:id:nainaistar:20210922145948p:plain