Перетворення даних на JavaScript. Як перетворюється на JavaScript рядок у число? Javascript перетворення в рядок

останнє оновлення: 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 у десятковій.

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

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

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

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

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

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

Методи 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. Один із способів – проаналізувати його, а інший спосіб – змінити його тип на число. Всі трюки в інших відповідях (наприклад, унарний плюс) мають на увазі неявний примус типу рядка до числа. Ви також можете зробити те саме з функцією Number.

Синтаксичний

Var parsed = parseInt("97", 10);

ParseInt і parseFloat є дві функції, які використовуються для розбору рядків у числах. Синтаксичний аналіз зупиниться мовчки, якщо він потрапить у символ, який він не розпізнає, що може бути корисно для синтаксичного аналізу рядків, наприклад «92px», але це також дещо небезпечно, оскільки воно не дасть вам жодної помилки при поганому введенні, натомість ви "Повернімо NaN, якщо рядок не починається з числа. Пробіл на початку рядка ігнорується. Ось приклад того, що робить щось інше, що ви хочете, і не даючи жодних вказівок, що все пішло не так:

Var widgetsSold = parseInt("97,800", 10); // widgetsSold is now 97

Це гарна практика, щоб завжди вказувати десяткову як другий аргумент. У старих браузерах, якщо рядок починалася з 0, він був би інтерпретований як вісімковий, якби не було вказано значення radix, яке привабило багато людей зненацька. Поведінка для шістнадцяткового запуску запускається, якщо рядок починається з 0x, якщо не вказано значення radix. 0xff. Стандарт фактично змінився за допомогою ecmascript 5, тому сучасні браузерибільше не запускають восьмеричні, коли є провідне 0, якщо не вказано жодних підстав. parseInt розуміє радики вщент 36, і в цьому випадку як верхні, так і малі літери обробляються як еквівалентні.

Зміна типу струни на номер

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

Var cast = Number ("97");

Це відрізняється від методів аналізу (хоча він, як і раніше, ігнорує прогалини). Це більш строгий: якщо він не розуміє весь рядок, ніж повертає NaN , тому ви не можете використовувати його для рядків, таких як 97px . Оскільки вам потрібне примітивне число, а не об'єкт обгортки Number, переконайтеся, що перед функцією Number не ставте .

Очевидно, що перетворення на число дає значення, яке може бути float, а не ціле число, тому, якщо ви хочете ціле число, вам потрібно його змінити. Є кілька способів зробити це:

Var rounded = Math.floor(Number("97.654")); // Інші варіанти є Math.ceil, Math.round var fixed = Number("97.654").toFixed(0); / / Rounded rather than truncated var bitwised = Number ("97.654") | 0; // do not use for large numbers

Будь-який оператор побітового (тут я зробив побітову або, але ви можете також зробити подвійне заперечення, як у попередній відповіді або Bitshift) перетворює значення 32-бітове ціле число, і більшість з них перетворюється на ціле число зі знаком. Зверніть увагу, що це не хотітиме, щоб ви шукали великі цілі числа. Якщо ціле число не може бути представлене у 32 бітах, воно буде завершено.

~~"3000000000.654" === -1294967296 // Це є таке як Number("30000000000.654")|0 "30000000000.654" >>> 0 === 300000000000 >> 0 === 3647256576 // but still fails with larger numbers

Для коректної роботиз великими числами, ви повинні використовувати заокруглення методи

Math.floor("3000000000.654") === 30000000000 // This is the same as Math.floor(Number("30000000000.654"))

Майте на увазі, що всі ці методи розуміють експоненційної нотації, тому 2e2 є 200 , а не NaN. Крім того, Number розуміє «Безкінечність», у той час як методи аналізу не роблять цього.

Користувальницькі

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

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

У 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, це убезпечить Ваш код від несподіваних результатів.