Символ валюты

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

AutoNumeric не изменяет само числовое значение. Символ валюты является частью форматирования интерфейса и используется исключительно для отображения.

Примеры:

1000      -> $1,000
1000      -> €1 000
1000      -> ₽1 000
1000      -> 1,000 USD
1000      -> 1 000 тенге

Для управления символом валюты используются несколько взаимосвязанных параметров:

  • currencySymbol
  • currencySymbolPlacement
  • negativePositiveSignPlacement
  • showOnlyNumbersOnFocus
  • emptyInputBehavior

Параметр currencySymbol

Основной параметр:

currencySymbol

Определяет строку, которая будет отображаться рядом с числом.

Простейший пример:

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

Результат:

$12,500.00

Поддерживаются:

  • обычные символы;
  • Unicode-символы;
  • строки;
  • сокращения;
  • пробелы;
  • HTML-символы.

Использование различных валют

Доллар

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

Результат:

$5,000

Евро

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

Результат:

€5 000

Российский рубль

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

Результат:

₽5 000

Казахстанский тенге

new AutoNumeric('#price', {
    currencySymbol: '₸'
});

Результат:

₸5 000

Японская иена

new AutoNumeric('#price', {
    currencySymbol: '¥'
});

Британский фунт

new AutoNumeric('#price', {
    currencySymbol: '£'
});

Использование текстовых обозначений

AutoNumeric поддерживает не только одиночные символы.

Валютный код

new AutoNumeric('#price', {
    currencySymbol: 'USD '
});

Результат:

USD 1,500

Полное название валюты

new AutoNumeric('#price', {
    currencySymbol: ' тенге'
});

Результат:

15 000 тенге

Пользовательские единицы измерения

Параметр подходит не только для валют.

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

Результат:

120 км

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

new AutoNumeric('#percent', {
    currencySymbol: '%',
    currencySymbolPlacement: 's'
});

Результат:

25%

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

Параметр:

currencySymbolPlacement

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

Значение Описание
'p' символ перед числом
's' символ после числа

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

Значение по умолчанию:

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

Результат:

$1,000

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

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

Результат:

1 000 ₽

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

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

Неправильно:

currencySymbol: '₽'

Результат:

1000₽

Правильно:

currencySymbol: ' ₽'

Результат:

1 000 ₽

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

Для предотвращения переноса валюты на новую строку часто используется Unicode-символ неразрывного пробела.

currencySymbol: '\u00A0₽'

Или:

currencySymbol: ' ₽'

Результат:

1 000 ₽

Комбинирование с локализацией

Символ валюты обычно используется совместно с:

digitGroupSeparator
decimalCharacter
currencySymbol
currencySymbolPlacement

Пример европейского формата:

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

Результат:

1 234 567,89 €

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

Символ валюты влияет на положение знака минуса.

Пример:

new AutoNumeric('#price', {
    currencySymbol: '$',
    negativePositiveSignPlacement: 'l'
});

Результат:

-$500

Параметр negativePositiveSignPlacement

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

Значение Описание
'l' знак слева
'r' знак справа
'p' знак перед валютой
's' знак после валюты

Различные варианты отображения отрицательных сумм

Знак перед валютой

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

Результат:

-$500

Знак после валюты

new AutoNumeric('#price', {
    currencySymbol: '$',
    negativePositiveSignPlacement: 's'
});

Результат:

$-500

Валюта после числа

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

Результат:

-500 ₽

Отображение валюты только при потере фокуса

Параметр:

showOnlyNumbersOnFocus

Позволяет временно скрывать форматирование.

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

Поведение:

Без фокуса:  10 000 ₽
В фокусе:    10000

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

Поведение пустого поля

Параметр:

emptyInputBehavior

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

Пустое поле без символа

new AutoNumeric('#price', {
    currencySymbol: '$',
    emptyInputBehavior: null
});

Результат:

''

Отображение валюты даже без значения

new AutoNumeric('#price', {
    currencySymbol: '$',
    emptyInputBehavior: 'focus'
});

Использование нескольких валют

AutoNumeric позволяет динамически менять настройки.

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

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

Результат изменится автоматически:

1,500
↓
1 500 €

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

Типичный пример:

const currencies = {
    usd: {
        currencySymbol: '$',
        decimalCharacter: '.',
        digitGroupSeparator: ','
    },

    eur: {
        currencySymbol: ' €',
        currencySymbolPlacement: 's',
        decimalCharacter: ',',
        digitGroupSeparator: ' '
    }
};

const an = new AutoNumeric('#price');

select.addEventListener('change', e => {
    an.update(currencies[e.target.value]);
});

Символ валюты и методы получения значения

Важно понимать различие между:

  • отображаемым значением;
  • сырой числовой строкой;
  • числом.

Метод getFormatted()

Возвращает значение вместе с валютой.

an.getFormatted();

Результат:

$1,500.00

Метод getNumericString()

Возвращает только число.

an.getNumericString();

Результат:

1500.00

Метод getNumber()

Возвращает JavaScript Number.

an.getNumber();

Результат:

1500

Символ валюты при этом полностью игнорируется.

Использование HTML-сущностей

Допускается использование HTML-символов.

currencySymbol: '€'

Однако предпочтительнее использовать Unicode:

currencySymbol: '€'

Это предотвращает проблемы с кодировкой.

Использование сложных префиксов

Параметр поддерживает произвольные строки.

currencySymbol: 'Сумма: '

Результат:

Сумма: 15 000

Использование постфиксов

new AutoNumeric('#weight', {
    currencySymbol: ' кг',
    currencySymbolPlacement: 's'
});

Результат:

75 кг

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

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

Неправильно:

currencySymbol: '₽'
currencySymbolPlacement: 's'

Результат:

1000₽

Правильно:

currencySymbol: ' ₽'

Несоответствие локали

Неправильно:

digitGroupSeparator: ',',
decimalCharacter: ','

Разделители не должны совпадать.

Правильно:

digitGroupSeparator: ' ',
decimalCharacter: ','

Попытка вручную добавить валюту

Неправильно:

input.value = '$1000';

AutoNumeric должен управлять форматированием самостоятельно.

Правильно:

an.set(1000);

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

new AutoNumeric('#salary', {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    decimalPlaces: 2,

    currencySymbol: ' ₽',
    currencySymbolPlacement: 's',

    minimumValue: '0',
    maximumValue: '999999999',

    showOnlyNumbersOnFocus: false
});

Результат:

125 000,00 ₽

Пример международного финансового интерфейса

const localeConfig = {
    us: {
        digitGroupSeparator: ',',
        decimalCharacter: '.',
        currencySymbol: '$'
    },

    fr: {
        digitGroupSeparator: ' ',
        decimalCharacter: ',',
        currencySymbol: ' €',
        currencySymbolPlacement: 's'
    },

    kz: {
        digitGroupSeparator: ' ',
        decimalCharacter: ',',
        currencySymbol: ' ₸',
        currencySymbolPlacement: 's'
    }
};

const an = new AutoNumeric('#price', localeConfig.kz);

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

$10,000.50
10 000,50 €
10 000,50 ₸
Оглавление