/ ↲
    Расширенный поиск

    JavaScript

    Обёртка Number

    Обёртка примитивного типа «число», которая предоставляет дополнительные методы работы с числами

    Время чтения: меньше 5 мин

    1. Кратко
    2. Как пишется
    3. Как это понять
      1. Проверки на специальные значения
      2. Форматирование числа
      3. Константы
    4. На практике
      1. nlopin

    Кратко

    Number — это обёртка над примитивным числовым типом, которая содержит дополнительные значения и методы работы с числами:

    • проверки на специальные значения isNaN, isFinite
    • конвертирование в строку toString и toLocaleString

    Числа автоматически оборачиваются в обёртку Number при вызове методов над ними.

    Как пишется

    Обернуть числа в Number можно вручную, вызвав конструктор new Number():

            
          
          const primitive = 50const num = new Number(100)
          const primitive = 50
const num = new Number(100)

    В этом случае переменные primitive и num будут разных типов:

            
          
          console.log(typeof primitive)// numberconsole.log(typeof num)// objectconsole.log(num == 100)// true, при приведении к числовому типу значения будут одинаковымиconsole.log(num === 100)// false, потому что разные типы данных
          console.log(typeof primitive)
// number
console.log(typeof num)
// object

console.log(num == 100)
// true, при приведении к числовому типу значения будут одинаковыми
console.log(num === 100)
// false, потому что разные типы данных

    Можно вызывать методы на примитиве, JavaScript автоматически обернёт его в обёртку:

            
          
          const primitive = 5.001console.log(primitive.toFixed(1))// '5.0'console.log(6.04.toFixed(1))// '6.0'
          const primitive = 5.001
console.log(primitive.toFixed(1))
// '5.0'

console.log(6.04.toFixed(1))
// '6.0'

    Если необходимо вызвать методы на целом числе, то нужно либо обернуть число в скобки, либо поставить точку дважды:

            
          
          console.log((5).toFixed(3))// '5.000'console.log(6..toFixed(3))// '6.000'
          console.log((5).toFixed(3))
// '5.000'

console.log(6..toFixed(3))
// '6.000'

    Как это понять

    Обычно в JavaScript работают с примитивным числовым типом. Например, const num = 58.

    Обёртка содержит дополнительные функции и методы для работы с числами. Они не входят в стандарт типа данных «число» и поэтому выделены в отдельный модуль.

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

    Проверки на специальные значения

    Тип данных «число» содержит три специальных значения: NaN, Infinity и -Infinity.

    Обёртка предоставляет две полезные функции для проверки специальных значений:

    1️⃣ Функция Number.isNaN — нативный способ проверить значение на NaN, потому что NaN не равен ничему, даже самому себе:

            
          
          const nanResult = 5 * undefinedconsole.log(nanResult == NaN)// falseconsole.log(nanResult === NaN)// falseconsole.log(Number.isNaN(nanResult))// true
          const nanResult = 5 * undefined
console.log(nanResult == NaN)
// false
console.log(nanResult === NaN)
// false

console.log(Number.isNaN(nanResult))
// true

    2️⃣ Функция Number.isFinite — проверит, что значение не является специальным. Возвращает true — если при вызове в неё было передано число и false — если специальное значение или нечисловой тип:

            
          
          const number = 4const nan = NaNconst inf = Infinityconst string = 'hello'console.log(Number.isFinite(number))// trueconsole.log(Number.isFinite(nan))// falseconsole.log(Number.isFinite(inf))// falseconsole.log(Number.isFinite(string))// false
          const number = 4
const nan = NaN
const inf = Infinity
const string = 'hello'

console.log(Number.isFinite(number))
// true
console.log(Number.isFinite(nan))
// false
console.log(Number.isFinite(inf))
// false
console.log(Number.isFinite(string))
// false

    Форматирование числа

    Обёртка содержит несколько методов для форматирования числа:

    1️⃣ Метод toString преобразует число в строку в указанной системе счисления. По умолчанию используется десятичная, но можно использовать и другую:

            
          
          const num = 5console.log(num.toString())// '5'console.log(num.toString(2))// '101' в двоичной системе счисления
          const num = 5

