【JavaScript】数値を3桁カンマ区切りで表示する方法｜toLocaleString・Intl.NumberFormat・通貨・小数桁・パフォーマンス

const price = 1234567;

console.log(price.toLocaleString("ja-JP")); // "1,234,567"
console.log(price.toLocaleString("en-US")); // "1,234,567"

// 変数に入った数値リテラルから直接呼ぶ場合は丸括弧が必要
console.log((1234567).toLocaleString("ja-JP")); // "1,234,567"
console.log(12345.678.toLocaleString("ja-JP")); // "12,345.678" 

const formatter = new Intl.NumberFormat("ja-JP");

console.log(formatter.format(1234567));   // "1,234,567"
console.log(formatter.format(98765.4));   // "98,765.4"

// 一度作ったフォーマッタは何度でも使い回せる
const numbers = [1000, 25000, 3400000];
console.log(numbers.map((n) => formatter.format(n)));
// ["1,000", "25,000", "3,400,000"]

const jpy = new Intl.NumberFormat("ja-JP", {
  style: "currency",
  currency: "JPY"
});
console.log(jpy.format(1234567)); // "￥1,234,567"

const usd = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
});
console.log(usd.format(1234.5)); // "$1,234.50"

// 記号ではなくコードで表示することもできる
const jpyCode = new Intl.NumberFormat("ja-JP", {
  style: "currency",
  currency: "JPY",
  currencyDisplay: "code"
});
console.log(jpyCode.format(1234567)); // "JPY 1,234,567" 

const format2 = new Intl.NumberFormat("ja-JP", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
console.log(format2.format(1234));     // "1,234.00"
console.log(format2.format(1234.5));   // "1,234.50"
console.log(format2.format(1234.567)); // "1,234.57"（四捨五入される）

// 整数に丸めて表示する
const format0 = new Intl.NumberFormat("ja-JP", {
  maximumFractionDigits: 0
});
console.log(format0.format(1234.6)); // "1,235" 

// パーセント表記（0〜1の値を100倍して % を付ける）
const percent = new Intl.NumberFormat("ja-JP", {
  style: "percent",
  minimumFractionDigits: 1
});
console.log(percent.format(0.1234)); // "12.3%"

// コンパクト表記（万・億や K・M でまとめる）
const compactJa = new Intl.NumberFormat("ja-JP", {
  notation: "compact"
});
console.log(compactJa.format(12345));    // "1.2万"
console.log(compactJa.format(123456789)); // "1.2億"

const compactEn = new Intl.NumberFormat("en-US", {
  notation: "compact"
});
console.log(compactEn.format(12345)); // "12K" 

function addCommas(num) {
  const [intPart, decimalPart] = String(num).split(".");
  const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return decimalPart ? `${grouped}.${decimalPart}` : grouped;
}

console.log(addCommas(1234567));     // "1,234,567"
console.log(addCommas(1234567.89));  // "1,234,567.89"
console.log(addCommas(-1234567));    // "-1,234,567" 

<input type="text" id="amount" inputmode="numeric">
<p>入力された金額: <span id="raw"></span> 円</p>

const input = document.getElementById("amount");
const raw = document.getElementById("raw");
const formatter = new Intl.NumberFormat("ja-JP");

input.addEventListener("input", () => {
  // カンマと数字以外を取り除いて数値化する
  const digits = input.value.replace(/[^\d]/g, "");

  if (digits === "") {
    input.value = "";
    raw.textContent = "0";
    return;
  }

  const value = Number(digits);
  input.value = formatter.format(value); // 表示はカンマ付き
  raw.textContent = String(value);       // 計算用は数値
});

// 文字列はそのままでは整形できない
console.log("1234567".toLocaleString()); // "1234567"（区切られない）
console.log(Number("1234567").toLocaleString("ja-JP")); // "1,234,567"

// NaN はそのまま "NaN" になる
console.log(Number("abc").toLocaleString("ja-JP")); // "NaN"

// 安全側に倒すなら数値かどうかを確認する
function formatNumber(value) {
  const num = Number(value);
  return Number.isFinite(num)
    ? num.toLocaleString("ja-JP")
    : "-";
}
console.log(formatNumber("1234567")); // "1,234,567"
console.log(formatNumber("abc"));     // "-" 

// 安全に扱える整数の上限を超えると精度が失われる
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log((123456789012345678).toLocaleString("ja-JP"));
// "123,456,789,012,345,680"（末尾がずれる）

// 桁の大きい整数は BigInt を使うと正確
console.log(123456789012345678n.toLocaleString("ja-JP"));
// "123,456,789,012,345,678"

// Intl.NumberFormat も BigInt をそのまま整形できる
const formatter = new Intl.NumberFormat("ja-JP");
console.log(formatter.format(9007199254740993n));
// "9,007,199,254,740,993" 

// 非効率：要素ごとにフォーマッタを作っている
const slow = bigArray.map((n) =>
  new Intl.NumberFormat("ja-JP").format(n)
);

// 効率的：フォーマッタは1つだけ作って使い回す
const formatter = new Intl.NumberFormat("ja-JP");
const fast = bigArray.map((n) => formatter.format(n));