Nuxt3 x TypeScript x 將傳入的數字進行格式化並轉化為數字縮寫為 k、M、B 格式

前言 - Prologue

當我們開發 Web 時，常常需要將數字進行格式化以便於顯示。例如：如果數字非常大超過 1000，那麼我們通常會將它轉化為 k、M、B 等縮寫形式。在 Nuxt3 和 TypeScript 的支持下，我們可以更加輕鬆地實現這一功能。通過將傳入的數字進行格式化，可以更好地顯示數字，提高網站的用戶體驗。

正文 - Main text

下列有兩種版本常用版本的範例函式：

版本一縮寫到 k (千) 位

以下是一個以 Nuxt3 撰寫的 TypeScript 函式，可以將傳入的數字進行格式化，將大於 1000 的數字縮寫為 k（千）的形式：

function shortNumber(num: number): string {
  if (num < 1000) {
    return num.toString();
  } else {
    const shortNum = Math.round(num / 100) / 10;
    const suffix = 'k';
    return shortNum + suffix;
  }
}

這個函式會接收一個數字，如果這個數字小於 1000，就直接將其轉換為字串後返回。如果這個數字大於或等於 1000，就先將它除以 100，再進行四捨五入到小數點後一位。最後我們將這個數字轉換為字串，並在後面加上一個字元 "k"，以表示千位數。

取用函式範例：

console.log(shortNumber(2342));
// Expected output: 2.3k
console.log(shortNumber(2352));
// Expected output: 2.4k
console.log(shortNumber(312312));
// Expected output: 312k
console.log(shortNumber(157));
// Expected output: 157

請注意：上面這個函式只會處理大於等於 1000 的數字。如果您需要將更大的數字轉換為以百萬（M）或十億（B）為單位的格式，可以參考下方其他範例函式。

版本二縮寫到 k、M、B 位

function shortNumber(num: number): string {
  const suffixes = ['', 'k', 'M', 'B']

  if (num < 1000) {
    return num.toString()
  } else {
    const exp = Math.floor(Math.log10(num) / 3)
    const shortNum = Math.round((num / Math.pow(1000, exp)) * 10) / 10
    const suffix = suffixes[exp]
    return shortNum + suffix
  }
}

這個函式與第一個版本的函式相似，但它可以處理大於等於 1000 的數字。如果輸入的數字大於或等於十億，函式會將該數字轉換為十億的縮寫（B）；如果輸入的數字大於或等於一百萬，函式會將該數字轉換為百萬的縮寫（M）；如果輸入的數字大於或等於一千，函式會將該數字轉換為千的縮寫（k）。如果輸入的數字小於一千，函式會返回該數字的字符串形式。

取用函式範例：

const result = shortNumber(312312)
console.log(result)
// Expected output: 312k

第二個版本也可以寫成很長但好理解的，但能簡潔就簡潔吧...

function shortNumber(num: number): string {
  const billion = 1000000000;
  const million = 1000000;
  const thousand = 1000;

  if (number >= billion) {
    const abbrNumber = Math.round(number / billion * 10) / 10;
    const suffix = 'B';
    return `${abbrNumber}${suffix}`;
  } else if (number >= million) {
    const abbrNumber = Math.round(number / million * 10) / 10;
    const suffix = 'M';
    return `${abbrNumber}${suffix}`;
  } else if (number >= thousand) {
    const abbrNumber = Math.round(number / thousand * 10) / 10;
    const suffix = 'k';
    return `${abbrNumber}${suffix}`;
  } else {
    return number.toString();
  }
}