Js приведение к числу. Преобразование данных в JavaScript

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали про типы данных в Javascript . В данной статье я бы хотел поговорить про преобразование типов в Javascript . Преобразование типов в Javascript, да и вообще в любом языке программирования, выполняются очень часто. Сначала хотел поговорить про преобразование типов при сравнении переменных, либо других условий, результатом которых является true или false . При сравнении переменных разного типа выполняются фоновые преобразования. Здесь главным моментом является то, что при таких фоновых преобразованиях, значение, которое хранится в переменной, не меняется. переменная преобразовывается в тот тип данных (создаётся временное значение переменной), который необходим для выполнения операции. приведу пример:

Сравниваются переменные строкового типа и числового типа. при сравнении значения этих переменных приводятся к одному типу данных. Далее сравнение возвращает логическое значение, а преобразованные временные значения удаляются. Все преобразования зависят от контекста — операторов, которые выполняют над ними действия. пример кода:

Var a = 5; var b = "15"; if (a < b) alert("a < b"); else alert("a > b");

В данном случае переменная b будет преобразована в число (выполнилось фоновое преобразование типа String в тип Number, и получится временное значение переменной b типа Number = 15, которое удалится после выполнения операции сравнения), и выйдет результат, что a .

Ниже приведена таблица, которая показывает, как один тип данных преобразовывается в другой:

Получить логический тип данных можно из любого типа данных. Делается это с помощью оператора отрицания, либо двойного отрицания. Пример:

Var a = 20; var b = !a; //вернет false var c = !!a; //вернет true

Строку можно получить из любого объекта. Пример:

Var a = 20; var b = a.toString(); //вернет "20" var c = a + ""; //вернет "20" typeof b; //вернет string typeof c; //вернет string

Получение числа из строки. Пример:

Var a = "20"; var b = a * 1; //вернет 20 var c = + a; //вернет 20 typeof b; //вернет number typeof c; //вернет number

Давайте теперь на основе полученных знаний разберем поведение логического "И" (&&) и логического "ИЛИ" (||) :

Для корректного выполнения этого оператора необходимо, чтобы значения всех операндов могли быть преобразованы в true. Если значения всех операндов могут быть преобразованы в true, то будет возвращено первоначальное значение последнего сравниваемого операнда. Если значение хотя бы одного операнда будет преобразовано в false, то вернется первоначальное значение этого операнда. Пример:

Var a = 15; var b = "abc"; var c = 0; var resultat; resultat = a && b && c; //вернет 0 resultat = c && b && a; //вернет 0 resultat = 7 && a; //вернет 15 resultat = 7 && b; //вернет "abc"

Немного поясню про операторы и операнды. Разберем выражение resultat = a && b && c . Здесь операторами являются "=" и "&&" , т.е. это действия. Операнды: resultat, a, b ,c . Это то, над чем совершаются действия.

Последнее обновление: 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 procent = parseInt(strPercent); sum = sum + sum * procent / 100; alert("После начисления процентов сумма вклада составит: " + sum);

С помощью функции prompt() в браузере выводится диалоговое окно с предложением ввести некоторое значение. Второй аргумент в этой функции указывает на значение, которое будет использоваться по умолчанию.

Однако функция prompt() возвращает строку. Поэтому эту строку нам надо преобразовать в число, чтобы выполнить с ней операции.

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

Затем подобное сообщение отобразится и для ввода процента. И в конце программа получит данные, преобразует их в числа и выполнит подсчет.

На уроке будут разобраны функции javaScript для преобразования типов данных; даны примеры с решениями по использованию различных методов javascript вывода текста и его ввода

Напоминаем, что данный сайт не претендует на полное изложение информации по теме. Целью портала является предоставление возможности усваивания материала на основе готовых решенных примеров по javaScript с лабораторными заданиями для закрепления материала. Представленные на сайте сайт лабораторные задания по javaScript выстроены последовательно по мере увеличения сложности. Сайт сайт может быть использован учителями и преподавателями в качестве вспомогательного наглядного пособия.

Иногда в программе требуется преобразовать тип переменной. Рассмотрим основные функции, связанные с преобразованием типов:

• parseInt(строка, основание)

преобразует указанную в параметре строку в целое число . Если есть второй параметр — система счисления — преобразование происходит по указанному основанию системы счисления (8, 10 или 16):

parseInt("3.14") // результат = 3 parseInt("-7.875") // результат = -7 parseInt("435") // результат = 435 parseInt("Вася") /* результат = NaN, то есть не является числом */ parseInt("15" ,8) // результат = 13

Важно:
Функция parseInt() отсекает дробную часть числа. Чтобы округлить число необходимо использовать метод Math.round()


• parseFloat (строка)

преобразует указанную строку в число с плавающей разделительной точкой (десятичной):

parseFloat("3.14") // результат = 3.14 parseFloat("-7.875") // результат = -7.875 parseFloat ("435") // результат = 435 parseFloat ("Вася") /* результат = NaN, то есть не является числом */ parseFloat ("17.5") // результат = 17.5

Важно: Обе функции и parseInt() и parseFloat() используют в качестве параметра строку и преобразуют ее в число




