Преобразования типов данных. Преобразование типов 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 в десятичной.

Теперь напишем небольшую программу, в которой используем операции с переменными:

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. Один из способов - проанализировать его, а другой способ - изменить его тип на число. Все трюки в других ответах (например, унарный плюс) подразумевают неявное принуждение типа строки к числу. Вы также можете сделать то же самое с помощью функции 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, если не указано значение radix. parseInt понимает радики до основания 36, и в этом случае как верхние, так и строчные буквы обрабатываются как эквивалентные.

Изменение типа строки на число

Все другие трюки, упомянутые выше, которые не используют parseInt, подразумевают неявное принуждение строки к числу. Я предпочитаю делать это явно,

Var cast = Number("97");

Это отличается от методов анализа (хотя он все еще игнорирует пробелы). Он более строгий: если он не понимает всю строку, чем возвращает NaN , поэтому вы не можете использовать ее для строк типа 97px . Поскольку вам требуется примитивное число, а не объект обертки Number, убедитесь, что вы не ставите new перед функцией Number.

Очевидно, что преобразование в число дает вам значение, которое может быть float, а не целое число, поэтому, если вы хотите целое число, вам нужно его изменить. Есть несколько способов сделать это:

Var rounded = Math.floor(Number("97.654")); // other options are 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

Любой побитовый оператор (здесь я поразрядный или, но вы также можете сделать двойное отрицание, как в более раннем ответе или бит-сдвиге) преобразует значение в 32-битное целое число, и большинство из них преобразуется в подписанный целое число. Обратите внимание, что этот не будет нужен для больших целых чисел . Если целое число не может быть представлено в 32 битах, оно будет завершено.

~~"3000000000.654" === -1294967296 // This is the same as Number("3000000000.654")|0 "3000000000.654" >>> 0 === 3000000000 // unsigned right shift gives you an extra bit "300000000000.654" >>> 0 === 3647256576 // but still fails with larger numbers

Чтобы правильно работать с большими числами, вы должны использовать методы округления

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

Имейте в виду, что все эти методы понимают экспоненциальную нотацию, поэтому 2e2 является 200 , а не NaN. Кроме того, Number понимает "Бесконечность", в то время как методы анализа не делают.

Пользовательский

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

Всегда проверяйте, что вывод Number или один из методов анализа - это число, которое вы ожидаете. Вы почти наверняка захотите использовать isNaN , чтобы убедиться, что число не NaN (обычно это единственный способ узнать, что синтаксический анализ не удалось).

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

Методы 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.Подстрока.Подстрока... выходит на нужное число, преобразует из строки в число, изменяет его и обратно записывает в нужное место. Правило меняется «автоматом». Это просто и удобно, никакого участия сервера.

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали про типы данных в 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 .

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

Тип значения	Контекст, в котором используется значение
	Строковый	Числовой	Логический	Объектный
Неопределенное значение	‘undefined’	NaN	false	Error
null	‘null’	0	false	Error
Пустая строка	Пустая строка	0	false	Объект String
Непустая строка	Непустая строка	Числовое значение строки или NaN	true	Объект String
0	’0′	0	false	Объект Number
NaN	‘NaN’	NaN	false	Объект Number
Infinity	‘Infinity’	Infinity	true	Объект Number
-Infinity	‘-Infinity’	-Infinity	true	Объект Number
Любое другое число	Строковое представление числа	Само число	true	Объект Number
true	‘true’	1	true	Объект Boolean
false	‘false’	0	false	Объект Boolean
Объект, функция	toString()	valueOf(), toString() или NaN	true	Объект, функция

Преобразования типов данных

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

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 . Это то, над чем совершаются действия.

JavaScript предоставляет несколько встроенных типов данных. В дополнение к ним эта статья рассматривает виртуальные типы в jQuery такие как селекторы, расширенные псевдотипы как события, а также все виды функций.

Лучше если вы попробуете большинство примеров, изложенных ниже. Это можно легко сделать, просто скопировав эти примеры в консоль Firebug — расширения браузера Firefox.

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

Var x = "" if (x) console.log("x defaulted to true") else console.log("x defaulted to false")

В этом случае напечатается "x приравнивается к false".

Для уменьшения объема примеров используется оператор отрицания, чтобы показать булевский контекст:

X // true

Типы данных в jQuery

Строки

• Встроенные методы для строк
• Свойство length
• Булевский контекст

Числа

• Булевский контекст
• Parsing Numbers
• Numbers to Strings
• NaN and Infinity
• Integer
• Float

Булевский тип

Объекты

• Dot Notation
• Array Notation
• Iteration
• Boolean default
• Prototype

Options

Массивы

• Iteration
• Boolean Default
• Array Notation

Функции

• Аргументы
• Context, Call and Apply
• Область видимости
• Closures
• Proxy Pattern

Callback-функции

Селекторы

События

Элементы

jQuery-тип

Тип XMLHttpRequest

Строки "Это строка JavaScript!" "И это тоже строка!"

Строка в JavaScript — это неизменяемый объект, который содержит ни одного, один или несколько символов.

Типом строк является "string". Узнать тип строки можно так:

Typeof "some string"; // "string"

Использование кавычек в строках

Строка может быть определена с помощью одинарных или двойных кавычек. Вы можете свободно использовать одинарные кавычки внутри строки, заключенной в двойные кавычки и наоборот. Чтобы использовать двойные кавычки внутри строк, заключенных в двойные кавычки, их нужно экранировать с помощью обратного слеша \ . Это относится и к одинарным кавычкам.

