Форматирование чисел (десятичные разряды, разделители тысяч и т. Д.) С помощью CSS


122

Можно ли форматировать числа с помощью CSS? То есть: десятичные знаки, десятичный разделитель, разделитель тысяч и т. Д.


62
Вы не можете, но действительно должны уметь. В конце концов, 50 000, 50000 или 50 000.00 - это одни и те же «данные», они просто представлены по-разному, для чего и нужен CSS.
punkrockbuddyholly

4
@MrMisterMan: Здесь есть несколько идей: wiki.csswg.org/ideas/content-formatting#numbers. Меня, вероятно, будут преследовать и обвинять в цитировании «спецификаций» и всевозможных надеждах. И мне любопытно узнать, как здесь будет обрабатываться нечисловой текст.
BoltClock

3
Хотя я согласен с тем, что это было бы неплохо, номер встроен в локализованную в противном случае страницу. То есть остальная часть страницы - английский, китайский или любой другой язык, и номера должны соответствовать этой локализации. Почему их нужно локализовать отдельно от остальной страницы ...?
deceze

@deceze: Вы правы. Должна быть возможна "локализация CSS"
Дон

1
добавление опции JS с использованием Intl.NumberFormat mdn-ref:
Джошуа Бабу

Ответы:


12

Вы можете использовать Number.prototype.toLocaleString(). Он также может форматироваться для других числовых форматов, например, латинского, арабского и т. Д.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString


2
Самый современный и элегантный подход, и поскольку его все еще невозможно реализовать с помощью CSS, должен быть ответ номер 1!
FMA


23

Ну, для любых чисел в Javascript я использую следующий:

var a = "1222333444555666777888999";
a = a.replace(new RegExp("^(\\d{" + (a.length%3?a.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();

и если вам нужно использовать любой другой разделитель в качестве запятой, например:

var sep = ",";
a = a.replace(/\s/g, sep);

или как функция:

function numberFormat(_number, _sep) {
    _number = typeof _number != "undefined" && _number > 0 ? _number : "";
    _number = _number.replace(new RegExp("^(\\d{" + (_number.length%3? _number.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();
    if(typeof _sep != "undefined" && _sep != " ") {
        _number = _number.replace(/\s/g, _sep);
    }
    return _number;
}

1
Спасибо. Не чистое решение CSS, но справляется со своей задачей!
Дон

Мне это нравится. Но мне также нужно было преобразовать число в строку перед заменой. Вы не можете заменить номер.
Mardok

перед вызовом _number.replaceмы должны убедиться, что это такая строка, _number = typeof _number != "undefined" && _number > 0 ? String(_number) : "";иначе вы получите сообщение об ошибке _number.replace: «Не определена или не функция»
Шалкам 01

3
почему бы просто не использовать: (123456789) .toLocaleString ('en-GB') или тому подобное?
Joehannes

16

Вероятно, лучший способ сделать это - установить диапазон с классом, обозначающим ваше форматирование, а затем использовать Jquery .each для форматирования промежутков при загрузке DOM ...


9

Нет, вы должны использовать javascript, когда он находится в DOM, или отформатировать его через серверную часть вашего языка (PHP / ruby ​​/ python и т. Д.)


5
Формат чисел - это вопрос содержания, такой как текст содержания или другие проблемы с обозначениями (например, обозначения даты, которые зависят от языка). Таким образом, форматирование чисел - это локализация, и с ней следует обращаться при создании контента. Выполнение этого в JavaScript имеет смысл для той части контента, которая генерируется JavaScript.
Юкка К. Корпела

Я полностью согласен с этим. Вот почему я написал это в своем ответе. Наверное, следовало придать этому большее значение.
mreq

Это может быть контент или презентация. Возьмем, к примеру rtl, CSS , который показывает один и тот же контент по-другому: нужно ли его обрабатывать на стороне сервера?
Дон

6

Не ответ, но, возможно, интересно. Несколько лет назад я отправил предложение в рабочую группу CSS . Однако ничего не произошло. Если они действительно (и поставщики браузеров) сочтут это серьезной проблемой для разработчиков, возможно, дело сдвинется с мертвой точки?


2
Спасибо за участие. Я надеюсь, что однажды он приживется.
ADJenks

4

Если это поможет ...

Я использую функцию PHP number_format()и Narrow No-break Space (  ). Его часто используют как однозначный разделитель тысяч.

echo number_format(200000, 0, "", " ");

Поскольку у IE8 есть некоторые проблемы с отображением узкого непрерывного пространства, я заменил его на SPAN

echo "<span class='number'>".number_format(200000, 0, "", "<span></span>")."</span>";
.number SPAN{
    padding: 0 1px; 
}

К сожалению, это на стороне сервера, есть небольшая нагрузка на ЦП, нам нужна возможность редактирования маски html / css. Оформление и рендеринг должны выполняться на стороне клиента, если мы не обслуживаем pdf?
mckenzm

2

Вы не можете использовать CSS для этой цели. Я рекомендую использовать JavaScript, если это возможно. Взгляните на это для получения дополнительной информации: JavaScript эквивалент printf / string.format

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


2

Я не думаю, что ты сможешь. Вы можете использовать number_format (), если пишете на PHP. И другие языки программирования также имеют функцию форматирования чисел.


ПЛОХАЯ практика изменять данные для отображения в «бэкэнде».
Buffalo

1

Вы можете использовать библиотеку тегов Jstl для форматирования страниц JSP

JSP Page
//import the jstl lib
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>

<c:set var="balance" value="120000.2309" />
<p>Formatted Number (1): <fmt:formatNumber value="${balance}" 
        type="currency"/></p>
<p>Formatted Number (2): <fmt:formatNumber type="number" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (3): <fmt:formatNumber type="number" 
        maxFractionDigits="3" value="${balance}" /></p>
<p>Formatted Number (4): <fmt:formatNumber type="number" 
        groupingUsed="false" value="${balance}" /></p>
<p>Formatted Number (5): <fmt:formatNumber type="percent" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (6): <fmt:formatNumber type="percent" 
        minFractionDigits="10" value="${balance}" /></p>
<p>Formatted Number (7): <fmt:formatNumber type="percent" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (8): <fmt:formatNumber type="number" 
        pattern="###.###E0" value="${balance}" /></p>

результат

Форматированный номер (1): 120 000,23 фунта стерлингов

Форматированный номер (2): 000.231

Отформатированное число (3): 120,000,231

Форматированный номер (4): 120000,231

Отформатированное число (5): 023%

Отформатированное число (6): 12 000 023.0900000000%

Отформатированное число (7): 023%

Форматированный номер (8): 120E3

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.