현재 날짜를 기준으로 텍스트 문자열을 동적으로 생성하고 싶습니다. 예를 들어, 1 일이면 코드에서 = "<dynamic> 1 * <dynamic string> st </ dynamic string> * </ dynamic>" 을 생성하고 싶습니다 .

총 12 일이 있으므로 다음을 수행했습니다.

1. 12 일 동안 반복되는 for 루프를 설정했습니다.

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

규칙은 다음과 같습니다 :

• st는 1로 끝나는 숫자와 함께 사용됩니다 (예 : 첫 번째, 첫 발음)
• nd는 2로 끝나는 숫자와 함께 사용됩니다 (예 : 92 번째, 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]);
}

[-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))
);

서수 접미사에 대한 최소 한 줄 접근

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'

설명 은 이 게시물 을 참조하십시오 .

업데이트 2

[,'st','nd','rd'][n/10%10^1&&n%10]||'th'

모멘트 라이브러리 로컬 데이터 함수를 사용할 수 있습니다 .

암호:

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

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);

• Intl.PluralRules생성자 (안 ECMA-402)
• 유니 코드의 6 가지 복수 범주

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')
    }
}

여기 약간 다른 접근 방식이 있습니다 (다른 답변은 그렇게 생각하지 않습니다). 나는 그것을 사랑하는지 싫어하는지 확실하지 않지만 작동합니다!

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

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

이것은 es6의 한 라이너와 연인을위한 것입니다

let i= new Date().getDate 

// I can be any number, for future sake we'll use 9

const j = I % 10;
const k = I % 100;

i = `${i}${j === 1 &&  k !== 11 ? 'st' : j === 2 && k !== 12 ? 'nd' : j === 3 && k !== 13 ? 'rd' : 'th'}`}

console.log(i) //9th

+ 번호의 또 다른 옵션은 다음과 같습니다.

console.log(["st","nd","rd"][((i+90)%100-10)%10-1]||"th"]

또한 서수 접두사를 제거하려면 다음을 사용하십시오.

console.log(i.parseInt("8th"))

console.log(i.parseFloat("8th"))

필요에 따라 자유롭게 수정하십시오

이 scales::ordinal()기능을 사용할 수도 있습니다 . 빠르고 사용하기 쉽습니다.

scales::ordinal(1:12)
## [1] "1st"  "2nd"  "3rd"  "4th"  "5th"  "6th"  "7th"  "8th"  "9th"  "10th" "11th" "12th"

나는 이것을 강력히 추천합니다. 읽기 쉽고 간단합니다. 도움이 되길 바랍니다.

• 음의 정수, 즉 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

<p>31<sup>st</sup> March 2015</p>

당신이 사용할 수있는

1<sup>st</sup> 2<sup>nd</sup> 3<sup>rd</sup> 4<sup>th</sup>

접미사 배치