Banx. Обработка и вывод фраз с числительными в Angular.

Published in

F.A.F.N.U.R

3 min readMay 21, 2021

В данной статье поговорим о работе с числительными в верстке. Создадим sevice и pipe для работы с фразами с числительными.

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

121 рубль
122 рубля
125 рублей

Создадим интерфейсы для задания форм числительных для рубля, займа, кредита и заявки:

В данном случае, все числительные будут использовать только три формы, которые можно определить как числительные для 1, 2 и 5:

1 рубль, 2 рубля и 5 рублей;
1 займ, 2 займа и 5 займов;
1 заявка, 2 заявки и 5 заявок;
1 кредит, 2 кредита и 5 кредитов.

Используя эти три формы, можно описать все случаи простого использования:

Вам выплачен 1 рубль;
Вам одобрено 2 займа;
Вы подали 3 заявки;
У вас 5 активных кредитов.

Заметим, что это работает до тех пор, пока нет предлогов у фраз с числительными:
- Выплата возможна от 1 рубля, от 2 рублей, от 5 рублей;
- Скидка доступна с 1 займа, со 2 займа, с 5 займа.

Создадим service для вывода фразы с числительным:

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

Добавим pipe, который позволит использовать данную механику в шаблонах:

Добавим сервис и пайп в модуль:

Теперь, если импортировать NumeralsSharedModule, то можно использовать фразы с числительными:

{{ 2 | phraseNumeral: 'credit' }} // Выведет 2 кредита

Перевод числа в строку

Другой, задачей с числительными является перевод числа в текстовое представление: 123 — сто двадцать три.

Есть несколько решений, для решения данной задачи.

Так как в проекте потребуется перевод чисел в строку, украдем одно из решений, переписав его на Angular.

За основу возьмем решение — js-written-number.

Определим интерфейсы на основе входных данных локалей:

Также определим токен, который будет определять используемую локаль.

export const NUMBER_LOCALE = new InjectionToken<WrittenNumberLocale>('WrittenNumberLocale');

Создадим NumberToWordsService:

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

Создадим пайп NumbersToWordsPipe:

Подключим в модуле:

Теперь, если импортировать NumbersToWordsSharedModule, то можно использовать фразы с числительными:

{{ 132 | numbersToWords  }} // сто тридцать два

В конце, добавим пайп, объединив перевод чисел в строку и фразы с числительным:

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

{{ 12345 | writtenNumberPhrase: 'credit' }} // двенадцать тысяч триста сорок пять кредитов

Резюме

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

Исходники

Все исходники находятся на github, в репозитории:

Fafnur/banx

This project was generated using Nx. 🔎 Nx is a set of Extensible Dev Tools for Monorepos. Nx Documentation 10-minute…

github.com

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — numerals.

git checkout numerals

Ссылки

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, веб-разработку и новости из мира фронтенда.

Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
Instagram: https://www.instagram.com/fafnur
LinkedIn: https://www.linkedin.com/in/fafnur

Предыдущие статьи: