JavaScriptで数値をカンマ区切りの文字列に変換

こんにちは、さるまりんです。

JavaScriptの小ネタです。

数値をカンマ区切りにする方法です。金額表示とかの時にする3桁区切りのアレです。

4500円だったら4,500円とかするやつですね。

まずはシンプルに整数値の場合

これをJavaScriptでやるには次のようにします。

var num = 6789;
var str = num.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

1行目で変数num6789を代入しています。

2行目で3桁ごとカンマ区切りの文字列6,789に変換して変数strに代入しています。

日本の円はこれでいけますね。

では、アメリカのドルとセントではどうでしょうか。

小数点以下を含む数値の場合

数値7654.321をドルとセントの文字列に変換するにはどうしましょう?

ドルの部分を3桁ごとのカンマ区切りにして、小数点以下2桁までで

7,654.32

みたいに表示したいですよね。

それは次のようにします。

var num = 7654.321;
var str = num.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

違いはtoFixed(2)です。toFixed()は小数点以下の桁数を指定した値に変換してくれます。

toFixed(2)とすると小数点以下2桁の値に変換します。7654.3217654.32になります。

toFixed()は指定した次の値を四捨五入してくれます。ですので、1234.567toFixed(2)すると1234.57になります。

おさらいすると上のコードの2行目では

1. toFixed(2)7654.321を小数点以下第2位までの7654.32に

2. replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")で3桁カンマ区切りの7,654.32

変換しています。

どうでしょうか?これでアメリカに行っても大丈夫?!

素朴な疑問、この方法ではなくてNumberFormatterとかJavaScriptにあるんだろうか?

また調べてみますね。

読んでくださってありがとうございます。

それではまた!