Превращение 'b' + 'a' + + 'a' + 'a' в 'banana' в JavaScript

Быстрый ответ

Несмотря на внешне странное поведение, выражение ('b'+'a'+ + 'a' + 'a').toLowerCase() ожидаемо для JavaScript. Суть в том, что здесь +'a' воспринимается как попытка привести символ 'a' к числовому типу при помощи унарного плюса. Эта операция не успешна и возвращает NaN. Таким образом, мы имеем строку 'b' + 'a' + NaN + 'a', которая преобразуется в 'baNaNa'. Затем метод .toLowerCase() трансформирует нашу строку к нижнему регистру, превращая её в 'banana'.

let magicBanana = ('b'+'a'+ + 'a' + 'a').toLowerCase(); // 'banana'
console.log(`Магический банан? ${magicBanana}`); // Вывод в консоль: "Магический банан? banana". Добро пожаловать в повседневную норму JavaScript.

Ответ подробнее: унарный плюс и приведение типов

Первый + действует как оператор конкатенации. Второй + (после пробела) — это унарный плюс, который делает попытку преобразовать строку 'a' в число. Поскольку 'a' не является численным символом, результат этой операции — NaN.

let aNumber = +'a'; // NaN
let addNaN = 'a' + aNumber; // "aNaN"
console.log(`Произошло преобразование к ${aNumber}`); // Это подтверждает, что 'a' не может стать числом...

Что именно происходит?

• Пробел между операторами + играет роль: он отделяет унарный плюс от конкатенации.
• Унарный плюс (+) имеет более высокий приоритет, чем конкатенация.
• Применение унарного плюса к нечисловым строкам возвращает NaN при попытке приведения типов.

Приоритет операторов и умение JavaScript "залезть на стул"

JavaScript выполняет вычисления следуя слева направо, при этом соблюдая правила приоритета операторов. Когда JavaScript работает с операндами разных типов (строки и числа), он демонстрирует свое мастерство в преобразовании типов, применяя правила операторов.

Подробнее об этом расскажет наш спикер на видео

Конкретные примеры:

• Строка + Строка: Приводит к конкатенации ('1' + '1' делает '11').
• Число + Число: Соответствует арифметическому сложению (1 + 1 даёт 2).
• Строка + Число (или наоборот): повлечет приведение типов ('1' + 1 становится '11').

Будьте настороже с:

• +'a', неверное преобразование в число даст NaN.
• Конкатенацией строк, когда вместо арифметического сложения чисел происходит конкатенация и в результате возникают неожиданные выводы ('5' + 5 становится '55').

Как избежать проблем: оптимизация и лучшие практики

Осознанный подход к приведению типов может быть ключевым. Понимание потенциальных трудностей приведения типов поможет избежать сюрпризов в вашем коде.

let unexpected = '5' + 5; // "55"
console.log(`Ожидал 10, получил ${unexpected}? Видимо, JavaScript думает не так как я`); // Магия или ошибка?

Полезные советы:

• Старайтесь избегать неявного приведения типов и придерживайтесь осознанного выбора типов данных.
• В случаях сомнений предпочитайте явные методы приведения типов, например, Number() или String().

Лучшие практики, которые стоит применять:

• Избегайте двусмысленного использования оператора +.
• При работе со строками, рассмотрите использование шаблонных строк:

`b${'a'}NaN${'a'}`.toLowerCase(); // "banana"
console.log(`Никаких неожиданностей!`); // Ясно и понятно.

• Убедитесь, что типы операндов отвечают вашим ожиданиям от данной операции.

Визуализация

Чтобы понять, как работает данное выражение в JavaScript, представьте его как рецепт подготовки необычного блюда:

1. Начинаем с букв: 🅱️ + 🅰️.
2. Добавим '+' с 'пробелом' (+ ' ' +).
3. Применим унарный `+` для попытки преобразовать 'a' в `не число` (NaN).
4. Смешаем все ингредиенты и приведём результат к нижнему регистру (`toLowerCase()`).

И вуаля, финальное блюдо: ('b' + 'a' + NaN + 'a') = 'banana' оказывается простым и вкусным фруктовым десертом! 🍌

Полезные материалы

1. Оператор сложения (+) – JavaScript | MDN — описание оператора + и приведение типов в JavaScript.
2. String.prototype.toLowerCase() – JavaScript | MDN — метод для приведения строк к нижнему регистру в JavaScript.
3. Унарный плюс (+) – JavaScript | MDN — информация об унарном плюсе и его эффекте на преобразование типов в JavaScript.
4. Object.prototype.toString() – JavaScript | MDN — об использовании метода toString() в JavaScript.
5. Преобразования типов – JavaScript — подробное изучение темы преобразования типов в JavaScript.
6. NaN – JavaScript | MDN — информация о случаях, когда JavaScript возвращает Не-Число (NaN).
7. [253 основных вопроса с ответами для собеседования по JavaScript [2024] | Toptal®](https://www.toptal.com/javascript/interview-questions) — хорошая подготовка к собеседованиям и защита от "подводных камней" преобразования типов.