Останнє оновлення: 1.11.2015

Нерідко виникає потреба перетворити одні дані на інші. Наприклад:

Var number1 = "46"; var number2 = "4"; var result = number1 + number2; console.log(result); //464

Обидві змінні представляють рядки, а точніше рядкові уявлення чисел. І в результаті ми отримаємо не число 50, а рядок 464. Але було б непогано, якби їх теж можна було б складати, віднімати, загалом працювати як зі звичайними числами.

І тут ми можемо використовувати операції перетворення. Для перетворення рядка на число застосовується функція parseInt() :

Var number1 = "46"; var number2 = "4"; var result = parseInt(number1) + parseInt(number2); console.log(result); // 50

Для перетворення рядків на дробові числа застосовується функція parseFloat() :

Var number1 = "46.07"; var number2 = "4.98"; var result = parseFloat(number1) + parseFloat(number2); console.log(result); //51.05

При цьому рядок може мати змішаний вміст, наприклад "123hello", тобто в даному випадку є цифри, але є і звичайні символи. Але метод parseInt() все одно спробує виконати перетворення:

Var num1 = "123hello"; var num2 = parseInt(num1); console.log(num2); // 123

Якщо методу не вдасться виконати перетворення, то він повертає значення NaN (Not a Number), яке говорить про те, що рядок не є числом і не може бути перетворений.

За допомогою спеціальної функції isNaN() можна перевірити, чи рядок є число. Якщо рядок не є числом, то функція повертає true, якщо це число - false:

Var num1 = "javascript"; var num2 = "22"; var result = isNaN(num1); console.log(result); // true - num1 є числом result = isNaN(num2); console.log(result); // false - num2 - це число

Вище ми розглядали переведення рядків у числа в десятковій системі. Однак ми можемо переводити числа у будь-яку систему. За замовчуванням інтерпретатор JavaScript сам відгадує, з якої системи обчислення ми хочемо перетворити рядок (як правило, вибирається десяткова система). Але ми можемо за допомогою другого параметра явно вказати, що хочемо перетворити рядок на число у певній системі. Наприклад, перетворення на число в двійковій системі:

Var num1 = "110"; var num2 = parseInt(num1, 2); console.log(num2); // 6

Результатом буде 6, тому що 110 у двійковій системі - це число 6 у десятковій.

Тепер напишемо невелику програму, в якій використовуємо операції зі змінними:

JavaScript var strSum = prompt("Введіть суму вкладу", 1000); var strPercent = prompt("Введіть процентну ставку", 10); var sum = parseInt(strSum); var % = parseInt(strPercent); sum = sum + sum * відсоток / 100; alert("Після нарахування відсотків сума вкладу складе:" + sum);

За допомогою функції prompt() у браузері виводиться діалогове вікно із пропозицією ввести деяке значення. Другий аргумент цієї функції вказує на значення, яке буде використовуватися за умовчанням.

Однак, функція prompt() повертає рядок. Тому цей рядок нам треба перетворити на число, щоб виконати з ним операції.

Після відкриття сторінки у браузері ми побачимо запрошення до введення суми вкладу:

Потім подібне повідомлення відобразиться і для відсотка. І наприкінці програма отримає дані, перетворить їх у числа та виконає підрахунок.

У JavaScript існують 2 вбудовані функції перетворення рядків у числа: parseFloat() і parseInt() .

parseFloat() приймає аргументом рядок, який необхідно привести до чисельного типу, та повертає число типу float. Число має утримуватися на початку рядка. Якщо після числа у рядку йдуть ще якісь символи, вони відсікаються. Дробова частина числа має бути записана через точку (кома не сприймається як роздільник). Якщо parseFloat() не може перетворити рядок, то вона повертає NaN.

Також функція може обробити «число n, помножене на 10 ступенем x», яке в програмуванні прийнято записувати через букву E, наприклад: 0.5E6 або 0.5E+6. Ступінь може бути негативна: 0.5E-6, що дорівнює 0.5*10^-6 або 0.5/1000000.

ParseFloat("3.78kg") // 3.78 parseFloat("kg33") // NaN parseFloat("0004.111") // 4.111 parseFloat("0x66") // 0 parseFloat("". 5"") // 0.5 parseFloat(""-.5"") // -0.5 parseFloat(""0.5e6"") // 500000 parseFloat(""0.03E+2"") // 3 parseFloat(" "3E-4"") // 0.0003 parseFloat(""-3E-4"") // -0.0003

Функція parseInt(string[, radix]) приймає як перший аргумент рядок, аналізує його і повертає ціле число (тип integer). Функція намагається аналізувати систему числення, в якій записано число у вихідному рядку (наприклад, десятковий, вісімковий або шістнадцятковий — але не тільки ці). Також систему числення можна вказати очевидно, передавши її другим параметром radix. Параметр radix може приймати будь-яке число від 2 до 36 (у системах вище 10 використовуються літери англійського алфавіту, від A до Z).

