javascript - чисел - jquery mask number



Добавьте суффикс st, nd, rd и th(порядковый номер) в число (10)

Минимальный однострочный подход для порядковых суффиксов

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 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, 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'

См. Это сообщение для объяснения.

Я хотел бы динамически генерировать строку текста, основанную на текущем дне. Так, например, если это день 1, я хотел бы, чтобы мой код сгенерировал = «Его <dynamic> 1 * <dynamic string> st </ dynamic string> * </ dynamic>".

Всего 12 дней, поэтому я сделал следующее:

  1. Я настроил цикл for, который проходит через 12 дней.

  2. В моем html я дал моему элементу уникальный идентификатор, с которым можно настроить его, см. Ниже:

    <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"
    }
    

ОБНОВИТЬ

Это полный цикл цикла по запросу:

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

Альтернативный вариант ординальной функции может быть следующим:

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";
}

Переменные называются более явно, использует соглашение о случае с верблюдом и может быть быстрее.


На днях я написал эту простую функцию. Хотя для даты вам не нужны более крупные номера, это будет обслуживать и более высокие значения (1013, 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;
};

От Shopify

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

Старый, который я сделал для своих вещей ...

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

У вас всего 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'

Я хотел бы дать функциональный ответ на этот вопрос в дополнение к существующему ответу:

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'.

Наш номер функцииToOrdinal проверяет, заканчивается ли число в подростковом номере, в этом случае добавьте число с «th», так как все порядковые номера чисел «th». В случае, если число не является подростком, мы передаем номер 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

пытаться

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

console.log(getOrdinal(10)

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

Короткие, сладкие и эффективные, как и функции утилиты. Работает с любым подписанным / unsigned integer / float. (Несмотря на то, что я не могу представить себе необходимость упорядочивать поплавки)


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

Вы можете использовать

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

для позиционирования суффикса





numbers