【JavaScript】数字を3桁区切りにする方法

JavaScriptを使用して数字を3桁区切りにする方法について解説します。
この方法は、初級者から中級者までのエンジニアが使えるように、簡単な方法と正規表現を使った方法を紹介します。

JavaScriptで数字を3桁区切りにする方法

数字を3桁ごとに区切る方法と、正規表現を使った方法の2つがあります。

toLocaleStringメソッドを使用する

この方法では、toLocaleStringメソッドを使用して、数字を3桁ごとに区切ります。

const number = 1234567;
const formattedNumber = number.toLocaleString();
console.log(formattedNumber);
// 出力結果: 1,234,567

const number = 1234567;
const formattedNumber = number.toLocaleString();
console.log(formattedNumber);
// 出力結果: 1,234,567

上記のように、toLocaleStringメソッドを使用することで、数字を3桁ごとに区切ることができます。
また、toLocaleStringメソッドを使用することで、言語や地域に応じた数値フォーマットも自動的に行うことができます。

正規表現を使った方法

正規表現を使った方法では、replaceメソッドを使用して、正規表現にマッチする部分を置換します。

const number = 1234567;
const formattedNumber = number.replace(/\d{1,3}(?=(\d{3})+$)/g, '$&,');
console.log(formattedNumber);
// 出力結果: 1,234,567

const number = 1234567;
const formattedNumber = number.replace(/\d{1,3}(?=(\d{3})+$)/g, '$&,');
console.log(formattedNumber);
// 出力結果: 1,234,567

上記のように、正規表現を使用することで、数字を3桁ごとに区切ることができます。
正規表現の詳細については、別の記事で詳しく解説しています。

コード例

以下に、それぞれの方法で数字を3桁区切りにするコード例を示します。

toLocaleStringメソッドを使った方法のコード例

function formatNumber(number) {
  return number.toLocaleString();
}

const number = 1234567;
const formattedNumber = formatNumber(number);
console.log(formattedNumber);
// 出力結果: 1,234,567

function formatNumber(number) {
  return number.toLocaleString();
}

const number = 1234567;
const formattedNumber = formatNumber(number);
console.log(formattedNumber);
// 出力結果: 1,234,567

正規表現を使った方法のコード例

function formatNumber(number) {
  return number.replace(/\d{1,3}(?=(\d{3})+$)/g, '$&,');
}

const number = 1234567;
const formattedNumber = formatNumber(number);
console.log(formattedNumber);
// 出力結果: 1,234,567

function formatNumber(number) {
  return number.replace(/\d{1,3}(?=(\d{3})+$)/g, '$&,');
}

const number = 1234567;
const formattedNumber = formatNumber(number);
console.log(formattedNumber);
// 出力結果: 1,234,567

まとめ

JavaScriptで数字を3桁区切りにする方法について、toLocaleStringメソッドと正規表現を使用した方法を紹介しました。
toLocaleStringメソッドを使用する方法は簡単であり、また、数値フォーマットも自動的に行ってくれるため、手軽に使用することができます。
一方、正規表現を使用する方法は、独自のフォーマットにも対応することができます。
どちらの方法も、エンジニアにとって有用な技術であるため、ぜひ活用してみてください。