Javascript 为数字添加 st、nd、rd 和 th(序数)后缀
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/13627308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add st, nd, rd and th (ordinal) suffix to a number
提问by Antonio Vasilev
I would like to dynamically generate a string of text based on a current day. So, for example, if it is day 1 then I would like my code to generate = "Its the <dynamic>1*<dynamic string>st</dynamic string>*</dynamic>".
我想根据当天动态生成一串文本。因此,例如,如果是第 1 天,那么我希望我的代码生成 = "Its the <dynamic>1*<dynamic string> st</dynamic string>*</dynamic>"。
There are 12 days in total so I have done the following:
总共有12天,所以我做了以下事情:
I've set up a for loop which loops through the 12 days.
In my html I have given my element a unique id with which to target it, see below:
<h1 id="dynamicTitle" class="CustomFont leftHeading shadow">On The <span></span> <em>of rest of generic text</em></h1>Then, inside my for loop I have the following code:
$("#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" }
我已经设置了一个循环 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" }
UPDATE
更新
This is the entire for loop as requested:
这是请求的整个 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) {
}
}
}
回答by Salman A
The rulesare as follows:
该规则如下:
- st is used with numbers ending in 1 (e.g. 1st, pronounced first)
- nd is used with numbers ending in 2 (e.g. 92nd, pronounced ninety-second)
- rd is used with numbers ending in 3 (e.g. 33rd, pronounced thirty-third)
- As an exception to the above rules, all the "teen" numbers ending with 11, 12 or 13 use -th (e.g. 11th, pronounced eleventh, 112th, pronounced one hundred [and] twelfth)
- th is used for all other numbers (e.g. 9th, pronounced ninth).
- st 与以 1 结尾的数字一起使用(例如 1st,首先发音)
- nd 与以 2 结尾的数字一起使用(例如 92nd,发音为 90 秒)
- rd 与以 3 结尾的数字一起使用(例如 33rd,发音为 3/3)
- 作为上述规则的一个例外,所有以 11、12 或 13 结尾的“青少年”数字都使用 -th(例如 11th,发音为 11th,112th,发音为 100[and]12th)
- th 用于所有其他数字(例如 9th,发音为 9th)。
The following JavaScript code (rewritten in Jun '14) accomplishes this:
以下 JavaScript 代码(在 14 年 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";
}
Sample output for numbers between 0-115:
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
回答by Fizer Khan
回答by Tomas Langkaas
Minimal one-line approach for ordinal suffixes
序数后缀的最小单行方法
function nth(n){return["st","nd","rd"][((n+90)%100-10)%10-1]||"th"}
(this is for positive integers, see below for other variations)
(这是针对正整数,其他变化见下文)
Explanation
解释
Start with an array with the suffixes ["st", "nd", "rd"]. We want to map integers ending in 1, 2, 3 (but not ending in 11, 12, 13) to the indexes 0, 1, 2.
从带有后缀的数组开始["st", "nd", "rd"]。我们想将以 1、2、3 结尾(但不以 11、12、13 结尾)的整数映射到索引 0、1、2。
Other integers (including those ending in 11, 12, 13) can be mapped to anything else—indexes not found in the array will evaluate to undefined. This is falsy in javascript and with the use of logical or (|| "th") the expression will return "th"for these integers, which is exactly what we want.
其他整数(包括以 11、12、13 结尾的整数)可以映射到其他任何东西——在数组中找不到的索引将计算为undefined。这在 javascript 中是错误的,并且使用逻辑 or ( || "th") 表达式将返回"th"这些整数,这正是我们想要的。
The expression ((n + 90) % 100 - 10) % 10 - 1does the mapping. Breaking it down:
表达式((n + 90) % 100 - 10) % 10 - 1进行映射。分解它:
(n + 90) % 100: This expression takes the input integer − 10 mod 100, mapping 10 to 0, ... 99 to 89, 0 to 90, ..., 9 to 99. Now the integers ending in 11, 12, 13 are at the lower end (mapped to 1, 2, 3).- 10: Now 10 is mapped to −10, 19 to −1, 99 to 79, 0 to 80, ... 9 to 89. The integers ending in 11, 12, 13 are mapped to negative integers (−9, −8, −7).% 10: Now all integers ending in 1, 2, or 3 are mapped to 1, 2, 3. All other integers are mapped to something else (11, 12, 13 are still mapped to −9, −8, −7).- 1: Subtracting one gives the final mapping of 1, 2, 3 to 0, 1, 2.
(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的最终映射。
Verifying that it works
验证它是否有效
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>
Variations
变化
Allowing negative integers:
允许负整数:
function nth(n){return["st","nd","rd"][(((n<0?-n:n)+90)%100-10)%10-1]||"th"}
In ES6 fat arrow syntax (anonymous function):
在 ES6 粗箭头语法(匿名函数)中:
n=>["st","nd","rd"][(((n<0?-n:n)+90)%100-10)%10-1]||"th"
Update
更新
An even shorter alternative for positive integers is the expression
一个更短的正整数替代方法是表达式
[,'st','nd','rd'][n%100>>3^1&&n%10]||'th'
See this postfor explanation.
请参阅此帖子以获取解释。
Update 2
更新 2
[,'st','nd','rd'][n/10%10^1&&n%10]||'th'
回答by Theo Kouzelis
You can use the moment libraries local data functions.
您可以使用矩库本地数据函数。
Code:
代码:
moment.localeData().ordinal(1)
//1st
回答by Jamiec
You've only got 12 days? I'd be tempted to make it just a simple lookup array:
你只有12天?我很想让它只是一个简单的查找数组:
var suffixes = ['','st','nd','rd','th','th','th','th','th','th','th','th','th'];
then
然后
var i = 2;
var day = i + suffixes[i]; // result: '2nd'
or
或者
var i = 8;
var day = i + suffixes[i]; // result: '8th'
回答by nick
By splitting the number into an array and reversing we can easily check the last 2 digits of the number using array[0]and array[1].
通过将数字拆分为数组并反转,我们可以使用array[0]和轻松检查数字的最后 2 位数字array[1]。
If a number is in the teens array[1] = 1it requires "th".
如果一个数字是十几岁,array[1] = 1它需要“th”。
function getDaySuffix(num)
{
var array = ("" + num).split("").reverse(); // E.g. 123 = array("3","2","1")
if (array[1] != "1") { // Number is in the teens
switch (array[0]) {
case "1": return "st";
case "2": return "nd";
case "3": return "rd";
}
}
return "th";
}
回答by Константин Ван
Intl.PluralRules, the standardmethod.
Intl.PluralRules,标准方法。
I would just like to drop the canonical way of doing this in here, as nobody seems to know it.
我只想在这里放弃执行此操作的规范方式,因为似乎没有人知道。
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);
回答by Johnny
function getSuffix(n) {return n < 11 || n > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((n - 1) % 10, 3)] : 'th'}
回答by Jimmery
I wrote this function to solve this problem:
我写了这个函数来解决这个问题:
// this is for adding the ordinal suffix, turning 1, 2 and 3 into 1st, 2nd and 3rd
Number.prototype.addSuffix=function(){
var n=this.toString().split('.')[0];
var lastDigits=n.substring(n.length-2);
//add exception just for 11, 12 and 13
if(lastDigits==='11' || lastDigits==='12' || lastDigits==='13'){
return this+'th';
}
switch(n.substring(n.length-1)){
case '1': return this+'st';
case '2': return this+'nd';
case '3': return this+'rd';
default : return this+'th';
}
};
With this you can just put .addSuffix()to any number and it will result in what you want. For example:
有了这个,你可以.addSuffix()输入任何数字,它会产生你想要的结果。例如:
var number=1234;
console.log(number.addSuffix());
// console will show: 1234th
回答by Daniel Harvey
An alternative version of the ordinal function could be as follows:
序数函数的替代版本可能如下所示:
function toCardinal(num) {
var ones = num % 10;
var tens = num % 100;
if (tens < 11 || tens > 13) {
switch (ones) {
case 1:
return num + "st";
case 2:
return num + "nd";
case 3:
return num + "rd";
}
}
return num + "th";
}
The variables are named more explicitly, uses camel case convention, and might be faster.
变量命名更明确,使用驼峰式大小写约定,并且可能更快。

