JavaScriptで数字を出力するときに、数字に3桁ごとにカンマをつけたいということがあります。
特にECサイトの料金表示などで、必要になる機会があるでしょう。そんな時に、簡単にカンマをつける方法を知っておくととても便利です。
本記事では、数字に3桁ごとにカンマをつける方法を2つご紹介します。
toLocaleString()メソッドを利用する
簡単に、数字に3桁ごとにカンマをつけるには、toLocaleString()メソッドが便利です。
toLocaleString()メソッドは、Numberクラスのメソッドであり、その数値を言語に応じた適切な表現方法にて文字列へ変換してreturnしてくれます。
Number型の数字に3桁ごとにカンマをつける
まずはNumber型の数字に、3桁ごとにカンマをつける方法からご紹介します。
let number = 1234567;
number = number.toLocaleString();
console.log(number); // "1,234,567"returnされる値は、Number型ではなくString型であることに注意しましょう。
String型の数字に3桁ごとにカンマをつける
String型の数字に対して、直接toLocaleString()メソッドを使うことはできません。
let string = '1234567';
let number = string.toLocaleString();
console.log(number); // "1234567"
// エラーではありませんが、3桁カンマは追加されません。そのため、カンマをつけたい数字がString型である場合には、Number型に変換した後にtoLocaleString()メソッドを使う必要があります。
let string = '1234567';
let number = Number(string).toLocaleString();
console.log(number); // "1,234,567"これで、カンマをつけたい値がString型の場合にも、カンマをつけることができるようになりました。
小数点以下に対応する
小数点以下の数字でも、toLocaleString()メソッドを使うことはできます。
ただし、デフォルトでは小数点以下3桁の表示で丸められてしまいます。
let number = 1234.56789;
number = number.toLocaleString();
console.log(number); // "1,234.568"小数点4桁以上でも丸められないようにするためには、toLocaleString()メソッドのオプションであるmaximumFractionDigitsを使います。
let number = 1234.56789;
number = number.toLocaleString('ja-JP', { maximumSignificantDigits: 20 });
console.log(number); // "1,234.56789"maximumSignificantDigitsオプションは0〜20までの整数で指定することができ、デフォルトでは3が指定してある状態です。
（’ja-JP’の記述は、日本語であることを指定しています。）
toLocaleString()メソッドのブラウザ対応状況
念の為、Can I use…で、toLocaleString()メソッドのブラウザ対応状況を確認して見ましょう。
基本的にどのブラウザでも、toLocaleString()メソッドを使っても問題なさそうですね。
正規表現とreplace()メソッドを利用する
数字に3桁ごとにカンマをつけるには、正規表現とreplace()メソッドを利用する方法もあります。
replace()メソッドは文字の置換を行うメソッドであり、正規表現を使って置換する条件を指定します。
もし、toLocaleString()メソッドでうまく動かない場合には、こちらの方法も試してみると良いでしょう。
正規表現とreplace()メソッドで数字に3桁ごとにカンマをつける
正規表現とreplace()メソッドを組み合わせて使うことで、数字に3桁ごとにカンマをつけます。
let number = 1234567;
number = String(number).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
console.log(number); // "1,234,567"ただし、この場合は小数点以下にもカンマがついてしまうため、小数点以下のある数字は扱うことができません。
let number = 1234.56789;
number = String(number).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
console.log(number); // "1,234.56,789"小数点以下に対応する
正規表現とreplace()メソッドを使って、小数点以下の数字に3桁ごとにカンマをつけたい場合には、一度小数点で文字列を分割してから整数部分のみにカンマを追加する処理を施します。
let number = 1234.56789;
let split = String(number).split('.');
let int = split[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
if(split[1].length >= 1) {
number = int + '.' + split[1];
} else {
number = int;
}
console.log(number); // "1,234.56789"まとめ
数字に3桁ごとにカンマをつけたい場合、toLocaleString()メソッドを使うのが一番簡単です。
もし、toLocaleString()メソッドでうまく動作しない場合には、正規表現とreplace()メソッドを組み合わせた方法を試してみてください。
共に、変換後に返される値はNumber型でなく、String型であることには注意しましょう。
コメント