Обёртка Number

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

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

Кратко

Секция статьи "Кратко"

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, из-за особенностей хранения чисел с плавающей точкой.

На практике

Секция статьи "На практике"

Николай Лопин

Секция статьи "Николай Лопин"

❗️ Не создавайте руками обёртку, не существует случаев, когда 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, например, при парсинге числа из поля ввода.