숫자에 st, nd, rd 및 th (소수) 접미사 추가
현재 날짜를 기준으로 텍스트 문자열을 동적으로 생성하고 싶습니다. 예를 들어, 1 일이면 코드에서 = "<dynamic> 1 * <dynamic string> st </ dynamic string> * </ dynamic>" 을 생성하고 싶습니다 .
총 12 일이 있으므로 다음을 수행했습니다.
12 일 동안 반복되는 for 루프를 설정했습니다.
내 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" }
최신 정보
요청 된 전체 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) {
}
}
}
규칙은 다음과 같습니다 :
- st는 1로 끝나는 숫자와 함께 사용됩니다 (예 : 첫 번째, 첫 발음)
- nd는 2로 끝나는 숫자와 함께 사용됩니다 (예 : 92nd, 90 초 발음)
- rd는 3으로 끝나는 숫자와 함께 사용됩니다 (예 : 33 번, 33 번 발음)
- 위의 규칙을 제외하고 11, 12 또는 13으로 끝나는 모든 "teen"숫자는 11 번째 (예 : 11 번째, 11 번째, 112 번째, 100 번째, 12 번째)를 사용합니다.
- th는 다른 모든 숫자 (예 : 9 일, 9 번 발음)에 사용됩니다.
다음 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";
}
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
에서 Shopify
function getNumberWithOrdinal(n) {
var s=["th","st","nd","rd"],
v=n%100;
return n+(s[(v-20)%10]||s[v]||s[0]);
}
서수 접미사에 대한 최소 한 줄 접근
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. 배열에서 찾을 수없는 인덱스는로 평가됩니다 . 이것은 자바 스크립트에서 거짓이며 논리 또는 ( || "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'
설명 은 이 게시물 을 참조하십시오 .
12 일밖에 안 남았 어? 간단한 조회 배열로 만들고 싶습니다.
var suffixes = ['','st','nd','rd','th','th','th','th','th','th','th','th','th'];
그때
var i = 2;
var day = i + suffixes[i]; // result: '2nd'
또는
var i = 8;
var day = i + suffixes[i]; // result: '8th'
숫자를 배열로 나누고 뒤집 으면 array[0]and를 사용하여 숫자의 마지막 두 자리를 쉽게 확인할 수 있습니다 array[1].
숫자가 10 대인 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";
}
function getSuffix(n) {return n < 11 || n > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((n - 1) % 10, 3)] : 'th'}
이 문제를 해결하기 위해이 기능을 작성했습니다.
// 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';
}
};
이것으로 당신은 .addSuffix()어떤 숫자로도 넣을 수 있으며 원하는 결과를 얻을 수 있습니다. 예를 들면 다음과 같습니다.
var number=1234;
console.log(number.addSuffix());
// console will show: 1234th
서수 함수의 대체 버전은 다음과 같습니다.
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";
}
변수의 이름은보다 명확하게 지정되어 있으며 낙타 사례 규칙을 사용하며 더 빠를 수 있습니다.
요 전날이 간단한 기능을 썼습니다. 날짜의 경우 더 큰 숫자가 필요하지 않지만 더 높은 값 (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;
};
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 에서 주석이 달린 버전 참조
유틸리티 기능과 마찬가지로 짧고 달콤하며 효율적입니다. 부호있는 / 부호없는 정수 / 부동 소수점과 함께 작동합니다. (수레를 순서화 할 필요성을 상상할 수는 없지만)
다른 옵션이 있습니다.
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를 잊어 버렸습니다.
기존 답변을 보완하기 위해이 질문에 기능적인 답변을 제공하고 싶었습니다.
const ordinalSuffix = ['st', 'nd', 'rd']
const addSuffix = n => n + (ordinalSuffix[(n - 1) % 10] || 'th')
const numberToOrdinal = n => `${n}`.match(/1\d$/) ? n + 'th' : addSuffix(n)
우리는 특별한 값의 배열을 만들었습니다. 기억해야 할 중요한 것은 배열은 0부터 시작하는 인덱스를 가지므로 ordinalSuffix [0]은 'st'와 같습니다.
우리의 함수 numberToOrdinal은 숫자가 십대 숫자로 끝나는 지 확인합니다.이 경우 숫자 서 수가 모두 'th'이므로 숫자에 'th'를 추가하십시오. 숫자가 십대가 아닌 경우 숫자를 addSuffix에 전달합니다.이 숫자는 서수에 숫자를 뺀 것입니다.이 숫자는 1을 뺀 것입니다 (0 기준 인덱스를 사용하기 때문에) mod 10의 나머지는 2입니다. 이하는 배열에서 가져 오며, 그렇지 않으면 'th'입니다.
샘플 출력 :
numberToOrdinal(1) // 1st
numberToOrdinal(2) // 2nd
numberToOrdinal(3) // 3rd
numberToOrdinal(4) // 4th
numberToOrdinal(5) // 5th
numberToOrdinal(6) // 6th
numberToOrdinal(7) // 7th
numberToOrdinal(8) // 8th
numberToOrdinal(9) // 9th
numberToOrdinal(10) // 10th
numberToOrdinal(11) // 11th
numberToOrdinal(12) // 12th
numberToOrdinal(13) // 13th
numberToOrdinal(14) // 14th
numberToOrdinal(101) // 101st
내 물건을 위해 만든 오래된 것 ...
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;
}
}
우수한 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
더 높은 숫자와 모든 테스트 사례에 대해이 기능을 작성했습니다.
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')
}
}
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(100)
.fill()
.map((_, index) => index)
.map(ordinal)
.join(" ");
console.log(test);이 페이지의 답변 목록에이 es6 스타일이 표시되지 않으며 내가 사용하는 방식입니다.
const ordinal_suffix_of = (i) => {
const 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"
}
나는 이것을 강력히 추천합니다. 읽기 쉽고 간단합니다. 도움이 되길 바랍니다.
- 음의 정수, 즉 1보다 작은 수의 사용을 피하고 false를 반환합니다.
- 입력이 0이면 0을 반환
function numberToOrdinal(n) {
let result;
if(n < 0){
return false;
}else if(n === 0){
result = "0";
}else if(n > 0){
let nToString = n.toString();
let lastStringIndex = nToString.length-1;
let lastStringElement = nToString[lastStringIndex];
if( lastStringElement == "1" && n % 100 !== 11 ){
result = nToString + "st";
}else if( lastStringElement == "2" && n % 100 !== 12 ){
result = nToString + "nd";
}else if( lastStringElement == "3" && n % 100 !== 13 ){
result = nToString + "rd";
}else{
result = nToString + "th";
}
}
return result;
}
console.log(numberToOrdinal(-111));
console.log(numberToOrdinal(0));
console.log(numberToOrdinal(11));
console.log(numberToOrdinal(15));
console.log(numberToOrdinal(21));
console.log(numberToOrdinal(32));
console.log(numberToOrdinal(43));
console.log(numberToOrdinal(70));
console.log(numberToOrdinal(111));
console.log(numberToOrdinal(300));
console.log(numberToOrdinal(101));
산출
false
0
11th
15th
21st
32nd
43rd
70th
111th
300th
101st
여기 약간 다른 접근 방식이 있습니다 (다른 답변은 그렇게 생각하지 않습니다). 나는 그것을 사랑하는지 싫어하는지 확실하지 않지만 작동합니다!
export function addDaySuffix(day: number) {
const suffixes =
' stndrdthththththththththththththththththstndrdthththththththst';
const startIndex = day * 2;
return `${day}${suffixes.substring(startIndex, startIndex + 2)}`;
}
<p>31<sup>st</sup> March 2015</p>당신이 사용할 수있는
1<sup>st</sup> 2<sup>nd</sup> 3<sup>rd</sup> 4<sup>th</sup>
접미사 배치
참고 URL : https://stackoverflow.com/questions/13627308/add-st-nd-rd-and-th-ordinal-suffix-to-a-number
'Programing' 카테고리의 다른 글
| UIButton의 titleLabel에 대해 x, y 위치를 조정할 수 있습니까? (0) | 2020.07.20 |
|---|---|
| Android Studio 및 Gradle과 함께 ViewPagerIndicator 라이브러리 사용 (0) | 2020.07.20 |
| MongoClient v3.0을 사용할 때 db.collection이 함수가 아닙니다 (0) | 2020.07.20 |
| "약식"또는 "정규식"의 올바른 속기는 무엇입니까? (0) | 2020.07.20 |
| 언제 디자인의 일부로 UUID를 사용해야합니까? (0) | 2020.07.20 |