Кроме того, в javascript предусмотрены еще два способа преобразований:
1. Обычные преобразования:

x = Number(x) // к числу x = String(x) // к строке x = Boolean(x) // к булеву типу

2. Компактные преобразования:

x = +x // к числу x = x + "" // к строке x = !!x // к булеву типу

• Функция javascript isNaN(значение)

служит для определения того, является ли значение выражения числом:

isNaN(123) /* результат false (то есть это - число) */ isNaN("50 рублей") /* результат true (то есть это - не число) */

Иногда можно получить такую ошибку JavaScript — NaN — когда значение не является числом (а ожидается число):

var b; document.write(b); // b=undefined

• Для того чтобы узнать текущий тип данных конкретной переменной в javascript используется функция typeof:

typeof 33 // возвращает строку "number", typeof "A String" // возвращает строку "string", typeof true // возвращает строку "boolean", typeof null // возвращает строку "object"

typeof 33 // возвращает строку "number", typeof "A String" // возвращает строку "string", typeof true // возвращает строку "boolean", typeof null // возвращает строку "object"

Пример 1. Создайте сценарий:

• с двумя строковыми переменными со значениями "строка1" и "строка2" ; с помощью операции конкатенации объедините строки;
• с двумя числовыми переменными со значениями 3.14 и FF ; выведите их произведение, преобразованное в целое число. Для вывода значений используйте метод document.write() .

• script :

// для кода JavaScript

• В коде для javascript инициализируйте две строковые переменные:

var c=3.14; var d=0xFF; // 16-я система счисления

Вспомним, что для чисел 16-й системы используется префикс 0x .

• Инициализируйте две числовые переменные:

// Инициализация двух переменных: var a="строка1"; var b="строка2";

• Выведите результаты с помощью метода document.write() с несколькими параметрами, разделенными через запятую. Чтобы вывести в две строки следует применить тег br . Для преобразования в целый тип используйте функцию parseInt() :

document.write ("конкатенация: " , a+ b, " произведение: " , parseInt(c* d) ) ;

document.write("конкатенация: ",a+b,"
произведение: ", parseInt(c*d));

Задание Js 1: Даны переменные: a="12"; b="7.15";

Найдите числовых значений переменной a на переменную b . Используйте функции преобразования типов.
Результатом должно быть число 5 .

X = Math.round(x)

Вопросы для самоконтроля:

JavaScript может выдавать сообщения и запрашивать данные у пользователя с помощью трех диалоговых окон, вызываемых методами alert , confirm и prompt . Рассмотрим работу с ними:

Важно: Во всех трех случаях использования методов ввода или вывода объект window можно опускать:

window.alert("сообщение"); // строгий синтаксис

alert("сообщение"); // нестрогий синтаксис

Этот объект означает «окно», и для краткости обращения к методам разрешено его не использовать, поэтому в синтаксисе он выделен квадратными скобками

Пример 2:

1 задание:

• Создайте веб-страницу с html-скелетом и тегом script :

// для кода JavaScript

• В коде для javascript инициализируйте переменную для присваивания ей значения - имени, которое введет пользователь в модальное окно prompt() :

document.write("Привет, ", name," !");

• Протестируйте сценарий в браузере.

2 задание:

• Создайте веб-страницу с html-скелетом и тегом script .
• В коде для javascript инициализируйте две переменных для присваивания им значений - чисел, которое введет пользователь в модальные окна prompt() . Для преобразования в целый тип используйте функцию parseInt() .

Вспомним, что метод prompt() возвращает строковое значение. Поэтому для дальнейшей работы с числами, значения необходимо преобразовать в числовой тип:

var a = parseInt(prompt("Введите первое число")); var b = parseInt(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 "строку в число" существует в значительно более широком контексте.

Арсенал методов для преобразования строк в числа не велик, но достаточен во всех простых случаях. Здесь JavaScript (для начинающих особенно) - это путь от от простому к сложному на практичных примерах.

В примере описаны четыре разных строки. В первом блоке вывода тип каждой переменных функция typeof определяется как string. Затем каждая строка очень просто преобразуется в число. Во втором блоке вывода видны изменения в переменных после преобразования, их тип стал числом. Пример преобразования JavaScript parseFloat особенно показателен: было "12e+3", стало "12000".

Изменения при преобразования строки в число могут быть существенны! Но имеют значение только первые символы: они должны быть цифровыми. Если нет ни одного цифрового символа, результат будет NaN.

Обратное преобразование строки, «ставшей» числом, не всегда такая же строка. Этот момент можно использовать для проверки корректности ввода численной информации.

Есть целые числа и есть дробные, соответственно, JavaScript строку в число преобразует по:

• parseInt;
• parseFloat.

Общий случай реализуется путем использования строки в простом математическом выражении.

Достаточно поставить перед строкой символов знак "+" и, если в ней есть число, то результатом выражения будет число. Значение переменной может измениться, но тип изменится всегда: typeof покажет number, а не 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.Подстрока.Подстрока... выходит на нужное число, преобразует из строки в число, изменяет его и обратно записывает в нужное место. Правило меняется «автоматом». Это просто и удобно, никакого участия сервера.