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

Немає різниці в тому, якого типу змінна використовується у виразі. Якщо математичне вираз, всі його змінні автоматично будуть інтерпретовані як числові. Якщо обробляються рядки, всі «учасники» висловлювання розглядаються як рядки. Однак завдання перетворення на JavaScript "рядок у число" існує у значно ширшому контексті.

Методи JavaScript перетворення рядків у числа

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

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

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

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

Звичайні методи перетворення

Є цілі числа і є дробові, відповідно, JavaScript рядок у число перетворює за:

• parseInt;
• parseFloat.

Загальний випадок реалізується шляхом використання рядка у простому математичному виразі.

Достатньо поставити перед рядком символів знак "+" і, якщо в ньому є число, результатом виразу буде число. Значення змінної може змінитися, але тип зміниться завжди: типвідображає номер, а не string. Важливо розуміти, що використання перетвореної змінної у рядковому виразі може показати зовсім інший результат.

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

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

Необхідно мати уявлення про системи числення, про способи запису шістнадцяткових (число починається з "0x") та вісімкових чисел (число починається з "0").

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

Перетворення з метою сортування

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

Для вирішення такої задачі можна перетворити символи рядка в їх числові коди або призначити літери та цифри впорядковану послідовність цифр. Метод charCodeAt(), застосований до рядка, присвоє числове значення 98 змінної iB, тобто коду літери "b". Враховуючи, що значення коду літери "a" дорівнює 97 можна отримати номери всіх літер латинського алфавіту в порядку зростання за малими та великими наборами. Аналогічно за буквами російського алфавіту.

Власний варіант сортування через числа дозволяє сформувати потрібні наборисимволів. Можна, наприклад, «перемістити» кирилицю та латиницю або їх перемішати з метою залишити лише відмінні за написанням літери, додати до наборів символи табуляції та пробілу.

Формування унікального числа рядка

Якщо код букви "a" дорівнює 97, то різниця між буквою та числом 97 дасть унікальний номерлітери в алфавіту. Підсумовуючи унікальні номери кожного символу рядка, важко отримати унікальне число цього рядка.

Якщо для кожної позиції літери в рядку призначити вагу, наприклад, позиція:

• 0 вага 1;
• 1 вага 10;
• 2 вага 100;

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

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

«Зростаючі» селектори сторінки сайту

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

Кожне нове введення рядка інформації в селектор (будь-яким відвідувачем) трансформується в число, яке разом з оригіналом відправляється на сервер для зберігання. Коли розпочинається новий сеанс роботи або приходить новий відвідувач, селектор уже не порожній. Сторінка при завантаженні приходить до браузера з непустим селектором.

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

Для вирішення цього завдання метод JavaScript рядок у число використовувати не можна. Звичайні методи parseInt і parseFloat розраховані на інше застосування, але можна вигадати алгоритм однозначного перетворення рядка в число, причому не обов'язково оборотний. Достатньо того, що на різних наборахсимволів у рядку алгоритм перетворення не буде повторюватися.

Оптимізація трафіку та аналітика

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

Призначаючи на дії відвідувача обробник події у вигляді JavaScript function за певними блоками інформації, можна сформулювати фільтр, який дозволить відвідувачеві точно поставити мету, знайти потрібну інформацію, отримати бажане рішення.

Перетворення малої інформації тут може бути як завгодно ємним у частині рядка і дуже малим у частині числа. Інакше кажучи, перетворення JavaScript рядок у число розробник виконує за своїм алгоритмом. Відвідувач маніпулює зрозумілою інформацією, але в сервер йде мінімальний обсяг даних - число.

Динаміка множини чисел за всіма відвідувачами в контексті точно відомої інформації дозволяє інший JavaScript function (не обробник), що викликається за відповіддю сервера через механізм AJAX, оперативно в реальному масштабі часу давати всім відвідувачам потрібну інформацію одночасно. Так працює система.

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

Інструментальне застосування перетворень

JavaScript та CSS у контексті обробки числової інформації дозволяють керувати відображенням сторінки без участі сервера. Правила CSS побудовані як підрядки, рекурсивні. Зазвичай параметр - число, за яким слідує кілька літер (наприклад, "px", "pt", "em", ...). Параметр є підрядком у правилі, а правило входить підрядком у стиль класу чи ідентифікатора.

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