console.log(num.toString())
// '5'
console.log(num.toString(2))
// '101' в двоичной системе счисления

    2️⃣ Метод toFixed преобразует число в строку с указанным количеством знаков после запятой. Если необходимо, число округляется:

            
          
          const num = 10.468console.log(num.toFixed(4))// '10.4680'console.log(num.toFixed(3))// '10.468'console.log(num.toFixed(2))// '10.47'console.log(num.toFixed(1))// '10.5'console.log(num.toFixed(0))// '10'
          const num = 10.468
console.log(num.toFixed(4))
// '10.4680'
console.log(num.toFixed(3))
// '10.468'
console.log(num.toFixed(2))
// '10.47'
console.log(num.toFixed(1))
// '10.5'
console.log(num.toFixed(0))
// '10'

    Если нужно округлять до целого, то ноль при вызове можно не передавать:

            
          
          const num = 10.468console.log(num.toFixed())// '10'
          const num = 10.468
console.log(num.toFixed())
// '10'

    3️⃣ Метод toLocaleString преобразует число в строку, учитывая локаль пользователя.

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

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

    • код_языка. Например, 'ru' (русский язык), 'de' (немецкий), 'en' (английский).
    • код_языка-код_региона. Например, de-AT (австрийский немецкий), 'en-US' (американский английский), es-AR (аргентинский испанский).

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

            
          
          const bigNumber = 100000000console.log(bigNumber.toLocaleString("ru")) // 100 000 000console.log(bigNumber.toLocaleString("en-US")) // 100,000,000console.log(bigNumber.toLocaleString("ar-SA")) // ١٠٠٬٠٠٠٬٠٠٠
          const bigNumber = 100000000

console.log(bigNumber.toLocaleString("ru")) // 100 000 000
console.log(bigNumber.toLocaleString("en-US")) // 100,000,000
console.log(bigNumber.toLocaleString("ar-SA")) // ١٠٠٬٠٠٠٬٠٠٠
    Открыть демо в новой вкладке

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

            
          
          const bigNumber = 100000000console.log(bigNumber.toLocaleString('es', { style: 'currency', currency: 'EUR' }))// 100.000.000,00 €console.log(bigNumber.toLocaleString('ru', { style: 'currency', currency: 'RUB', minimumFractionDigits: 0 }))// 100 000 000 ₽
          const bigNumber = 100000000
console.log(bigNumber.toLocaleString('es', { style: 'currency', currency: 'EUR' }))
// 100.000.000,00 €

console.log(bigNumber.toLocaleString('ru', { style: 'currency', currency: 'RUB', minimumFractionDigits: 0 }))
// 100 000 000 ₽

    Константы

    Обёртка хранит несколько полезных констант:

    • Number.MAX_SAFE_INTEGER — максимально возможное целое значение числового типа, 253-1;
    • Number.MIN_SAFE_INTEGER — минимально возможное целое значение числового типа, -253-1;
    • Number.MAX_VALUE — максимально большое число, представимое с помощью числового типа;
    • Number.MIN_VALUE — минимальное положительное число, представимое с помощью числового типа.

    Важно отметить, что Number.MAX_VALUE много больше, чем Number.MAX_SAFE_INTEGER, из-за особенностей хранения чисел с плавающей точкой.

    На практике

    nlopin

    ❗️ Не создавайте руками обёртку, не существует случаев, когда JavaScript не справится с этим сам.

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

            
          
          Number("123")// 123Number("12.3")// 12.3Number("12.00")// 12Number("")// 0Number(null)// 0Number("0x11")// 17Number("0b11")// 3Number("0o11")// 9Number("foo")// NaNNumber("100a")// NaN
          Number("123")
// 123
Number("12.3")
// 12.3
Number("12.00")
// 12
Number("")
// 0
Number(null)
// 0
Number("0x11")
// 17
Number("0b11")
// 3
Number("0o11")
// 9
Number("foo")
// NaN
Number("100a")
// NaN

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