Пробелы между числом и символом

Форматирование числовых значений в денежных, процентных и измерительных полях часто требует контроля расстояния между числом и символом валюты, процента или другой единицы измерения. В разных странах и форматах записи используются разные правила:

  • 100$
  • $100
  • 100 $
  • € 100
  • 100 ₽

Библиотека AutoNumeric позволяет управлять такими пробелами через комбинацию параметров:

  • currencySymbol
  • currencySymbolPlacement
  • negativePositiveSignPlacement
  • использование обычных и неразрывных пробелов внутри символа валюты

Правильная настройка особенно важна для:

  • финансовых интерфейсов;
  • бухгалтерских систем;
  • международных приложений;
  • локализации форм;
  • предотвращения визуальных ошибок при переносе текста.

Пробел как часть символа валюты

В AutoNumeric пробел между числом и символом обычно задаётся не отдельной опцией, а включается непосредственно в значение currencySymbol.

Пример:

new AutoNumeric('#price', {
    currencySymbol: ' ₽',
    currencySymbolPlacement: 's'
});

Результат:

1 500 ₽

Здесь пробел расположен внутри строки ' ₽'.

Символ после числа с пробелом

Наиболее распространённый европейский формат:

1 250 €
15 000 ₽
100 ₸

Настройка:

new AutoNumeric('#price', {
    currencySymbol: ' €',
    currencySymbolPlacement: 's'
});

Разбор параметров

Параметр Значение
currencySymbol ' €'
currencySymbolPlacement 's'

's' означает размещение символа после числа (suffix).

Символ перед числом с пробелом

Американский и некоторые международные форматы используют символ перед значением:

$ 1,500
€ 2,000
¥ 3000

Конфигурация:

new AutoNumeric('#price', {
    currencySymbol: '$ ',
    currencySymbolPlacement: 'p'
});

Результат:

$ 1,500

Значение p

Параметр:

currencySymbolPlacement: 'p'

означает размещение символа перед числом (prefix).

Отсутствие пробела

Некоторые финансовые интерфейсы предпочитают компактный вид:

$1500
1500€

Настройка:

new AutoNumeric('#price', {
    currencySymbol: '$',
    currencySymbolPlacement: 'p'
});

или:

new AutoNumeric('#price', {
    currencySymbol: '€',
    currencySymbolPlacement: 's'
});

Использование неразрывного пробела

Обычный пробел может приводить к нежелательному переносу строки:

1000
₽

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

new AutoNumeric('#price', {
    currencySymbol: '\u00A0₽',
    currencySymbolPlacement: 's'
});

Результат визуально выглядит так же:

1 000 ₽

Но перенос между числом и символом уже невозможен.

Узкий неразрывный пробел

В профессиональной типографике часто применяется узкий неразрывный пробел (U+202F).

Пример:

new AutoNumeric('#price', {
    currencySymbol: '\u202F₽',
    currencySymbolPlacement: 's'
});

Такой вариант особенно полезен для:

  • финансовых отчётов;
  • таблиц;
  • интерфейсов с плотным отображением данных;
  • типографически корректной локализации.

Пробелы в процентах

AutoNumeric может форматировать проценты аналогичным образом.

Пример:

new AutoNumeric('#percent', {
    suffixText: ' %'
});

Результат:

25 %

Без пробела:

suffixText: '%'

Результат:

25%

Различие между currencySymbol и suffixText

currencySymbol

Используется для валют:

currencySymbol: ' ₽'

Поддерживает:

  • позиционирование;
  • работу с отрицательными числами;
  • форматирование денежных значений.

suffixText

Добавляет произвольный текст:

suffixText: ' кг'

Результат:

150 кг

Подходит для:

  • единиц измерения;
  • процентов;
  • пользовательских обозначений.

Форматирование единиц измерения

Килограммы

new AutoNumeric('#weight', {
    suffixText: ' кг'
});

Результат:

75 кг

Метры

new AutoNumeric('#distance', {
    suffixText: ' м'
});

Пиксели

