toLocaleString vs 正規表現：JavaScriptでカンマ区切りの数値表示

2024-04-02

JavaScriptで数値にカンマを区切り文字として挿入する方法

toLocaleString() メソッドを使用する

最も簡単な方法は、toLocaleString() メソッドを使用することです。このメソッドは、数値をロケールに基づいてフォーマットします。

const number = 123456789;
const formattedNumber = number.toLocaleString();

console.log(formattedNumber); // 出力: 123,456,789

Number.prototype.toLocaleString() メソッドは、toLocaleString() メソッドと同様ですが、より多くのオプションを提供します。

const number = 123456789.123456;
const options = {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
};
const formattedNumber = number.toLocaleString('ja-JP', options);

console.log(formattedNumber); // 出力: 123,456,789.12

正規表現を使用する方法は、より複雑ですが、より柔軟なフォーマットが可能です。

const number = 123456789;
const formattedNumber = number.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,');

console.log(formattedNumber); // 出力: 123,456,789

ライブラリを使用する

numeral.js などのライブラリを使用すると、数値のフォーマットをより簡単に設定できます。

const numeral = require('numeral');

const number = 123456789;
const formattedNumber = numeral(number).format('0,0');

console.log(formattedNumber); // 出力: 123,456,789

簡単なフォーマットの場合は、toLocaleString() メソッドを使用するのが最善です。
より多くのオプションが必要な場合は、Number.prototype.toLocaleString() メソッドを使用できます。
より柔軟なフォーマットが必要な場合は、正規表現を使用できます。

toLocaleString() メソッドを使用する

const number = 123456789;
const formattedNumber = number.toLocaleString();

console.log(formattedNumber); // 出力: 123,456,789

Number.prototype.toLocaleString() メソッドを使用する

const number = 123456789.123456;
const options = {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
};
const formattedNumber = number.toLocaleString('ja-JP', options);

console.log(formattedNumber); // 出力: 123,456,789.12

正規表現を使用する

const number = 123456789;
const formattedNumber = number.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,');

console.log(formattedNumber); // 出力: 123,456,789

ライブラリを使用する

const numeral = require('numeral');

const number = 123456789;
const formattedNumber = numeral(number).format('0,0');

console.log(formattedNumber); // 出力: 123,456,789

Intl.NumberFormat オブジェクトを使用する

const number = 123456789;
const options = {
  style: 'decimal',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
};
const nf = new Intl.NumberFormat('ja-JP', options);
const formattedNumber = nf.format(number);

console.log(formattedNumber); // 出力: 123,456,789.12

手動でフォーマットすることもできます。

const number = 123456789;
const formattedNumber = number.toString().split('').reverse().join('').match(/.{3}/g).join(',').split('').reverse().join('');

console.log(formattedNumber); // 出力: 123,456,789

JavaScriptで数値にカンマを区切り文字として挿入するには、いくつかの方法があります。