Пошук уроків, статей та іншого контенту
Навчіться перетворювати значення між рядками, числами та логічними типами за допомогою String(), Number() і Boolean(). Розгляньте типові результати таких перетворень.
У JavaScript різні значення мають різні типи:
рядок (string) — текст;
число (number) — цілі або дробові числа;
логічне значення (boolean) — true або false.
Під час роботи програми часто потрібно перетворити значення з одного типу в інший. Наприклад:
отримане з форми значення перетворити на число;
число перетворити на рядок для виведення;
перевірити рядок або число в умовній конструкції.
Для явного перетворення типів використовують функції:
String();
Number();
Boolean().
String()Функція String() перетворює значення на рядок.
const number = 25;
const isActive = true;
const emptyValue = null;
console.log(String(number)); // "25"
console.log(String(isActive)); // "true"
console.log(String(emptyValue)); // "null"
console.log(typeof String(number)); // "string"Результатом перетворення завжди буде значення типу string.
console.log(String(42)); // "42"
console.log(String(3.14)); // "3.14"
console.log(String(true)); // "true"
console.log(String(false)); // "false"
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"Рядки залишаються рядками:
const text = "JavaScript";
console.log(String(text)); // "JavaScript"Оператор + також може перетворювати значення на рядок, якщо один з операндів уже є рядком:
const age = 20;
console.log("Вік: " + age); // "Вік: 20"Проте String() чіткіше показує намір:
const age = 20;
const message = "Вік: " + String(age);
console.log(message); // "Вік: 20"Number()Функція Number() намагається перетворити значення на число.
console.log(Number("42")); // 42
console.log(Number("3.14")); // 3.14
console.log(Number(true)); // 1
console.log(Number(false)); // 0Якщо перетворення неможливе, результатом буде спеціальне значення NaN.
NaN означає, що результат не є коректним числом.
console.log(Number("hello")); // NaN
console.log(Number("42px")); // NaNПеревірити тип результату можна за допомогою typeof:
const result = Number("hello");
console.log(result); // NaN
console.log(typeof result); // "number"Хоча NaN означає некоректний числовий результат, його типом у JavaScript є number.
Рядок може містити ціле або дробове число:
console.log(Number("100")); // 100
console.log(Number("-15")); // -15
console.log(Number("2.5")); // 2.5
console.log(Number(" 42 ")); // 42Пробіли на початку та в кінці рядка ігноруються.
Але рядок із додатковими символами не перетворюється на число повністю:
console.log(Number("25 apples")); // NaN
console.log(Number("$100")); // NaNПорожній рядок під час перетворення на число стає нулем:
console.log(Number("")); // 0
console.log(Number(" ")); // 0Це важлива особливість, про яку потрібно пам’ятати під час перевірки даних із форм.
Логічні значення перетворюються так:
true → 1;
false → 0.
console.log(Number(true)); // 1
console.log(Number(false)); // 0null та undefinedconsole.log(Number(null)); // 0
console.log(Number(undefined)); // NaNnull під час перетворення на число стає 0, а undefined — NaN.
Boolean()Функція Boolean() перетворює значення на true або false.
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean("hello")); // true
console.log(Boolean("")); // falseЗначення, яке перетворюється на false, називають хибним або falsy. Усі інші значення є істинними або truthy.
У JavaScript такими є:
false;
0;
-0;
"" — порожній рядок;
null;
undefined;
NaN.
console.log(Boolean(false)); // false
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // falseМайже всі інші значення перетворюються на true:
console.log(Boolean(1)); // true
console.log(Boolean(-10)); // true
console.log(Boolean("hello")); // true
console.log(Boolean("0")); // true
console.log(Boolean([])); // true
console.log(Boolean({})); // trueЗверніть увагу: рядок "0" не є порожнім, тому він перетворюється на true.
console.log(Boolean("0")); // true
console.log(Boolean(0)); // falseТип значення має значення: число 0 і рядок "0" — це різні значення.
Умовні конструкції автоматично перетворюють значення на логічний тип.
const username = "Olena";
if (username) {
console.log("Ім'я вказано");
}Оскільки username містить непорожній рядок, умова має значення true.
Інший приклад:
const password = "";
if (password) {
console.log("Пароль введено");
} else {
console.log("Введіть пароль");
}Порожній рядок є хибним значенням, тому виконається блок else.
Для явного перетворення можна використати Boolean():
const input = "JavaScript";
const hasValue = Boolean(input);
console.log(hasValue); // trueУявімо, що вік користувача спочатку зберігається як рядок. Це типова ситуація для даних із текстового поля.
const ageInput = "25";
const age = Number(ageInput);
const hasValidAge = Number.isFinite(age) && age >= 0;
if (hasValidAge) {
const message = "Вік користувача: " + String(age);
console.log(message);
} else {
console.log("Введено некоректний вік");
}Тут відбувається кілька перетворень:
"25" перетворюється на число 25;
перевіряється, чи є результат коректним числом;
число перетворюється на рядок під час створення повідомлення.
Number.isFinite() перевіряє, чи є значення звичайним кінцевим числом, а не NaN або нескінченністю.
Ми самостійно викликаємо функцію перетворення:
const textNumber = "10";
const number = Number(textNumber);
console.log(number); // 10Такий код легко читати: зрозуміло, що рядок потрібно перетворити на число.
JavaScript іноді перетворює типи автоматично:
console.log("10" + 5); // "105"
console.log("10" - 5); // 5У першому випадку оператор + об’єднує рядок із числом, тому число 5 перетворюється на рядок.
У другому випадку оператор - працює лише з числами, тому рядок "10" перетворюється на число.
Через такі правила результат може бути неочікуваним. Для зрозумілого коду краще виконувати перетворення явно:
const value = "10";
const result = Number(value) + 5;
console.log(result); // 15const value = "42";
const asString = String(value);
const asNumber = Number(value);
const asBoolean = Boolean(value);
console.log(asString); // "42"
console.log(typeof asString); // "string"
console.log(asNumber); // 42
console.log(typeof asNumber); // "number"
console.log(asBoolean); // true
console.log(typeof asBoolean); // "boolean"Корисно запам’ятати такі правила:
console.log(String(10)); // "10"
console.log(String(false)); // "false"
console.log(Number("10")); // 10
console.log(Number("")); // 0
console.log(Number("text")); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Boolean(0)); // false
console.log(Boolean(1)); // true
console.log(Boolean("")); // false
console.log(Boolean("text")); // true
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false"0" стане falseconsole.log(Boolean("0")); // true"0" — непорожній рядок. Якщо потрібно перевірити саме числове значення, спочатку перетворіть його на число:
const value = "0";
console.log(Boolean(value)); // true
console.log(Boolean(Number(value))); // falseBoolean()const input = "hello";
const number = Number(input);
if (number) {
console.log("Число коректне");
}У цьому прикладі number дорівнює NaN, і умова не виконається. Але значення 0 також є хибним, хоча це коректне число.
Для перевірки числа краще використовувати Number.isFinite():
const input = "0";
const number = Number(input);
if (Number.isFinite(number)) {
console.log("Коректне число:", number);
}NaNconst result = Number("abc");
console.log(result); // NaNНе порівнюйте NaN зі значенням NaN за допомогою ===:
console.log(NaN === NaN); // falseДля перевірки використовуйте Number.isNaN() або, у випадку загальної перевірки числа, Number.isFinite():
const result = Number("abc");
console.log(Number.isNaN(result)); // true
console.log(Number.isFinite(result)); // falseNumber() для рядків із текстомconst price = Number("100 грн");
console.log(price); // NaNФункція Number() перетворює лише рядки, які повністю містять коректне числове значення. Текст потрібно обробити окремо, якщо це необхідно.
null та undefinedconsole.log(Number(null)); // 0
console.log(Number(undefined)); // NaNЦі значення поводяться по-різному, тому не варто вважати їх взаємозамінними.
String(value) перетворює значення на рядок.
Number(value) перетворює значення на число.
Якщо перетворення на число неможливе, результатом буде NaN.
Boolean(value) перетворює значення на true або false.
Порожній рядок, 0, false, null, undefined і NaN є хибними значеннями.
Рядок "0" є істинним, тому що він непорожній.
Умови автоматично перетворюють значення на логічний тип.
Явне перетворення за допомогою String(), Number() і Boolean() робить код зрозумілішим.
Для перевірки коректності числа зручно використовувати Number.isFinite().