new AutoNumeric('#size', {
    suffixText: ' px'
});

Международные стандарты пробелов

Разные локали используют разные правила.

Французский стиль

1 500 €

Конфигурация:

new AutoNumeric('#price', {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    currencySymbol: ' €',
    currencySymbolPlacement: 's'
});

Американский стиль

$1,500.00

Настройка:

new AutoNumeric('#price', {
    digitGroupSeparator: ',',
    decimalCharacter: '.',
    currencySymbol: '$',
    currencySymbolPlacement: 'p'
});

Русский стиль

1 500 ₽

Конфигурация:

new AutoNumeric('#price', {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    currencySymbol: ' ₽',
    currencySymbolPlacement: 's'
});

Влияние пробелов на экспорт значений

Важно различать:

  • отображаемое значение;
  • сырое значение (raw value).

Пример:

anElement.getFormatted();

Вернёт:

1 500 ₽

А:

anElement.getNumericString();

Вернёт:

1500

Пробелы и символы автоматически удаляются из числового значения.

Пробелы и HTML-верстка

При использовании обычных пробелов браузер может:

  • схлопывать пробелы;
  • переносить символ валюты;
  • нарушать выравнивание.

Поэтому для интерфейсов с высокой точностью отображения предпочтительнее:

currencySymbol: '\u00A0₽'

или:

currencySymbol: ' ₽'

Однако второй вариант работает только после HTML-интерпретации строки и не всегда подходит для прямой настройки AutoNumeric.

Наиболее надёжный вариант — Unicode-символ:

\u00A0

Совмещение с отрицательными числами

Пробелы влияют и на отображение отрицательных значений.

Пример:

new AutoNumeric('#price', {
    currencySymbol: ' ₽',
    currencySymbolPlacement: 's',
    negativePositiveSignPlacement: 'p'
});

Результат:

-1 500 ₽

Пробел внутри скобок

При бухгалтерском формате:

new AutoNumeric('#price', {
    currencySymbol: ' ₽',
    currencySymbolPlacement: 's',
    negativeBracketsTypeOnBlur: '(,)'
});

Результат:

(1 500 ₽)

Использование нескольких пробелов

Иногда интерфейсы требуют увеличенного расстояния:

currencySymbol: '  ₽'

Результат:

1 500  ₽

Такой подход обычно не рекомендуется, поскольку:

  • нарушает типографику;
  • создаёт проблемы выравнивания;
  • выглядит нестабильно в разных шрифтах.

Динамическая смена формата

Пробелы могут меняться при переключении локали.

Пример:

if (locale === 'fr') {
    anElement.update({
        currencySymbol: ' €',
        currencySymbolPlacement: 's'
    });
}

или:

if (locale === 'en-US') {
    anElement.update({
        currencySymbol: '$',
        currencySymbolPlacement: 'p'
    });
}

Частые ошибки

Пробел не отображается

Ошибка:

currencySymbol: '₽'

при ожидании:

1 500 ₽

Исправление:

currencySymbol: ' ₽'

Лишний пробел

Ошибка:

currencySymbol: ' ₽ '

Результат:

1 500 ₽

Появляется хвостовой пробел.

Неправильный перенос строки

Использование обычного пробела:

currencySymbol: ' ₽'

может приводить к переносу валюты на следующую строку.

Лучше:

currencySymbol: '\u00A0₽'

Практический пример денежного поля

new AutoNumeric('#salary', {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    decimalPlaces: 2,
    currencySymbol: '\u00A0₽',
    currencySymbolPlacement: 's'
});

Отображение:

125 000,00 ₽

Практический пример единиц измерения

new AutoNumeric('#speed', {
    digitGroupSeparator: ' ',
    decimalCharacter: '.',
    decimalPlaces: 1,
    suffixText: ' км/ч'
});

Результат:

120.5 км/ч

Практический пример процентов

new AutoNumeric('#tax', {
    decimalPlaces: 2,
    suffixText: ' %'
});

Результат:

20.00 %
Оглавление