みかづきブログ・カスタム

基本的にはちょちょいのほいです。

JavaScriptで数字に英語の序数(st・nd・rd・th)を追加する 🥇

ranking

ランキングを作成する際に、

getRankingText(1); // => '1st'
getRankingText(2); // => '2nd'
getRankingText(3); // => '3rd'
getRankingText(4); // => '4th'
getRankingText(5); // => '5th'
.
.
.
getRankingText(11); // => '11th'
getRankingText(12); // => '12th'
getRankingText(13); // => '13th'
.
.
.
getRankingText(21); // => '21st'
getRankingText(22); // => '22nd'
getRankingText(23); // => '23rd'
.
.
.
getRankingText(101); // => '101st'
getRankingText(102); // => '102nd'
getRankingText(103); // => '103rd'
.
.
.
getRankingText(111); // => '111st'
getRankingText(112); // => '112nd'
getRankingText(113); // => '113rd'


という関数が欲しいなとおもって考えてみました。

TypeScript

function getRankingText(num: number): string {
  const numStr = String(num);
  
  switch (numStr.substr(-2, 2)) {
    case '11':
    case '12':
    case '13':
      return `${numStr}th`;
    default:
      switch (numStr.substr(-1, 1)) {
        case '1':
          return `${numStr}st`;
        case '2':
          return `${numStr}nd`;
        case '3':
          return `${numStr}rd`;
        default:
          return `${numStr}th`;
      }
  }
}

少数を入れるとおかしなことになりますが、そこは考慮しなくて良しとしましょう。
完璧だ。と思ったのですが、ふと思い立ってnpm st nd rdで検索をかけてみると、、、

www.npmjs.com

良さげなパッケージが見つかりました。。。
そりゃ誰かがつくってますよね。

ソースを確認してみると、

github.com

JavaScript

module.exports = function indicator (i) {
  i = Math.abs(i)
  var cent = i % 100
  if (cent >= 10 && cent <= 20) return 'th'
  var dec = i % 10
  if (dec === 1) return 'st'
  if (dec === 2) return 'nd'
  if (dec === 3) return 'rd'
  return 'th'
}


めちゃめちゃシンプル!
ただ、少数を入れたときはバグりますね。
やっぱりそこまでは対策しなくても良いのでしょう。

とても勉強になりました。