У JavaScript значеннядосить вільно (явно і неявно) можуть бути перетворені з одного типу на інший. Наприклад, якщо якийсь оператор очікує отримати значення певного типу, а йому передається значення іншого типу, інтерпретатор автоматично спробує виконати перетворення до потрібного типу:

Console.log(10 + "машин"); // "10 машин". Число неявно перетворюється на рядок console.log("7" * "4"); // 28. Обидва рядки неявно перетворюються на числа

Неявне перетворення- це коли інтерпретатор автоматично виконує перетворення типів, т. е. без участі програміста. Явне перетворення- це коли перетворення виконує програміст. Явне перетворення інакше називають наведенням типів:

Console.log("7" * "4"); // 28. Неявне перетворення console.log(Number("7") * Number("4")); // 28. Явне перетворення

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

Для явного перетворення на прості типи використовуються такі функції: Boolean() , Number() , String() . При неявному перетворення інтерпретатор використовує самі функції, що використовуються для явного перетворення.

Для явного перетворення можна використовувати оператори замість функції. Наприклад, якщо один з операндів оператора + є рядком, інший операнд також перетворюється на рядок. Унарний оператор + перетворює свій операнд на число. Унарний оператор! перетворює операнд на логічне значення та інвертує його. Все це спричинило появу наступних своєрідних способів перетворення типів, які можна зустріти на практиці:

X + "" // Те саме, що і String (x) + x // Те саме, що і Number (x). Можна також зустріти x - 0 !! х // Те саме, що і Boolean (x)

Перетворення у числа

Функція Number() перетворює значення за такими правилами:

• Логічні значення true і false перетворюються на 1 і 0 відповідно.
• Числа повертаються без зміни.
• Значення null перетворюється на 0 .
• Значення undefined перетворюється на NaN.

Для рядків діють спеціальні правила:

• Якщо рядок містить лише цифри з початковим знаком + або - або без знака, він завжди перетворюється на ціле десяткове число. Початкові нулі ігноруються, наприклад "0011" перетворюється на 11.
• Якщо рядок є числом з плаваючою точкою з початковим знаком + або - або без знака, він перетворюється на відповідне число з плаваючою точкою (початкові нулі також ігноруються).
• Якщо рядок є числом у шістнадцятковому форматі, він перетворюється на відповідне ціле десяткове число.
• Якщо рядок порожній, він перетворюється на 0 .
• Якщо рядок містить щось відмінне від попередніх варіантів, він перетворюється на NaN .
• Для об'єктів викликається метод valueOf() , а значення, що їм повертається, автоматично перетворюється за попередніми правилами. Якщо це перетворення дає результаті NaN , викликається метод toString() і застосовуються правила перетворення рядків у числа.

Унарні оператори + і - працюють за тими самими правилами, як і функція Number() .

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

Функція Boolean() перетворює значення на його логічний еквівалент:

• Наступні значення в результаті перетворення дають значення false: undefined, null, 0, -0, NaN, "".
• Значення false повертається без зміни.
• Всі інші значення внаслідок перетворення дають значення true.

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

Функція String() перетворює значення за такими правилами:

• Для всіх значень, крім null і undefined, автоматично викликається метод toString() і повертається рядкове подання значення.
• Для значення null повертається рядок "null".
• Для значення undefined повертається рядок "undefined".

Перетворення простих типів на об'єкти

Для перетворення простих значень на об'єкти використовуються конструктори Boolean() , Number() , String() :

Var oNum = New Number(3); var oStr = новий String("1.2"); var oBool = новий Boolean(true); alert(typeof oNum); // "object" alert (type of oStr); // "object" alert (type of oBool); // "object"

Перетворення об'єктів у прості значення

Всі об'єкти успадковують два методи перетворення: toString() та valueOf() .

Метод toString() повертає рядкову виставу об'єкта. За умовчанням він нічого цікавого не повертає:

Alert((x: 1).toString()); // ""

Деякі типи мають більш спеціалізовані версії методу toString(). Наприклад, метод toString() у масиву перетворює всі його елементи в рядки і потім об'єднує їх в один рядок, вставляючи коми між ними:

