前端每日一学：如何在 JavaScript 中将数字转换为序数

作者：Terry2022.09.09来源：Web前端之家浏览：2695评论:0

关键词：js

在本教程中，您将学习如何在 JavaScript 中将数字转换为序数。获取数字的序数允许您以人类可读的格式显示它。

什么是序数？

序数将数字定义为顺序或序列的一部分。单词“first”、“second”和“third”都是序数的例子。当使用数字来显示图表结果、月份中的天数或排名时，您通常需要使用序数。

数字可用于显示许多不同类型的数据和结果。当数字呈现给用户时，它们通常需要以更易读的格式呈现——例如添加序数后缀（例如，“June 12th”而不是“June 12”）。

英文序数后缀规则

让我们看一下序数在英语中是如何使用的。英语序数遵循一组可预测的，即使不是非常简单的规则：

“st”附加到 1 和大于 10 倍数的数字，但 11 和 11 大于 100 的倍数的数字除外。例如，1st、21st、31st 等……但 11th、111th ， ETC。
“nd”附加到 2 和大于 10 的倍数的数字，但 12 和大于 100 的倍数的 12 的数字除外。例如，2nd、22nd、32nd 等……但 12th、112th ， ETC。
“rd”附加到 3 和大于 10 的倍数的 3 后，但 13 和大于 100 的倍数的 13 除外。例如，3rd、23rd、33rd 等……但 13th、113th ， ETC。
“th”附加到其他所有内容。例如，24 日。

如何获取数字的序数

要获取数字的序数，可以使用以下函数：

function getOrdinal(n) {
  let ord = 'th';

  if (n % 10 == 1 && n % 100 != 11)
  {
    ord = 'st';
  }
  else if (n % 10 == 2 && n % 100 != 12)
  {
    ord = 'nd';
  }
  else if (n % 10 == 3 && n % 100 != 13)
  {
    ord = 'rd';
  }

  return ord;
}

该函数getOrdinal接受一个数字参数并返回该数字的序数。由于大多数序数以“th”结尾，因此默认值ord设置为th。然后，您在不同条件下测试数字并在必要时更改序数。

您会注意到在每种情况下都使用了余数 (%) 运算符。此运算符返回左操作数除以右操作数的剩余值。例如，112 % 100返回12.

要测试数字是否应该具有序数st，请检查是否n大于 10 的倍数 ( n % 10 == 1，其中包括 1 本身)，但不大于 11 的倍数 100 ( n % 100 != 11，其中包括 11 本身)。

要测试数字是否应该具有序数nd，请检查n2 是否大于 10 的倍数（n % 10 == 2包括 2 本身），但不是 12 大于 100 的倍数（n % 100 != 12，其中包括 12 本身）。

要测试数字是否应该具有序数rd，请检查n3 是否大于 10 的倍数（n % 10 == 3，其中包括 3 本身），但不大于 13 的倍数 100 （n % 100 != 13，其中包括 13 本身）。

如果所有条件都为假，则ord保留的值th。

您可以使用下面的 CodePen 演示对其进行实时测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端每日一学：如何在 JavaScript 中将数字转换为序数 | Web前端之家www.jiangweishan.com</title>
</head>
<body>
  <div>
    <label for="number">Enter ranking number</label>
    <input type="number" id="number" name="number" min="0" />
  </div>
  <button id="submit">Get Ordinal</button>
  <p id="result">
  </p>
   
    <script>
        function getOrdinal(n) {
          let ord = 'th';

          if (n % 10 == 1 && n % 100 != 11)
          {
            ord = 'st';
          }
          else if (n % 10 == 2 && n % 100 != 12)
          {
            ord = 'nd';
          }
          else if (n % 10 == 3 && n % 100 != 13)
          {
            ord = 'rd';
          }

          return ord;
        }

        const input = document.querySelector('#number');
        const resultElm = document.querySelector("#result");

        document.querySelector('#submit').addEventListener('click', function() {
          const number = input.value;
          resultElm.textContent = number + getOrdinal(number);
        });
    </script>

</body>
</html>

大家可以预览看看效果。