给数字添加序数后缀（st，nd，rd和th）

Question

给数字添加序数后缀（st，nd，rd和th）

javascriptjquerynumbers

261

我希望能动态生成一段文本字符串，基于当前的日期。例如，如果是第1天，我希望我的代码生成 = "Its the <dynamic>1*<dynamic string>st</dynamic string>*</dynamic>" 。

总共有12天，所以我已经完成了以下操作：

我设置了一个循环，循环遍历这12天。

在我的html中，我为元素分配了一个唯一的id，以便对其进行定位，如下所示:

<h1 id="dynamicTitle" class="CustomFont leftHeading shadow">On The <span></span> <em>of rest of generic text</em></h1>

接下来，在我的 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"
}

更新

这是所请求的完整循环：

$(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) {
            }
        }
    }

- Antonio Vasilev

1

如果你的源代码足够简短，你介意贴出完整的代码，并且说明具体有什么问题或者什么让你感到困惑吗？ - RonaldBarzell

1

你的代码目前是做什么/不做什么？你没有清楚地说明出了什么问题。 - Pointy

我猜测所展示的代码是一个if块的内容，而该块进一步被循环包含？请展示更多代码... - MrCode

@MrCode - 是的，你说得对。我已经更新了帖子，包括整个for循环。希望这样能澄清问题！ - Antonio Vasilev

整洁并且运行良好。 - Dan Jay

截至2021年，更本地化和友好的答案是： https://dev59.com/UmYr5IYBdhLWcg3wfaWd#57518703 - Jay Wick

25个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Diego Favero · Answer 1

const getOrdinalNum = (n) => n + (n > 0 ? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : '');

- Freewalker · Answer 2

强烈推荐优秀的date-fns库。它快速、模块化、不可变，并且与标准日期兼容。

import * as DateFns from 'date-fns';

const ordinalInt = DateFns.format(someInt, 'do');

请查看 date-fns 文档：https://date-fns.org/v2.0.0-alpha.9/docs/format

- Sir Kettle · Answer 3

我前几天写了这个简单的函数。虽然对于日期来说你不需要更大的数字，但是这个函数也可以处理更高的数值（例如1013th, 36021st等）。

var fGetSuffix = function(nPos){

    var sSuffix = "";

    switch (nPos % 10){
        case 1:
            sSuffix = (nPos % 100 === 11) ? "th" : "st";
            break;
        case 2:
            sSuffix = (nPos % 100 === 12) ? "th" : "nd";
            break;
        case 3:
            sSuffix = (nPos % 100 === 13) ? "th" : "rd";
            break;
        default:
            sSuffix = "th";
            break;
    }

    return sSuffix;
};

- hndcrftd · Answer 4

function ordsfx(a){return["th","st","nd","rd"][(a=~~(a<0?-a:a)%100)>10&&a<14||(a%=10)>3?0:a]}

此函数是一种实用工具函数，简短高效。适用于任何有符号/无符号整数/浮点数。（虽然我无法想象需要将浮点数序数化）。

请参阅注释版本 https://gist.github.com/furf/986113#file-annotated-js

- Geoffrey Booth · Answer 5

一种经过TypeScript类型检查批准的Intl.PluralRules答案版本：

const englishOrdinalRules = new Intl.PluralRules('en', { type: 'ordinal' })
/**
 * Format a number as an ordinal, e.g. `3` to `3rd`.
 * @link https://dev59.com/UmYr5IYBdhLWcg3wfaWd#57518703
 * @param {number} number To format
 */
export function formatNumberOrdinal(number) {
    const category = englishOrdinalRules.select(number)

    switch (category) {
        case 'one': {
            return `${number}st`
        }

        case 'two': {
            return `${number}nd`
        }

        case 'few': {
            return `${number}rd`
        }

        default: {
            return `${number}th`
        }
    }
}

- user10304 · Answer 6

我为自己的东西制作的旧版本...

function convertToOrdinal(number){
    if (number !=1){
        var numberastext = number.ToString();
        var endchar = numberastext.Substring(numberastext.Length - 1);
        if (number>9){
            var secondfromendchar = numberastext.Substring(numberastext.Length - 1);
            secondfromendchar = numberastext.Remove(numberastext.Length - 1);
        }
        var suffix = "th";
        var digit = int.Parse(endchar);
        switch (digit){
            case 3:
                if(secondfromendchar != "1"){
                    suffix = "rd";
                    break;
                }
            case 2:
                if(secondfromendchar != "1"){
                    suffix = "nd";
                    break;
                }
            case 1:
                if(secondfromendchar != "1"){
                    suffix = "st";
                    break;
                }
            default:
                suffix = "th";
                break;
         }
            return number+suffix+" ";
     } else {
            return;
     }
}

- Amaechi chuks · Answer 7

我为更高的数字和所有测试用例编写了这个函数。

function numberToOrdinal(num) {
    if (num === 0) {
        return '0'
    };
    let i = num.toString(), j = i.slice(i.length - 2), k = i.slice(i.length - 1);
    if (j >= 10 && j <= 20) {
        return (i + 'th')
    } else if (j > 20 && j < 100) {
        if (k == 1) {
            return (i + 'st')
        } else if (k == 2) {
            return (i + 'nd')
        } else if (k == 3) {
            return (i + 'rd')
        } else {
            return (i + 'th')
        }
    } else if (j == 1) {
        return (i + 'st')
    } else if (j == 2) {
        return (i + 'nd')
    } else if (j == 3) {
        return (i + 'rd')
    } else {
        return (i + 'th')
    }
}

- Sreehari · Answer 8

我想引用链接中提供的答案

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

- Bullyen · Answer 9

这里还有另一个选项。

function getOrdinalSuffix(day) {
        
    if(/^[2-3]?1$/.test(day)){
     return 'st';
    } else if(/^[2-3]?2$/.test(day)){
     return 'nd';
    } else if(/^[2-3]?3$/.test(day)){
     return 'rd';
    } else {
     return 'th';
    }
        
}
    
console.log(getOrdinalSuffix('1'));
console.log(getOrdinalSuffix('13'));
console.log(getOrdinalSuffix('22'));
console.log(getOrdinalSuffix('33'));

注意针对青少年的例外情况？青少年是如此尴尬！

编辑：忘记了11和12。

- Dave Cooper · Answer 10

这里有一个稍微不同的方法（我认为其他答案没有这样做）。我不确定我是喜欢它还是讨厌它，但它有效！

export function addDaySuffix(day: number) { 
  const suffixes =
      '  stndrdthththththththththththththththththstndrdthththththththst';
    const startIndex = day * 2;

    return `${day}${suffixes.substring(startIndex, startIndex + 2)}`;
  }