数値フォーマットJavaScript関数

JavaScriptで数値をフォーマットする

問題
数値を千以上の場合は"2.5K"のように、千未満の場合は"900"のようにフォーマットしたい。

解決方法

JavaScriptでこのフォーマットを実現するには、以下のようなコードを使用します。

function formatNumber(num) {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + "K";
  } else {
    return num;
  }
}

解説

1. formatNumber関数
   
2. 条件分岐
   
   • else: 数値が千未満の場合、数値をそのまま返します。

使用例

var number = 2500;
var formattedNumber = formatNumber(number);
console.log(formattedNumber); // 出力: "2.5K"

jQueryとの連携

jQueryを使用している場合は、以下のように関数を呼び出すことができます。

$("#number-display").text(formatNumber(2500));

function formatNumber(num) {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + "K";
  } else {
    return num;
  }
}

var number = 2500;
var formattedNumber = formatNumber(number);
console.log(formattedNumber); // 出力: "2.5K"

$("#number-display").text(formatNumber(2500));

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

JavaScriptの組み込みオブジェクトであるIntl.NumberFormatを使用することで、地域に合わせた数値フォーマットを簡単に実現できます。

function formatNumber(num) {
  const formatter = new Intl.NumberFormat('en-US', {
    notation: 'compact',
    compactDisplay: 'short'
  });
  return formatter.format(num);
}

• compactDisplay: 'short': 千単位の表記を使用します。
• notation: 'compact': コンパクトな表記を使用します。
• 'en-US': フォーマットのロケールを指定します。

正規表現を使用する

正規表現を使って数値をマッチさせ、千以上の場合はフォーマットする手法もあります。

function formatNumber(num) {
  const formattedNum = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  if (num >= 1000) {
    return formattedNum.replace(/(\d{1,3})(,\d{3})+$/, '$1K');
  } else {
    return formattedNum;
  }
}

• (\d{1,3})(,\d{3})+$: 千以上の数値をマッチさせる正規表現です。
• /\B(?=(\d{3})+(?!\d))/g: 千単位ごとにカンマを追加する正規表現です。

カスタム関数を使用する

より柔軟なフォーマットが必要な場合は、カスタム関数を作成することもできます。

function formatNumber(num, unit = 'K', threshold = 1000) {
  if (num >= threshold) {
    return (num / threshold).toFixed(1) + unit;
  } else {
    return num;
  }
}

この関数は、単位や閾値をカスタマイズすることができます。

var number = 2500;
var formattedNumber = formatNumber(number);
console.log(formattedNumber); // 出力: "2.5K"