Позиция символа валюты

Параметр currencySymbolPlacement в библиотеке AutoNumeric определяет положение валютного символа относительно числового значения. Настройка влияет исключительно на визуальное отображение числа и не изменяет внутреннее значение поля.

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

  • $123
  • 123€
  • ₽ 1 500
  • 1 500 ₸
  • CHF 100

Корректное расположение валютного символа повышает читаемость финансовых данных и делает интерфейс привычным для пользователей конкретного региона.

Допустимые значения

Параметр поддерживает два основных значения:

Значение Описание
p Символ валюты располагается перед числом
s Символ валюты располагается после числа

Символ валюты перед числом

Значение p означает prefix — префиксное расположение.

Пример

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

Результат

$1,250.00

Такой формат используется:

  • в США;
  • Канаде;
  • Австралии;
  • ряде англоязычных стран.

Символ валюты после числа

Значение s означает suffix — суффиксное расположение.

Пример

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

Результат

1 250,00€

Такой вариант часто встречается:

  • во Франции;
  • Германии;
  • Испании;
  • Казахстане;
  • России.

Совместная работа с currencySymbol

Параметр currencySymbolPlacement не работает самостоятельно. Он всегда используется вместе с currencySymbol.

Пример

new AutoNumeric('#salary', {
    currencySymbol: '₸',
    currencySymbolPlacement: 's'
});

Результат

350 000₸

Если currencySymbol не указан, параметр позиционирования не имеет смысла.

Добавление пробела между числом и валютой

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

Пример

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

Результат

15 000 ₽

Обратите внимание: пробел добавлен непосредственно в строку валютного символа.

Неразрывный пробел

Для корректного отображения денежных значений часто используется неразрывный пробел.

Пример

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

Результат

15 000 ₽

Неразрывный пробел предотвращает перенос валюты на следующую строку.

Валюта перед числом с пробелом

Пример

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

Результат

$ 1,250.00

Подобное форматирование встречается реже, но иногда применяется в корпоративных системах и бухгалтерских интерфейсах.

Работа с отрицательными числами

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

Пример

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

Возможный результат

-$1,500.00

или

$-1,500.00

Итоговый вид зависит также от параметров:

  • negativePositiveSignPlacement
  • negativeBracketsTypeOnBlur

Комбинация с negativePositiveSignPlacement

Параметр negativePositiveSignPlacement управляет позицией знака минус относительно валюты и числа.

Пример

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

Результат

-1 200€

Другие варианты размещения:

1 200-€
1 200€-
€-1 200

Точная конфигурация зависит от бизнес-требований и национальных стандартов.

Использование с разными локалями

США

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

Результат:

$12,500.75

Европа

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

Результат:

12 500,75 €

Казахстан

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

Результат:

1 250 000 ₸

Россия

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

Результат:

95 000 ₽

Динамическое изменение позиции валюты

Настройки можно изменять после инициализации объекта.

Пример

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

an.update({
    currencySymbol: ' €',
    currencySymbolPlacement: 's'
});

До обновления

$1,500.00

После обновления

1 500,00 €

Переключение валют в интерфейсе

Частая задача — изменение валюты в зависимости от выбора пользователя.

Пример

function changeCurrency(currency) {
    switch(currency) {
        case 'USD':
            an.update({
                currencySymbol: '$',
                currencySymbolPlacement: 'p'
            });
            break;

        case 'EUR':
            an.update({
                currencySymbol: ' €',
                currencySymbolPlacement: 's'
            });
            break;

        case 'KZT':
            an.update({
                currencySymbol: ' ₸',
                currencySymbolPlacement: 's'
            });
            break;
    }
}

Влияние на методы получения значения

Положение валютного символа влияет только на отображение.

Пример

an.getFormatted();

Результат:

1 250 €
an.getNumericString();

Результат:

1250
an.getNumber();

Результат:

1250

Внутреннее числовое значение остаётся независимым от позиции валюты.

Использование в HTML-атрибутах

Настройка может задаваться через data-атрибуты.

Пример

<input
    type="text"
    data-currency-symbol=" ₸"
    data-currency-symbol-placement="s"
/>

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

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

currencySymbol: '₽'

Результат:

1500₽

Во многих интерфейсах такой формат выглядит слишком плотным.

Дублирование пробелов

currencySymbol: '  ₽'

Результат:

1500  ₽

Лишние пробелы ухудшают визуальное восприятие.

Неверное расположение для локали

currencySymbol: '$',
currencySymbolPlacement: 's'

Результат:

150$

Для пользователей США такой формат выглядит непривычно.

Практика локализации

При создании международных интерфейсов рекомендуется хранить настройки валют отдельно.

Пример конфигурации

const currencies = {
    USD: {
        currencySymbol: '$',
        currencySymbolPlacement: 'p'
    },

    EUR: {
        currencySymbol: ' €',
        currencySymbolPlacement: 's'
    },

    RUB: {
        currencySymbol: ' ₽',
        currencySymbolPlacement: 's'
    },

    KZT: {
        currencySymbol: ' ₸',
        currencySymbolPlacement: 's'
    }
};

Использование вместе с пресетами

Многие пресеты AutoNumeric уже содержат корректное положение валютного символа.

Пример

new AutoNumeric('#price', AutoNumeric.getPredefinedOptions().euro);

Результат будет соответствовать европейскому формату:

1 234,56 €

Поведение при фокусе и потере фокуса

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

Пример

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

При фокусе

15000

После blur

15 000 ₽

Это особенно полезно для упрощения редактирования длинных денежных значений.

Совместимость с бухгалтерскими форматами

В бухгалтерских системах часто применяются строгие правила отображения:

1 500,00 ₽

или

(1 500,00 ₽)

Позиция валютного символа должна учитывать:

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

Производительность и рендеринг

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

Даже при большом количестве полей:

document.querySelectorAll('.money').forEach(el => {
    new AutoNumeric(el, {
        currencySymbol: ' ₸',
        currencySymbolPlacement: 's'
    });
});

операции форматирования выполняются быстро и не создают заметной нагрузки на интерфейс.

Оглавление