JavaScript: Перетворення типів даних. Перетворення типів даних на JavaScript Javascript перетворення числа в рядок

У 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 "рядок у число" існує у значно ширшому контексті.

Арсенал методів перетворення рядків у числа не великий, але достатній у всіх простих випадках. Тут JavaScript (для початківців особливо) - це шлях від простого до складного на практичних прикладах.

Вам буде цікаво:

У прикладі описано чотири різних рядки. У першому блоці виведення тип кожної змінних функція Typeof визначається як string. Потім кожен рядок дуже просто перетворюється на число. У другому блоці виведення видно зміни у змінних після перетворення, їх тип став числом. Приклад перетворення JavaScript parseFloatособливо показовий: було "12e+3", стало "12000".

Зміни під час перетворення рядка на число можуть бути істотними! Але мають значення лише перші символи: вони мають бути цифровими. Якщо немає жодного цифрового символу, результат буде NaN.

Зворотне перетворення рядка, що «стало» числом, не завжди такий самий рядок. Цей момент можна використовувати для перевірки правильності введення чисельної інформації.

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

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

Цей мануал навчить перетворити примітивні типи даних JavaScript, включаючи числа, рядки та логічні елементи.

Мова програмування JavaScript дуже добре справляється із обробкою несподіваних значень. JavaScript не відхиляє несподіваних значень, а намагається перетворити. Це неявне перетворення називається приведенням типів (type coercion).

Окремі методи автоматично перетворюють значення, щоб їх використовувати. Метод alert() приймає рядок як свій параметр, а інші типи автоматично перетворює на рядки. Таким чином, можна передати цьому методу числове значення:

Якщо запустити цей рядок, браузер поверне спливаюче вікно зі значенням 8.5, яке вже буде перетворено на рядок.

Використовуючи рядки, що складаються з чисел разом з математичними операторами, ви виявите, що JavaScript може обробляти значення, неявно перетворюючи рядки в числа:

// Віднімання
"15" - "10";
5
// Модуль
"15" % "10";
5

Але не всі оператори працюють передбачувано. Особливо це стосується оператора +: він виконує складання чисел та конкатенацію рядків.

// Під час роботи з рядками + виконує конкатенацію
"2" + "3";
"23"

Оскільки оператор + має багато призначень, у цьому прикладі він сприймає значення 2 та 3 як рядкові, незважаючи на те, що вони виражаються числовими рядками. Тому він об'єднує рядки "2" і "3" і отримує 23, а не складає 2 і 3 і отримує 5.

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

Щоб явно перетворити значення на рядок, викличте метод String() або n.toString().

Спробуйте перетворити логічне значення true на рядок за допомогою String().

Це поверне рядковий літерал "true".

Також можна спробувати передати функції число:

Вона поверне рядковий літерал:

Тепер спробуйте використати String() зі змінною. Призначте числове значення змінної odyssey і використовуйте тип оператора, щоб перевірити тип.

let odyssey = 2001;
console.log(typeof odyssey);
number

на Наразізмінної odyssey присвоєно числове значення 2001. Оператор типупідтверджує, що значення є числом.

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

odyssey = String(odyssey); // "2001"
console.log(typeof odyssey);
string

Як бачите, тепер змінна odyssey містить рядок.

Функція n.toString() працює аналогічно. Замініть змінну n.

let blows = 400;
blows.toString();

Змінна blows міститиме рядок.

Замість змінної можна помістити значення у круглих дужках:

(1776). toString (); // returns "1776"
(false).toString(); // returns "false"
(100 + 200). toString (); // returns "300"

String() і n.toString() явно перетворюють логічні та числові значення в рядки.

Метод Number() може перетворити значення на число. Часто виникає необхідність перетворити рядки, що складаються з чисел, але іноді потрібно перетворювати і логічні значення.

Для прикладу передайте методу Number() такий рядок:

Рядок буде перетворено на число і більше не буде укладено в лапки.

Також можна присвоїти рядок змінної і потім перетворити його.

let dalmatians = "101";
Number(dalmatians);
101

Рядковий літерал «101» було перетворено на число 101.

Рядки з пробілів або порожні рядки будуть перетворені на число 0.

Number(" "); // returns 0
Number(""); // returns 0

Майте на увазі, що рядки, які не складаються з чисел, перетворюються на NaN, що означає Not a Number. Це стосується і числам, розділеним пробілами.

Number("twelve"); // returns NaN
Number("20,000"); // returns NaN
Number("2 3"); // returns NaN
Number("11-11-11"); // returns NaN

У логічних даних значення false дорівнюватиме 0, а true дорівнюватиме 1.

Щоб перетворити числа чи рядки на логічні значення, використовується метод Boolean(). Наприклад, це допомагає визначити, вводить користувач дані текстове поле чи ні.

Будь-яке значення, яке інтерпретується як порожнє, наприклад, число 0, порожня стрічказначення undefined, NaN або null перетворюються на значення false.

Boolean(0); // returns false
Boolean(""); // returns false
Boolean(undefined); // returns false
Boolean (NaN); // returns false
Boolean (null); // returns false

Інші значення, включаючи рядкові літерали, що складаються з прогалин, будуть перетворені на true.

Boolean (2000); // returns true
Boolean(" "); // returns true
Boolean("Maniacs"); // returns true

Зверніть увагу: рядковий літерал "0" перетворюється на true, оскільки це не порожнє значення:

Boolean("0"); // returns true

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

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

ПаршеInt() функція з'єднується з string argument and returns integer of specified radix (the base in matematical numeral systems).

