JavaRush /Курси /Frontend SELF UA /Перетворення типів у JavaScript

Перетворення типів у JavaScript

Frontend SELF UA
Рівень 35 , Лекція 0
Відкрита

1.1 Явне перетворення типів

Перетворення типів у JavaScript — це процес перетворення значення з одного типу даних в інший. Існує два типи перетворення: явне (ручне) і неявне (автоматичне). Розуміння цих процесів важливе для уникнення помилок і написання передбачуваного коду.

Явне перетворення, також відоме як ручне перетворення, виконується з використанням вбудованих функцій і методів JavaScript. Це перетворення, при якому програміст явно вказує, який тип даних треба перетворити в інший тип.

Основні методи явного перетворення:

1. Перетворення в рядок

  • Метод String(value): перетворює значення в рядок
JavaScript
    
      let num = 123;
      let str = String(num);
      console.log(typeof str); // "string"
    
  

  • value.toString(): метод об'єкта, що перетворює значення в рядок
JavaScript
    
      let bool = true;
      let str = bool.toString();
      console.log(typeof str); // "string"
    
  

2. Перетворення в число

  • Number(value): перетворює значення в число
JavaScript
    
      let str = "456";
      let num = Number(str);
      console.log(typeof num); // "number"
    
  

  • parseInt(value, base): перетворює рядок в ціле число. Параметр base вказує основу системи числення
JavaScript
    
      let str = "123";
      let num = parseInt(str, 10);
      console.log(typeof num); // "number"
    
  

  • parseFloat(value): перетворює рядок в число з плаваючою крапкою
JavaScript
    
      let str = "123.45";
      let num = parseFloat(str);
      console.log(typeof num); // "number"
    
  

3. Перетворення в булеве значення

  • Boolean(value): перетворює значення в булеве
JavaScript
    
      let str = "";
      let bool = Boolean(str);
      console.log(typeof bool); // "boolean"
    
  

1.2 Неявне перетворення типів

Неявне перетворення, також відоме як автоматичне або приховане перетворення, виконується JavaScript автоматично під час виконання операцій з різними типами даних. Неявне перетворення може призвести до несподіваних результатів, тому слід розуміти його і використовувати з обережністю.

1. Перетворення в рядок

Важливо!

При додаванні будь-якого об'єкта до рядка JavaScript спробує перетворити його в рядок.

Приклад:

JavaScript
    
      let result = "The number is " + 123;
      console.log(result); // "The number is 123"
    
  

2. Перетворення в число

Важливо!

При використанні будь-яких арифметичних операторів (окрім +) з рядками, що містять числа.

JavaScript
    
      let result = "123" - 0;
      console.log(result); // 123 (число)
    
  

Як це працює на практиці:

JavaScript
    
      let result = "123" - 10;
      console.log(result); // 113 (число)

      let result2 = "123" + 10;
      console.log(result2); // 12310 (рядок)
    
  

3. Перетворення в булеве значення

При використанні значень у логічних контекстах (умовні оператори, цикли тощо).

JavaScript
    
      let value = "hello";

      if (value) {
        console.log("Value is truthy");   // Вивід: "Value is truthy"
      }
    
  

Приклади перетворень у логічному контексті:

  • false, 0, "" (порожній рядок), null, undefined, і NaN вважаються помилковими (false) значеннями
  • Усі інші значення вважаються істинними (true)
JavaScript
    
      if ("") {
        console.log("This won't be logged.");
      } else {
        console.log('"" вважається false у логічному контексті.');
      }

      // '"" вважається false у логічному контексті.'
    
  

1.3 Приклади неявного перетворення

Приклад з арифметичними операціями:

JavaScript
    
      let width = "100";
      let height = "200";

      let area = Number(width) * Number(height); // Явне перетворення
      console.log(area); // 20000

      let perimeter = (+width) + (+height); // Використання унарного плюса для явного перетворення
      console.log(perimeter); // 300
    
  

Приклад з логічним контекстом:

JavaScript
    
      let userInput = ""; // Порожній рядок

      if (!userInput) {
        console.log("Користувач не ввів дані."); // Неявне перетворення рядка у булеве значення
      }
    
  

Приклад з комбінованими типами:

JavaScript
    
      let value = "10";
      let increment = 5;

      let result = value + increment; // Неявне перетворення числа в рядок
      console.log(result); // "105"

      result = Number(value) + increment; // Явне перетворення рядка в число
      console.log(result); // 15
    
  
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