Форматування чисел (десяткових знаків, тисяч роздільників тощо) за допомогою CSS


121

Чи можна форматувати номери за допомогою CSS? Тобто: десяткові знаки, десятковий роздільник, роздільник тисяч тощо.


61
Ти не можеш, але ти справді повинен вміти. Зрештою, 50000 або 50000 або 50 000,00 - це все ті ж «дані», вони просто представлені по-різному, для чого і CSS.
punkrockbuddyholly

4
@MrMisterMan: Тут викидаються деякі ідеї: wiki.csswg.org/ideas/content-formatting#numbers Я, мабуть, буде зазнавати утисків та звинувачення у цитуванні "технічних характеристик" та одержанні всіх надій. І мені цікаво знати, як тут буде оброблятися нечисловий текст.
BoltClock

3
Хоча я згоден з тим, що це було б непогано мати, номер вбудований в іншу локалізовану сторінку. Тобто, решта сторінки - це англійська, китайська або будь-яка інша мова, і номери повинні IMO відповідати цій локалізації. Чому вони повинні бути локалізовані окремо від решти сторінки ...?
дегель

@deceze: Ви маєте рацію. Потрібно мати можливість "локалізації CSS" s
Дон

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, але це робить завдання!
Дон

Мені це подобається. Але мені також потрібно було перетворити число в рядок перед заміною. Не можна робити заміну на номер.
Мардок

перед тим, як дзвонити, _number.replaceми повинні переконатися, що це такий рядок, _number = typeof _number != "undefined" && _number > 0 ? String(_number) : "";інакше ви отримаєте помилку, _number.replaceяка не визначена чи не функція
Shalkam

3
чому б просто не використовувати: (123456789) .toLocaleString ('en-GB') тощо?
Джоханнес

16

Мабуть, найкращий спосіб зробити це комбінація встановлення прольоту з класом, що позначає ваше форматування, а потім використовуйте Jquery .each для форматування на проміжки, коли DOM завантажується ...


9

Ні, вам потрібно використовувати javascript, коли він знаходиться в DOM або відформатувати його через вашу мову на сервері (PHP / ruby ​​/ python тощо)


5
Формат чисел - це питання змісту, як текст вмісту або інші нотаційні питання (наприклад, позначення дат, які залежать від мови). Отже, форматування чисел - це локалізація, і їх слід обробляти, коли створюється вміст. Робити це в JavaScript має сенс для частини контенту, що створюється JavaScript.
Jukka K. Korpela

Я з цим повністю згоден. Ось чому я написав це у своїй відповіді. Напевно, варто було б поставити на це більше напруги.
mreq

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

6

Не відповідь, а цікаві perhpas. Я надіслав пропозицію до робочої групи CSS кілька років тому. Однак нічого не сталося. Якщо б вони (і постачальники браузерів) бачили це як справжнє занепокоєння розробника, можливо, м'яч міг би почати котитися?


2
Дякуємо за ваш внесок. Сподіваюся, одного дня це наздожене.
ADJenks

4

Якщо це допоможе ...

Я використовую функцію PHP number_format()і вузький пробіл без перерви (  ). Його часто використовують як однозначний роздільник тисяч.

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. І інші мови програмування також мають функцію форматування чисел.


Практика BAD змінювати дані для цілей відображення у "резервному".
Буффало

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): 12000,023.0900000000%

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

Відформатоване число (8): 120E3

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.