В чём разница между приведением типов к числу через number и через унарный плюс?

Разница между Number() и унарным плюсом при приведении типов

Краткий ответ

Number() и унарный плюс (+) имеют одинаковые правила преобразования типов, но отличаются в производительности и читаемости:

• Number() - явное преобразование, явный вызов функции
• Унарный плюс - неявное преобразование, более компактный синтаксис

Правила преобразования

Оба способа используют одни и те же правила приведения типов:

// Строки в числа
Number("42") === +"42" // true, обе дают 42
Number("") === +"" // true, обе дают 0
Number("  123  ") === +"  123  " // true, обе дают 123
Number(" 3.14") === +" 3.14" // true, обе дают 3.14

// Булевы значения
Number(true) === +true // true, обе дают 1
Number(false) === +false // true, обе дают 0

// null и undefined
Number(null) === +null // true, обе дают 0
Number(undefined) === +undefined // true, обе дают NaN

// Пустые строки
Number("") // 0
+"" // 0

// Строки с пробелами
Number("   ") // 0
+"   " // 0

// Невалидные строки
Number("abc") // NaN
+"abc" // NaN

// Массивы
Number([5]) // 5
+[5] // 5
Number([1, 2]) // NaN (не однозначное значение)
+[1, 2] // NaN

// Объекты
Number({}) // NaN
+{} // NaN

Различия в производительности

Унарный плюс немного быстрее, так как это встроенный оператор, который не требует поиска функции:

// Производительность унарного плюса выше
const value = +str; // Прямое преобразование
const value = Number(str); // Вызов функции с поиском

Однако в современных JavaScript движках (V8, SpiderMonkey) разница минимальна и может игнорироваться для читаемости.

Отличия в читаемости и контексте

Number() более явный и понятный:

// Явный вызов функции - ясно, что происходит преобразование
const age = Number(input);
const price = Number(formValue);

// Может быть непонятно новичку
const age = +input;
const price = +formValue;

Унарный плюс часто используется как трюк:

// Идиоматичный JavaScript
const parsed = +"123"; // Опытные разработчики сразу поймут
const count = +event.target.value; // Компактно в обработчиках

// Но может быть запутанным
const result = ++counter; // А это инкремент или плюс?
const doubled = + + value; // Двойной плюс

Практические примеры

// Приведение значения из input
const userInput = document.querySelector(input).value;
const number1 = Number(userInput); // Явно
const number2 = +userInput; // Компактно

// В функциях
function processValue(val) {
  const num = +val; // Принято в коде с множеством преобразований
}

// При валидации
if (+input === parseInt(input)) {
  // Значение - целое число
}

// Трансформация массива
const nums = ["1", "2", "3"].map(Number); // Явно с функцией
const nums = ["1", "2", "3"].map(x => +x); // С унарным плюсом

// Но проще просто:
const nums = ["1", "2", "3"].map(Number); // Читаемо

Граничные случаи

// Строки с научной нотацией
Number("1e3") === +"1e3" // true, обе дают 1000

// Шестнадцатеричные числа
Number("0xFF") // 255
+"0xFF" // NaN - унарный плюс НЕ поддерживает hex!

// Это главное отличие!

Это самое значительное отличие! Number() поддерживает шестнадцатеричную нотацию, унарный плюс - нет.

Рекомендации

• Используй Number() для явности и совместимости с шестнадцатеричными числами
• Используй унарный плюс в компактном коде, где контекст ясен (функции обратного вызова, вычисления)
• Избегай унарного плюса если есть риск путаницы с инкрементом ++

Заключение

Оба способа функционально эквивалентны в большинстве случаев, но Number() более универсален (поддерживает hex) и явен. Выбирайте в зависимости от читаемости и контекста вашего кода.