Швейцарский франк

Работа с денежными значениями в формате швейцарского франка в AutoNumeric требует учёта специфики локали: использование пробела как разделителя тысяч, запятая как десятичного разделителя, а также особенности отображения символа валюты CHF, который может располагаться как до, так и после числа в зависимости от требований интерфейса.

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

Базовая конфигурация для CHF

Основой для настройки швейцарского франка является набор параметров, определяющих формат числа:

  • разделитель тысяч: пробел " "
  • десятичный разделитель: запятая ","
  • символ валюты: "CHF"
  • позиция символа: префикс или суффикс
  • точность: обычно 2 знака после запятой

Пример инициализации AutoNumeric:

import AutoNumeric from 'autonumeric';

const options = {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    currencySymbol: 'CHF ',
    currencySymbolPlacement: 'p',
    decimalPlaces: 2,
    minimumValue: '0',
    modifyValueOnWheel: false
};

new AutoNumeric('#amount', options);

Такая конфигурация формирует отображение вида:

CHF 12 345,67

Особенности швейцарского формата чисел

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

  1. Группировка разрядов Разделение тысяч выполняется пробелами, а не запятыми или точками. Это снижает визуальную перегруженность больших чисел.

  2. Десятичная часть Используется запятая, что соответствует европейской системе нотации.

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

  4. Жёсткая типизация ввода AutoNumeric предотвращает ввод символов, не соответствующих числовому формату, включая множественные десятичные разделители.

Настройка строгого режима ввода

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

const strictOptions = {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    currencySymbol: 'CHF ',
    currencySymbolPlacement: 'p',
    decimalPlaces: 2,
    decimalPlacesRawValue: 2,
    allowDecimalPadding: true,
    minimumValue: '-999999999',
    maximumValue: '999999999',
    selectNumberOnly: true,
    emptyInputBehavior: 'zero'
};

new AutoNumeric('#amount', strictOptions);

В этом режиме обеспечивается:

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

Работа с внутренним и отображаемым значением

AutoNumeric разделяет два уровня представления данных:

  • formatted value — значение, отображаемое пользователю
  • raw value — числовое значение без форматирования

Пример получения данных:

const anElement = new AutoNumeric('#amount', options);

anElement.set(12345.6);

console.log(anElement.getNumericString()); // "12345.60"
console.log(anElement.getFormatted());     // "CHF 12 345,60"

Использование raw-значения критично при передаче данных на сервер, чтобы исключить ошибки преобразования локализованных форматов.

Динамическое переключение валютного символа

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

anElement.update({
    currencySymbol: 'CHF ',
    currencySymbolPlacement: 'p'
});

Также возможно переключение на формат без валютного символа:

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

Это полезно при переключении режимов отображения: бухгалтерский, аналитический, экспортный.

Обработка отрицательных значений

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

const negativeOptions = {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    currencySymbol: 'CHF ',
    currencySymbolPlacement: 'p',
    negativeSignCharacter: '-',
    negativeBracketsTypeOnBlur: null
};

Отрицательные значения отображаются как:

CHF -1 250,00

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

negativeBracketsTypeOnBlur: '(,)'

Результат:

CHF (1 250,00)

Интеграция с формами ввода

AutoNumeric активно используется в формах, где требуется синхронизация пользовательского ввода и бизнес-логики.

Пример привязки к input-элементу:

<input id="salary" type="text" />
const salary = new AutoNumeric('#salary', {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    currencySymbol: 'CHF ',
    currencySymbolPlacement: 'p',
    decimalPlaces: 2
});

Получение значения при отправке формы:

document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();

    const value = salary.getNumber(); // числовое значение
    console.log(value);
});

Массовая инициализация полей

В интерфейсах с множеством финансовых полей применяется массовая инициализация:

AutoNumeric.multiple('.chf-input', {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    currencySymbol: 'CHF ',
    currencySymbolPlacement: 'p',
    decimalPlaces: 2
});

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

Конвертация и адаптация данных

При работе с серверными API часто требуется преобразование форматов:

  • сервер ожидает 12345.67
  • интерфейс отображает CHF 12 345,67

AutoNumeric автоматически решает эту задачу через методы извлечения raw-значений.

Пример подготовки payload:

const payload = {
    amount: anElement.getNumber()
};

Такой подход исключает ошибки, связанные с локализованными символами и разделителями.

Поведение при очистке поля

Очистка поля регулируется параметром:

emptyInputBehavior: 'null'

Возможные варианты:

  • 'null' — возвращает null
  • 'zero' — подставляет 0
  • 'focus' — очищает при фокусе

Для финансовых приложений часто используется null, чтобы различать отсутствие значения и ноль.

Ограничение ввода и защита данных

AutoNumeric позволяет предотвращать ввод некорректных значений на уровне UI:

{
    minimumValue: '0',
    maximumValue: '1000000'
}

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

Согласованность отображения в разных локалях

Несмотря на то, что CHF ассоциируется со Швейцарией, формат может варьироваться:

  • немецкая локаль: 1 234.56 CHF
  • французская локаль: CHF 1 234,56
  • итальянская локаль: аналогичный европейский формат

AutoNumeric позволяет адаптировать поведение через комбинацию параметров decimalCharacter, digitGroupSeparator и currencySymbolPlacement, обеспечивая совместимость с различными региональными стандартами без изменения бизнес-логики.

Оглавление