"You make "me" sad." "Holy "cranking" moses!" "Главная" "Главная"

Встроенные методы для строк

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

"hello".charAt(0) // "h" - получение символа в нужной позиции строки "hello".toUpperCase() // "HELLO" - преобразование строки в верхний регистр "Hello".toLowerCase() // "hello" - преобразование строки в нижний регистр "hello".replace(/e|o/g, "x") // "hxllx" - замена части строки на подстроку по шаблону регулярного выражения "1,2,3".split(",") // ["1", "2", "3"] - разбиение строки на массив по определенной подстроке

Свойство length

Строки имеют свойство length, которое определяет длину строки.

"Hello".length // 5 "".length // 0

Булевский контекст

Пустая строка приравнивается к значению false:

!"" // true !"hello" // false !"true" // false !new Boolean(false) // false

Числа 12 3.543

Числа в JavaScript имеют 64-битный формат двойной точности по стандарту IEEE 754. Они также являются неизменяемыми. Для работы с числами доступны все операторы, такие же как в языке C (+, -, *, /, %, =, +=, -=, *=, /=, ++, --).

Типом для чисел является "number". Проверить тип чисел можно так:

Typeof 12 // "number" typeof 3.543 // "number"

Булевский контекст

Если число равно нулю, то оно приравнивается к false:

0 // true !1 // false !-1 // false

Из-за того, что числа реализованы в формате с двойной точностью, результат следующего примера не является ошибочным:

0.1 + 0.2 // 0.30000000000000004

Объект Math

JavaScript предоставляет функции для работы с числами в объекте Math:

Math.PI // 3.141592653589793 Math.cos(Math.PI) // -1

Преобразование в числа

Функции parseInt и parseFloat преобразуют строки в числа. И та, и другая функция выполняет неявное преобразование, если не указана система счисления:

ParseInt("123") = 123 (неявное преобразование десятичного числа) parseInt("010") = 8 (невяное преобразование восьмеричного числа) parseInt("0xCAFE") = 51966 (неявное преобразование шестнадцатеричного числа) parseInt("010", 10) = 10 (явное преобразование десятичного числа с указанием системы счисления 10) parseInt("11", 2) = 3 (явное преобразование двоичного числа) parseFloat("10.10") = 10.1

Преобразование чисел в строки

Если добавлять числа к строке с помощью операции "+", то результатом всегда будет строка. Чтобы произвести вычисления и только потом добавить число к строке, не забудьте заключить вычисления в круглые скобки:

"" + 1 + 2; // "12" "" + (1 + 2); // "3" "" + 0.0000001; // "1e-7" parseInt(0.0000001); // 1 (обратите внимание!)

Вы также можете использовать JavaScript-класс String, который преобразует переданное значение в строку:

String(1) + String(2); // "12" String(1 + 2); // "3"

Типы NaN и Infinity

Преобразование значений, которые не являются числами, приводит к результату NaN. Функция isNaN определяет, равно ли переданное в неё значение NaN:

ParseInt("hello", 10) // NaN isNaN(parseInt("hello", 10)) // true

Деление на ноль дает в качестве результата бесконечность (Infinity):

1 / 0 // Infinity

И значение NaN и Infinity имеют тип "number":

Typeof NaN // "number" typeof Infinity // "number"

Обратите внимание, что сравнение значений NaN происходит нестандартным способом:

NaN == NaN // false (!)

Infinity == Infinity // true

Тип Integer

Integer — целочисленный тип.

Тип Float

Float — тип чисел с плавающей точкой.

Булевский тип (Boolean)

Булевский тип в JavaScript может принимать значение true или false:

If (true) console.log("always!") if (false) console.log("never!")

Например, булевский тип выглядит следующим образом при задании настроек при подключении плагинов jQuery:

$("...").somePlugin({ hideOnStartup: true, onlyOnce: false });

Объекты

Всё в JavaScript является объектом. Самый простой способ создать объект:

Var x = {}; var y = { name: "Pete", age: 15 };

Типом для объектов является "object":

Typeof {} // "object"

Свойства объекта

Вы можете изменять и получать свойства объекта, используя точечную нотацию:

Y.name // "Pete" y.age // 15 x.name = y.name + " Pan" // "Pete Pan" x.age = y.age + 1 // 16

Вы также можете использовать объект в качестве массива:

Var operations = { increase: "++", decrease: "--" } var operation = "increase"; operations // "++"; operations["multiply"] = "*"; // "*"

Итерации у объектов

Итерирование над объектами осуществляется очень легко с помощью оператора цикла for-in:

Var obj = { name: "Pete", age: 15 }; for(key in obj) { alert("key is "++", value is "+obj); }

jQuery предоставляет функцию

для итерираций по свойствам объектов или элементам массивов:

JQuery.each(obj, function(key, value) { console.log("key", key, "value", value); });

Булевский контекст

Объект, независимо от того, имеет ли он свойства или нет, всегда имеет значение true:

!{} // false

Прототипы

Все объекты имеют свойство prototype . Всякий раз, когда интерпретатор ищет какое-либо свойства у объекта, он также проверяет его прототип. В jQuery этот механизм широко используется для добавления методов к экземплярам объектов jQuery.

Var form = $("#myform"); form.clearForm; // undefined form.fn.clearForm = function() { return this.find(":input").each(function() { this.value = ""; }).end(); }; form.clearForm() // может быть применено ко всем экземплярам объектов jQuery, так как новый метод был добавлен к прототипу