Я видел слишком много примеров, но ни один из них не убедил меня в том, чего я действительно хочу, и в том, как лучше всего это сделать.
У меня есть код следующим образом:
const nf = new Intl.NumberFormat("es-MX");
let anualidad = 1200;
this.model.enero = nf.format(anualidad);
output: 1200
Моя проблема в том, что запятая не ставится 1,200
; Я не говорю, что это не работает, потому что, если я поставлю еще один ноль, он добавит запятую вот так 12,000
.
Я уже установил язык на MX .
Как я могу сделать это наилучшим образом? так как слишком много вычислений нужно сделать таким образом.
Я провел довольно исчерпывающее исследование предмета, и я буду основывать свой ответ на полученном в нем результате.
Во-первых, хотя возможность использования другой системы
locale
(напримерen-US
, ) уже обсуждалась, это не дает полного ответа на вопрос.Очевидно, вы хотите преобразовать тип
Number
в типString
, но чтобы он представлял фигуру в местном форматеes-MX
(мексиканский испанский).Если мы воспользуемся методом
toLocaleString()
или методомNumberFormat
объектаIntl
, мы получим следующий результат:Очевидно, что десятичная точка не ставится, если количество цифр в группе тысяч меньше 2.
РЕШЕНИЕ
Один из способов решить эту проблему (я говорю проблему, хотя это не
bug
языковая проблема, а решение стандартизации) — вручную преобразовать число, поскольку стандарт не дает нам желаемого результата.В своем вопросе вы указываете, что видели много форм, но ни одна из них вас не убеждает. Правда, что на вкус, то на цвет .
Это мое предложение, но я понимаю, что это можно сделать многими другими способами.
Мы создаем собственную функцию форматирования, поддерживаемую движком регулярных выражений движка JavaScript.
Мы будем использовать следующее регулярное выражение для форматирования нашего числа в нужной локали:
В этом регулярном выражении выполняется a
positive lookahead
(?=
), ищущая одну или несколько (+
) групп из 3 цифр ((\d{3})+
), если они есть, она возвращаетсяmatch
вместе со значениями, сгруппированными по 3. Затем выполняется anegative lookahead
((?!)
) чтобы отбросить любую цифру, которая не сгруппирована первой группой захвата (в данном случае 1 или 2 цифры). Подробнее об этом можно прочитатьlookahead
в Regex Lookahead .Мы будем использовать метод
replace
объекта String , который принимает регулярное выражение (которое у нас уже есть) и параметр типаString
со следующим форматом:Таким образом, наш параметр будет следующим:
Где
$1
представляет первый аргумент: наше регулярное выражение и,
является символом разделения тысяч, который мы будем использовать в этом случае.Наконец, мы должны решить, всегда ли мы используем этот метод для замены метода
toLocaleString()
или мы можем комбинировать оба.Предположим, мы будем всегда использовать этот метод для любого допустимого числового значения:
Очевидно, что у нас серьезная проблема, так как есть недействительные результаты.
Проблема в том, что замена производится без учета того, что десятичные знаки не должны входить в состав замены.
Для решения этой проблемы у нас есть несколько вариантов, и, как я уже говорил: на вкус, цвета .
Поскольку число в Javascript может содержать только один символ
.
или не содержать ни одного, мы будем использовать это, чтобы применить нашу функцию только к целой части числа.Мы собираемся отделить целую часть от десятичной, применить формат к целой части, а затем соединить все обратно в файл
String
.Благодаря этому у нас есть функция, которая помогает нам преобразовывать числа в их строковое представление в местном мексиканском формате (десятичная точка и запятые для разделения тысяч).
Применив это к вашему коду, вы могли бы:
Немного изменив этот метод, мы можем сделать это для любой системы числового представления, которую захотим.
Зачем ставить знак тысяч для чисел от 1000 до 9999
toLocaleString()
?FormatNumber()
Это решение принято (не знаю почему) организацией по стандартизации Unicode . В частности , проектом CLDR ( репозиторий Common Locale Data R ) .
Стандарт устанавливает , среди прочего, шаблон числового формата . И в этом шаблоне есть свойство или атрибут с именем
minimumGroupingDigits
, который устанавливает минимальное количество цифр в группе для использования разделителя тысяч.Дело в том, что это значение равно 2 (как видно в CLDR Survey Tool ) во всех числовых форматах, входящих в спецификацию
es
(в которую входит Мексика).Из-за этого вышеупомянутые методы всегда будут возвращать 4-значные целые числа без разделителя тысяч.
Я надеюсь, что это развеет ваши сомнения и поможет вам решить проблему.
Согласно документации меток IETF, код для Латинской Америки и Карибского бассейна
es-419
имеет большой смысл, поскольку в Аргентине, Колумбии или Мексике используется одно и то же выражение.Вы можете проверить это здесь
Я проводил некоторые тесты, но, к сожалению, этот тег не работает. Что если это так, если вы ничего не передаете конструктору, он принимает формат, который вы ищете.
Я надеюсь, что вы можете направить
РЕДАКТИРОВАТЬ
Выполняя некоторые тесты, я использовал средство отслеживания объектов
Intl.NumberFormat()
и обнаружил, чтоIntl.NumberFormat().resolvedOptions()
имеет объект этого типа.Это может измениться в зависимости от используемого браузера. Я передал тег конструктору,
en-MX
потому что иногда он работает (я видел это в других проектах) или вуаля! это сработало.Я рекомендую следующее:
Это не работает с Аргентиной es-AR
Используя немецкий формат, это дает требуемый результат: