×

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

作者:Web前端之家2022.09.09来源:Web前端之家浏览:259评论:0
关键词:js
微信公众号

微信公众号

500.jpg

在本教程中,您将学习如何在 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>

大家可以预览看看效果。

总结

在本教程中,您学习了如何检索数字的序数。序数可用于多种情况,例如以人类可读的格式显示日期或排名。

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/javascript20220909.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

  • 访客

    大佬,能提供能一下提取图片中的文字工具的源码吗,感谢...

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2