現在の日付に基づいてテキストの文字列を動的に生成したいと思います。したがって、たとえば、1日目であれば、コードで「= <Its the <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"
}
UPDATE
これは、要求された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) {
}
}
}
rules は次のとおりです。
- stは、1で終わる数字で使用されます(例:1st、最初に発音)
- ndは2で終わる数字で使用されます(例:92nd、90秒と発音)
- rdは、末尾が3の数字で使用されます(例:33rd、33番目と発音)
- 上記の規則の例外として、11、12、または13で終わるすべての「ティーン」番号は-thを使用します(例: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
From 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
に評価されます。これはjavascriptでは偽であり、論理的または(|| "th"
)を使用すると、式はこれらの整数に対して"th"
を返します。これはまさに私たちが望むものです。
式((n + 90) % 100 - 10) % 10 - 1
がマッピングを行います。分解する:
(n + 90) % 100
:この式は、10から0、... 99から89、0から90、...、9から99にマッピングされた入力整数-10 mod 100を取ります。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'
説明については この投稿 をご覧ください。
数値を配列に分割して逆にすることにより、array[0]
とarray[1]
を使用して、数値の最後の2桁を簡単に確認できます。
数値が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";
}
まだ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'
function getSuffix(n) {return n < 11 || n > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((n - 1) % 10, 3)] : 'th'}
順序関数の代替バージョンは次のとおりです。
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";
}
変数はより明示的に名前が付けられ、キャメルケースの規則が使用され、より高速になる場合があります。
この問題を解決するためにこの関数を書きました。
// 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 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
ユーティリティ関数がそうであるように、短く、甘く、効率的です。符号付き/符号なし整数/浮動小数点で動作します。 (フロートを順序付けする必要があるとは想像できませんが)
先日、この単純な関数を書きました。日付には大きな数字は必要ありませんが、これは高い値(1013番目、36021番目など)にも対応します。
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 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')
}
}
別のオプションがあります。
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'));
10代の例外に注意してください。十代の若者たちはとても気難しいです!
編集:11日と12日を忘れました
Intl.PluralRules
、standardメソッド。誰もそれを知らないようですので、ここに標準的な方法を落としたいと思います。
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);
これを強くお勧めします。非常に簡単で読みやすいです。役立つと思いますか?
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
既存の回答を補完するために、この質問に機能的な回答を提供したかったのです。
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)
特別な値の配列を作成しました。覚えておくべき重要なことは、配列にゼロベースのインデックスがあるため、ordinalSuffix [0]が 'st'に等しいことです。
関数numberToOrdinalは、数字が10進数で終わるかどうかをチェックします。この場合、数字の序数はすべて「th」なので、数字に「th」を追加します。数値が10代ではない場合、addSuffixに数値を渡します。この数値は、数値から1を引いた値(ゼロベースのインデックスを使用しているため)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
優れた 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 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;
}
}