Source для цього interactive example is stored in GitHub repository. Якщо ви знайдете, щоб розширити проектні приклади, повторити clone https://github.com/mdn/interactive-examples і виконати додаткові запити.

An integer parsed from the given string .

Якщо дихання є смаллер не 11 , і першим не будь-яким простим характером не може бути перераховано на номер, NaN є відновлено.

ПірсІнші функції перетворюють його в першу чергу на string, з'являються, що string, будуть відновити integer або NaN .

Якщо не NaN , то оборотна величина буде бути всередині , що є першим argumentом , як номер в особливих radix . (Наприклад, редагування 10 конвертів від десяткового числа, 8 конвертів від octal, 16 від hexadecimal, і so on.)

Для radices above 10 , Letters of English alfabet indicate numerals greater than 9 . Для прикладу, для hexadecimal numbers (base 16), за допомогою F are used.

Якщо parseInt encounters character that is not numeral in the specified radix , it ignores it and all succeeding characters and returns the integer value parsed up to point. parseInt truncates numbers до integer values. Leading and trailing spaces allow allowed.

Тому деякі номери використовують e-character в їхній string representation (e.g. 6.022e23 for 6.022 × 10 23), використовуючи периферійний номер для нумерації номерів буде виробляти невідповідні результати при використанні на дуже великі або дуже важливі. parseInt should not be used as substitute for Math.floor() .

parseInt understands exactly два signs: + for positive, and - for negative (since ECMAScript 1). Це робиться як початковий хід в ходьбі з whitespace is removed. Якщо немає сигналів, ви знайдете, algoritm moves to following step; іншіwise, it removes the sign and runs the number-parsing on the rest of the string.

Якщо radix is ​​undefined , 0 , або unspecified, JavaScript розуміє, що:

Якщо перший показник може не бути введений до номера, ParseInt returns NaN unless the radix is ​​bigger than 10 .

Для аритметичних цінностей, NaN value is not a number in any radix. Ви можете зателефонувати isNaN функцію до значення, якщо результат parseInt is NaN . Якщо NaN йде на аритмічних операціях, результат виконання буде на NaN .

Наведіть номер до його string literal в особливу radix, use thatNumber .toString(radix) .

The following examples all return 15:

ParseInt("0xF", 16) parseInt("F", 16) parseInt("17", 8) parseInt(021, 8) parseInt("015", 10) // but `parseInt(015, 10)` will return 13 parseInt(15.99, 10) parseInt("15,123", 10) parseInt("FXX123", 16) parseInt("1111", 2) parseInt("15 * 3", 10) parseInt("15 parseInt("15px", 10) parseInt("12", 13)

The following examples all return NaN:

ParseInt("Hello", 8) // Немає номера на всіх parseInt("546", 2) // Digits інші не 0 або 1 є неправильним для binary radix

Наведені нижче описи all return -15:

ParseInt("-F", 16) parseInt("-0F", 16) parseInt("-0XF", 16) parseInt(-15.1, 10) parseInt("-17", 8) parseInt("-15", 10) parseInt("-1111", 2) parseInt("-15e1", 10) parseInt("-12", 13)

The following examples all return 4:

ParseInt(4.7, 10) parseInt(4.7 * 1e22, 10) // Very large number becomes 4 parseInt(0.000000000000434, 10) // Very small number becomes 4

The following example returns 224:

ParseInt("0e0", 16) parseInt("123_456") // 123

Although discouraged by ECMAScript 3 і призначений ECMAScript 5, багато implementation interpret numerical string beginning with leading 0 as octal. Наступний може мати octal result, або він може мати decimal result. Будь-яка особливість радіє до того, що це невиправданий behavior.

ParseInt("0e0") // 0 parseInt("08") // 0, тому "8" is not an octal digit.

ECMAScript 5 specification of the function parseInt longer allows implementations to treat Strings beginning with a 0 characters as octal values. ECMAScript 5 states:

ПірсІншої функції виробляють integer value dictated by interpretation of contents of string argument argumenting the specified radix. Leading white space в string is ignored. Якщо редагування є невизначеним або 0 , то це означає, що до 10 except, коли номер починається з параметром розміру 0x або 0X, в якому випадку редагування 16 є зарахованим.

Це різняться з ECMAScript 3, які розрізняються, але дозволяють octal interpretation.

Багато implementations не можуть бути визнані цим behavior as of 2013, і тому що браузери повинні бути підтримані, будь-який specify a radix .

Це є деякими можливими для того, щоб мати стриманий спосіб до періодів.

Regular expressions can help:

Function filterInt(value) ( ​​if (/^[-+]?(\d+|Infinity)$/.test(value)) ( return Number(value) ) else ( return NaN ) ) console.log(filterInt("421 ")) // 421 console.log(filterInt("-421")) // -421 console.log(filterInt("+421")) // 421 console.log(filterInt("Infinity")) // Infinity console.log(filterInt("421e+0")) // NaN console.log(filterInt("421hop")) // NaN console.log(filterInt("hop1.61803398875")) // NaN console.log (filterInt("1.61803398875")) // NaN

Компактність таблиці на цій сторінці генерується з структурованих даних. Якщо ви знайдете, щоб дізнатися про ваші дані, клацніть на https://github.com/mdn/browser-compat-data і пишуть.

Update compatibility data on GitHub

Останнє оновлення: 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() повертає рядок. Тому цей рядок нам треба перетворити на число, щоб виконати з ним операції.

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

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