Alert(.toString()); // "1,2,3"

Завдання методу valueOf() визначено не так чітко: передбачається, що він повинен перетворити об'єкт у його просте значення, якщо таке значення існує. Об'єкти за своєю сутністю є складовими значеннями, і більшість об'єктів не можуть бути представлені у вигляді єдиного простого значення, тому за умовчанням метод valueOf() повертає не просте значення, а посилання на нього:

Alert(typeof(x:2).valueOf()); // "object"

При перетворенні об'єкта в рядок інтерпретатор JavaScript виконує такі дії:

• Якщо об'єкт має метод toString(), інтерпретатор викликає його. Якщо він повертає просте значення, інтерпретатор перетворює значення на рядок (якщо воно не є рядком) і повертає результат перетворення.
• Якщо об'єкт не має методу toString() або цей метод не повертає просте значення, інтерпретатор перевіряє наявність методу valueOf() . Якщо цей метод визначено, інтерпретатор викликає його. Якщо він повертає просте значення, інтерпретатор перетворює це значення на рядок (якщо воно не є рядком) і повертає результат перетворення.

При перетворенні об'єкта в число інтерпретатор виконує ті ж дії, але першим намагається застосувати метод valueOf() :

• Якщо об'єкт має метод valueOf() , що повертає просте значення, інтерпретатор перетворює (при необхідності) це значення на число і повертає результат.
• Якщо об'єкт немає методу valueOf() або цей метод не повертає просте значення, то інтерпретатор перевіряє наявність методу toString() . Якщо об'єкт має метод toString() , що повертає просте значення, інтерпретатор виконує перетворення та повертає отримане значення.
• В іншому випадку інтерпретатор робить висновок, що ні toString() ні valueOf() не дозволяють отримати просте значення і збуджує помилку TypeError .

Методи toString() і valueOf() доступні для читання та запису, тому їх можна перевизначити і явно вказати, що буде повертатися під час перетворення:

Var obj = (); obj.toString = function() ( return "об'єкт"; ); alert("Це" + obj); // "Це об'єкт"

У 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рядок у число. Це робиться за допомогою функції Number, зараз я покажу її використання на прикладі.
Також пропоную переглянути відео-версію цієї статті:

Трохи про типи даних

Як ви знаєте, у javascript є числовий і рядковий типданих. Спробуймо створити дві змінні, в які збережемо числа, а потім виведемо результат на екран.

Var a = 5; var b = 12; document.write(a + b);

Яким буде результат? 17, що й вивів нам браузер. Отже, це числові дані, тому браузер успішно склав їх. А тепер давайте створимо дві інші змінні, в які покладемо такі ж значення, але в лапках. Я нагадаю, всі рядки в JavaScript пишуться саме в лапках.

Var c = "5"; var d = "12"; document.write("
+ c + d);

Тепер браузер вважає наші дані рядками і якщо ми їх складемо, то просто будуть складені два рядки і ми отримаємо 512, що не є правильним результатом, якщо б складалися числа, але є правильним, якщо поставити разом два рядки.

Як перетворити в JavaScript рядок у число?

Тут все просто, створимо чергові дві змінні, в які запишемо те саме значення, що задано змінним c і d, але пропустивши їх через метод Number:

Var e = Number (c); var f = Number(d); document.write(e + f);

Якщо ви тепер спробуєте вивести результат від цієї додавання на екран, то виведеться 17. Все тому, що наш метод успішно відпрацював і перетворив рядок на число. Хочу наголосити, що якщо ви напишіть так:

Document.write("
+ e + f);

То на екран виведеться 512, тому що при складанні рядків та чисел ЗАВЖДИрезультат перетворюється на рядок. Якщо ви хочете додати перенесення рядка і при цьому зберегти правильний результат, можна записати все в два рядки або в одне так:

Document.write("
+ (e + f));

Якщо взяти числа в дужки, то вони не будуть перетворені на рядки та успішно збережуть свої властивості. Ось така коротка стаття у мене сьогодні. Сподіваюся, 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, це убезпечить Ваш код від несподіваних результатів.