为数字添加 st、nd、rd 和 th(序数)后缀

IT技术 javascript jquery numbers
2021-01-15 01:16:13

我想根据当天动态生成一串文本。因此,例如,如果是第 1 天,那么我希望我的代码生成 = "Its the <dynamic>1*<dynamic string> st </dynamic string>*</dynamic>"。

总共有12天,所以我做了以下事情:

  1. 我已经设置了一个循环 12 天的循环。

  2. 在我的 html 中,我给了我的元素一个唯一的 id 来定位它,见下文:

    <h1 id="dynamicTitle" class="CustomFont leftHeading shadow">On The <span></span> <em>of rest of generic text</em></h1>
    
  3. 然后,在我的 for 循环中,我有以下代码:

    $("#dynamicTitle span").html(i);
    var day = i;
    if (day == 1) {
        day = i + "st";
    } else if (day == 2) {
        day = i + "nd"
    } else if (day == 3) {
        day = i + "rd"
    }
    

更新

这是请求的整个 for 循环:

$(document).ready(function () {
    for (i = 1; i <= 12; i++) {
        var classy = "";
        if (daysTilDate(i + 19) > 0) {
            classy = "future";
            $("#Day" + i).addClass(classy);
            $("#mainHeading").html("");
            $("#title").html("");
            $("#description").html("");
        } else if (daysTilDate(i + 19) < 0) {
            classy = "past";
            $("#Day" + i).addClass(classy);
            $("#title").html("");
            $("#description").html("");
            $("#mainHeading").html("");
            $(".cta").css('display', 'none');
            $("#Day" + i + " .prizeLink").attr("href", "" + i + ".html");
        } else {
            classy = "current";
            $("#Day" + i).addClass(classy);
            $("#title").html(headings[i - 1]);
            $("#description").html(descriptions[i - 1]);
            $(".cta").css('display', 'block');
            $("#dynamicImage").attr("src", ".." + i + ".jpg");
            $("#mainHeading").html("");
            $(".claimPrize").attr("href", "" + i + ".html");
            $("#dynamicTitle span").html(i);
            var day = i;
            if (day == 1) {
                day = i + "st";
            } else if (day == 2) {
                day = i + "nd"
            } else if (day == 3) {
                day = i + "rd"
            } else if (day) {
            }
        }
    }
6个回答

规则如下:

  • st 与以 1 结尾的数字一起使用(例如 1st,首先发音)
  • nd 与以 2 结尾的数字一起使用(例如 92nd,发音为 90 秒)
  • rd 与以 3 结尾的数字一起使用(例如 33rd,发音为 3/3)
  • 作为上述规则的一个例外,所有以 11、12 或 13 结尾的“青少年”数字都使用 -th(例如 11th,发音为第十一,第 112,发音为一百 [和] 十二)
  • th 用于所有其他数字(例如 9th,发音为 9th)。

以下 JavaScript 代码(在 2014 年 6 月重写)实现了这一点:

function ordinal_suffix_of(i) {
    var j = i % 10,
        k = i % 100;
    if (j == 1 && k != 11) {
        return i + "st";
    }
    if (j == 2 && k != 12) {
        return i + "nd";
    }
    if (j == 3 && k != 13) {
        return i + "rd";
    }
    return i + "th";
}

0-115 之间数字的示例输出:

  0  0th
  1  1st
  2  2nd
  3  3rd
  4  4th
  5  5th
  6  6th
  7  7th
  8  8th
  9  9th
 10  10th
 11  11th
 12  12th
 13  13th
 14  14th
 15  15th
 16  16th
 17  17th
 18  18th
 19  19th
 20  20th
 21  21st
 22  22nd
 23  23rd
 24  24th
 25  25th
 26  26th
 27  27th
 28  28th
 29  29th
 30  30th
 31  31st
 32  32nd
 33  33rd
 34  34th
 35  35th
 36  36th
 37  37th
 38  38th
 39  39th
 40  40th
 41  41st
 42  42nd
 43  43rd
 44  44th
 45  45th
 46  46th
 47  47th
 48  48th
 49  49th
 50  50th
 51  51st
 52  52nd
 53  53rd
 54  54th
 55  55th
 56  56th
 57  57th
 58  58th
 59  59th
 60  60th
 61  61st
 62  62nd
 63  63rd
 64  64th
 65  65th
 66  66th
 67  67th
 68  68th
 69  69th
 70  70th
 71  71st
 72  72nd
 73  73rd
 74  74th
 75  75th
 76  76th
 77  77th
 78  78th
 79  79th
 80  80th
 81  81st
 82  82nd
 83  83rd
 84  84th
 85  85th
 86  86th
 87  87th
 88  88th
 89  89th
 90  90th
 91  91st
 92  92nd
 93  93rd
 94  94th
 95  95th
 96  96th
 97  97th
 98  98th
 99  99th
100  100th
101  101st
102  102nd
103  103rd
104  104th
105  105th
106  106th
107  107th
108  108th
109  109th
110  110th
111  111th
112  112th
113  113th
114  114th
115  115th
我无缘无故地将它作为 ES6 lambda 进行了压缩: n=>n+(n%10==1&&n%100!=11?'st':n%10==2&&n%100!=12?'nd':n%10==3&&n%100!=13?'rd':'th')
2021-03-18 01:16:13
这不能正确处理三个“青少年”数字的异常。例如,数字111112113应导致"111th""112th""113th"分别"111st""112nd",和"113rd"通过作为当前编码的函数产生的。
2021-03-20 01:16:13
@Anomaly 很有趣,在 ~π/2 年后我仍然可以阅读它。
2021-03-20 01:16:13
它对我的也很有效: dateString = monthNames[newValue.getUTCMonth()] + " " + numberSuffix(newValue.getUTCDate()) + ", " + newValue.getUTCFullYear();
2021-03-29 01:16:13
这个答案似乎进化得很完美。感谢所有贡献者。
2021-04-02 01:16:13

Shopify

function getNumberWithOrdinal(n) {
  var s = ["th", "st", "nd", "rd"],
      v = n % 100;
  return n + (s[(v - 20) % 10] || s[v] || s[0]);
}

[-4,-1,0,1,2,3,4,10,11,12,13,14,20,21,22,100,101,111].forEach(
  n => console.log(n + ' -> ' + getNumberWithOrdinal(n))
);

@Pugazh A. find s[v%10] if >= 20 (20th...99th), B.如果没有找到,尝试 s[v] (0th..3rd), C.如果仍然没有找到,使用 s [0] (4th..19th)
2021-03-19 01:16:13
添加解释可以使它成为更好的答案!
2021-04-10 01:16:13
为什么在函数名称中使用 double get 呢?
2021-04-11 01:16:13

序数后缀的最小单行方法

function nth(n){return["st","nd","rd"][((n+90)%100-10)%10-1]||"th"}

(这是针对正整数,其他变化见下文)

解释

从带有后缀的数组开始["st", "nd", "rd"]我们想将以 1、2、3 结尾(但不以 11、12、13 结尾)的整数映射到索引 0、1、2。

其他整数(包括以 11、12、13 结尾的整数)可以映射到其他任何东西——在数组中找不到的索引将计算为undefined这在 javascript 中是错误的,并且使用逻辑 or ( || "th") 表达式将返回"th"这些整数,这正是我们想要的。

表达式((n + 90) % 100 - 10) % 10 - 1进行映射。分解它:

  • (n + 90) % 100:这个表达式采用输入整数 − 10 mod 100,将 10 映射到 0,... 99 到 89,0 到 90,...,9 到 99。现在以 11、12、13 结尾的整数位于较低的位置结束(映射到 1、2、3)。
  • - 10: 现在 10 被映射到 -10, 19 到 -1, 99 到 79, 0 到 80, ... 9 到 89。以 11, 12, 13 结尾的整数被映射到负整数 (-9, -8, −7)。
  • % 10:现在所有以 1、2 或 3 结尾的整数都映射到 1、2、3。所有其他整数都映射到别的东西(11、12、13 仍然映射到 -9、-8、-7)。
  • - 1:减1得到1、2、3到0、1、2的最终映射。

验证它是否有效

function nth(n){return["st","nd","rd"][((n+90)%100-10)%10-1]||"th"}

//test integers from 1 to 124
for(var r = [], i = 1; i < 125; i++) r.push(i + nth(i));

//output result
document.getElementById('result').innerHTML = r.join('<br>');
<div id="result"></div>

变化

允许负整数:

function nth(n){return["st","nd","rd"][(((n<0?-n:n)+90)%100-10)%10-1]||"th"}

在 ES6 粗箭头语法中(匿名函数):

n=>["st","nd","rd"][(((n<0?-n:n)+90)%100-10)%10-1]||"th"

更新

一个更短的正整数替代方法是表达式

[,'st','nd','rd'][n%100>>3^1&&n%10]||'th'

请参阅此帖子以获取解释。

更新 2

[,'st','nd','rd'][n/10%10^1&&n%10]||'th'
优雅的。我的最爱。
2021-03-14 01:16:13

Intl.PluralRules标准方法。

我只想在这里放弃执行此操作的规范方法,因为似乎没有人知道。

如果你希望你的代码是

  • 自我记录
  • 容易明白
  • 以现代标准

——这是要走的路。

const english_ordinal_rules = new Intl.PluralRules("en", {type: "ordinal"});
const suffixes = {
    one: "st",
    two: "nd",
    few: "rd",
    other: "th"
};
function ordinal(number) {
    const suffix = suffixes[english_ordinal_rules.select(number)];
    return (number + suffix);
}

const test = Array(201)
    .fill()
    .map((_, index) => index - 100)
    .map(ordinal)
    .join(" ");
console.log(test);

感谢分享这个解决方案!喜欢我可以利用预先存在的功能。
2021-03-18 01:16:13
@RobG 我仍然最喜欢这个,部分原因是您可以对其进行本地化。
2021-03-22 01:16:13
@RobG,@BobRhodes,您是否尝试过负数的变化function nth(n){return["st","nd","rd"][(((n<0?-n:n)+90)%100-10)%10-1]||"th"}它对我来说很好用,我现在还添加了代码来演示。
2021-03-22 01:16:13
@RobG Thomas Langkaas 的回答,他说的例子允许负数,不允许负数?
2021-04-03 01:16:13

您可以使用矩库本地数据函数

代码:

moment.localeData().ordinal(1)
//1st