Числа типу 1.5e6 функція не обробляє так, як parseFloat() .

Будь ласка, ознайомтеся з прикладами нижче, щоб не наколотися на підводні камені, заховані в роботі функції parseInt() .

ParseInt(""25"") // 25 parseInt(""-25"") // -25 parseInt(""45.12"") // 45 parseInt(""045"",10) // 45 parseInt( ""70"",8) // 56 (70 у вісімковій системі це 56 у десятковій) parseInt(""070"") // 56 (ВАЖЛИВО!!! нуль спочатку змусить функцію проаналізувати рядок як вісімкове число) parseInt(" "88"",8) // NaN (у вісімковій системі немає цифри 8) parseInt(""a1"") // NaN (ВАЖЛИВО!!! Функція за замовчуванням не сприймає число як 16-річне, якщо не дописати на початку рядки 0x) parseInt(""a1"",16) // 161 (тут явно вказана система числення) parseInt(""0xa1"") // 161 (правильний формат 16-річного числа, можна не вказувати другий параметр) parseInt( ""099"") // 0 (ВАЖЛИВО!!! Число сприймається як вісімкове, але містить неприпустимі символи) parseInt(""0.5e6"") // 0 (ВАЖЛИВО!!! не працює як parseFloat) parseInt("" ZZ"",36) // 1295 parseInt("-FF"") // NaN parseInt(""-FF"",16) // -255

Якщо Ви обробляєте дані з текстового поля, які вводить користувач, завжди використовуйте parseInt() разом із другим параметром radix, це убезпечить Ваш код від несподіваних результатів.

JavaScript – мова з динамічною типізацією даних. Це означає, що в ту саму змінну можна записувати значення різних типів, при цьому тип самої змінної буде змінюватися. Подібна поведінка часто дозволяє забути про різну поведінку змінних з різним типом, але пам'ятати про цю особливість все ж таки необхідно. Покажемо це на прикладі.

console.log(sum(1, 2)); // 3 (тут все ок) console.log (sum (1, "2")); // 12 (а тут не дуже)

Як видно з прикладу, функція sumнекоректно поводиться, якщо як хоча б одного її аргументу передати не число. Річ у тім, що з «складанні» числа з рядком, число перетворюється на рядку і відбувається його конкатенація (склеювання) з другим операндом.

Щоб уникнути подібних ускладнень, можна дізнаватися про тип змінної під час виконання скрипту і коригувати його поведінку, або уважно стежити за типами змінних.

Оператор typeof

Цей унарний оператор приймає як операнда абсолютно будь-яке значення і повертає його тип у рядковій змінній.

У JavaScript існують такі типи даних:

// 1.) object console.log (typeof ()); // object var p = (x: 1, y: 3); console.log (typeof p); // object // 2.) function function sayHello() ( console.log ("Hello!") ; ) console.log (typeof sayHello) ; // function // 3.) string console.log (typeof "JavaScript"); // string // 4.) number console.log (typeof 3.1415); // number // 5.) boolean console.log (typeof true); // boolean // 6.) undefined var notExistsOne; console.log (typeof notExistsOne) ; // undefined console.log (typeof notExistsTwo) ; // undefined

// 1.) object console.log(typeof()); // object var p = (x: 1, y: 3); console.log(typeof p); // object // 2.) function function sayHello() ( console.log("Hello!"); ) console.log(typeof sayHello); // function // 3.) string console.log (type of "JavaScript"); // string // 4.) number console.log(typeof 3.1415); // number // 5.) boolean console.log(typeof true); // boolean // 6.) undefined var notExistsOne; console.log(typeof notExistsOne); // undefined console.log(typeof notExistsTwo); // undefined

Зверніть увагу, що undefinedце також тип даних, що складається з одного значення.

Приведення типів

Під приведенням типів у програмуванні розуміють перетворення значення змінної одного типу на значення іншого типу.
Часто таке перетворення відбувається без контролю програмістом. Це можна було бачити у прикладі з функцією sum. Зміна типу відбувається, якщо результат виконання операції зі змінною вихідного типу незрозумілий. Наприклад, не можна точно сказати, що вийти в результаті додавання рядка з числом, але операція додавання двох чисел очевидна, і в цьому випадку логічно привести число до рядка.

Перетворення рядка до

Іноді сам програміст може змінити тип змінної, застосувавши деякі операції. Наприклад, операції інкременту або декременту над рядком приведуть її до числа.

var c = "not-a-number"; ++c; console.log(typeof c); // NaN

Варто зауважити, що не потрібно вдаватися до такого способу приведення рядка до числа через його погану читабельність і неочевидність. Для цього завдання в js існують вбудовані функції parseIntі parseFloat. Як перший аргумент вони приймають рядок, який необхідно привести до числа, а як другий необов'язковий – основа системи числення, в якій записано число в рядку, що передається як перший аргумент. Якщо другий аргумент не вказано, буде вважатися, що в рядку записано число в десятковій системі числення.

Функція parseIntвикористовується для перетворення рядка на ціле число, а функція parseFloatдля перетворення на дробове.

var a = parseInt("10"); console.log ([ "a = " , a, "; typeof a:" , typeof a] .join (" " ) ) ; // a = 10; typeof a: number var pi = parseInt("3.1415"); console.log ("pi =" + pi); // pi = 3 pi = parseFloat("3.1415"); console.log ("pi =" + pi); // pi = 3.1415

var a = parseInt("10"); console.log(["a = ", a, "; typeof a:", typeof a].join(" ")); // a = 10; typeof a: number var pi = parseInt("3.1415"); console.log("pi = "+ pi); // pi = 3 pi = parseFloat("3.1415"); console.log("pi = "+ pi); // pi = 3.1415

Зверніть увагу, що в рядку може бути будь-яке літеральне числове значення, у тому числі у шістнадцятковому, вісімковому або експоненційному вигляді.

a = parseInt("010"); console.log ("a =" + a); // a = 8 a = parseInt("0xAA"); console.log ("a =" + a); // a = 170 a = parseFloat("1e-10"); console.log ("a =" + a); // a = 1e-10 (1e-10 = 1 * 10^-10 = 0.0000000001)

a = parseInt("010"); console.log("a=" + a); // a = 8 a = parseInt("0xAA"); console.log("a=" + a); // a = 170 a = parseFloat("1e-10"); console.log("a=" + a); // a = 1e-10 (1e-10 = 1 * 10^-10 = 0.0000000001)

Як другий параметр функцій parseIntі parseFloatможна вказати основу системи числення.

a = parseInt("10", 8); console.log ("a =" + a); // a = 8 a = parseInt("010", 10); console.log ("a =" + a); // a = 10 a = parseInt("ff", 16); console.log ("a =" + a); // a = 255

a = parseInt("10", 8); console.log("a=" + a); // a = 8 a = parseInt("010", 10); console.log("a=" + a); // a = 10 a = parseInt("ff", 16); console.log("a=" + a); // a = 255

Якщо значення стоять у рядку, яку функції parseIntі parseFloatприймають як перший параметр, не є числовий літерал, то результатом виконання цих функцій буде значення NaN.

a = parseInt("not a number"); console.log ("a =" + a); // a = NaN a = parseFloat("not a number"); console.log ("a =" + a); // a = NaN

a = parseInt("not a number"); console.log("a=" + a); // a = NaN a = parseFloat("not a number"); console.log("a=" + a); // a = NaN

Строкове перетворення

У JavaScript значення будь-якого типу можна привести до рядка. Вище говорилося у тому, що з конкатенації рядка з числом, число наводиться до рядку, і потім відбувається конкатенація. Так відбуватиметься зі значенням будь-якого типу.

var str = "Object:" + (); console.log (str); // Object: str = "Array:" + [1, 2, 3]; console.log (str); // Array: 1,2,3 function sum(a, b) ( return a + b; ) str = "Function: " + sum; console.log (str); /* Function: function sum(a, b) ( return a + b; ) */

var str = "Object:" + (); console.log(str); // Object: str = "Array:" +; console.log(str); // Array: 1,2,3 function sum(a, b) ( return a + b; ) str = "Function: " + sum; console.log(str); /* Function: function sum(a, b) ( return a + b; ) */

Фактично при приведенні об'єкта до рядка неявно викликається метод toString, який також можна викликати явно.

var p = (x: 2, y: 4), str; str = p.toString(); console.log (typeof str); // string console.log (str); // str = [1, 2, 3]. toString (); console.log (typeof str); // string console.log (str); // 1,2,3

var p = (x: 2, y: 4), str; str = p.toString(); console.log(typeof str); // string console.log(str); // str = .toString(); console.log(typeof str); // string console.log(str); // 1,2,3

Числове перетворення

Перетворення число відбувається при виконанні математичних операцій і при виконанні операції порівняння з приведенням типу (==, !=), при цьому значення falseі порожній масив перетворюються на значення 0 типу number.

var a = true + true + true; // 1 + 1 + 1 console.log(a); // 3

Непустий масив, об'єкт та функція при використанні в арифметичних виразах наводяться до рядка.

var arr = [1, 2, 3]; console.log (arr + 4); // 1,2,34 function sum (a, b) (return a + b;) console.log (sum + 5); // function sum(a, b)(return a + b;)5

var arr =; console.log(arr + 4); // 1,2,34 function sum (a, b) (return a + b;) console.log (sum + 5); // function sum(a, b)(return a + b;)5

Як видно, неявне перетворення типів у js далеко не завжди очевидне, тому варто його уникати, використовуючи функції для явного приведення типів, такі як parseInt, parseFloatі toString.

На цьому все. Як завжди, вам успіхів!