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

JavaScript – нетипизированный язык (точнее, слабо типизированный или динамически типизированный). Это значит, что мы не должны задавать тип переменной при ее объявлении. Нетипизированность придает JavaScript гибкость и простоту, предпочтительную для языка сценариев (хотя эти особенности достаются ценой отсутствия строгости, важной для длинных и более сложных программ, которые часто пишутся на более строгих языках, таких как C или Java). Важной чертой гибкой работы с типами данных в JavaScript являются выполняемые интерпретатором автоматические преобразования данных. Например, если методу document.write() передается число, JavaScript автоматически преобразует его в эквивалентное строковое представление. Аналогично, проверяя строковое значение в условии инструкции if, JavaScript автоматически преобразует эту строку в логическое значение – в false, если строка пуста, и в true в противном случае.

Основное правило состоит в том, что когда значение одного тип встречается в контексте, где требуется значение какого-то другого типа, JavaScript автоматически пытается преобразовать значение требуемым образом. Поэтому, например, в контексте, предполагающем логическую переменную, число преобразуется в логическое значение.

Объект в строковом контексте преобразуется в строку. Cтроку в числовом контексте JavaScript пытается преобразовать в число.

Преобразования «объект-элементарный тип»
Например, в логическом контексте все приведенные ниже объекты преобразуются в true:

New Boolean(false) // Внутреннее значение равно false, но объект
// преобразуется в true
new Number(0)
new String("")
new Array()

Преобразование объектов в числа начинается с вызова метода valueOf() этого объекта. Большинство объектов наследуют стандартный метод valueOf() класса Object, который просто возвращает сам объект. Так как стандартный метод valueOf() не возвращает элементарного значения, JavaScript затем пытается преобразовать объект в число путем вызова его метода toString() и преобразования полученной строки в число. Для массивов это приводит к интересным результатам. Вспомните, что метод toString()преобразует элементы массива в строки, а затем возвращает результат конкатенации этих строк с запятыми между ними. Следовательно, массив без элементов преобразуется в пустую строку, которая преобразуется в 0! Кроме того, если массив состоит из одного элемента, числа n, то массив преобразуется в строковое представление этого числа, которое затем преобразуется обратно в само число n.

Если массив содержит более одного элемента, или если его единственный элемент не является числом, массив преобразуется в NaN. В JavaScript контекст не всегда определяется однозначно! Оператор + и операторы сравнения (и >=) работают как с числами, так и со строками, поэтому когда объект используется с одним из этих операторов, неясно, во что он должен преобразовываться – в число или в строку. В большинстве случаев JavaScript сначала пытается преобразовать объект путем вызова метода valueOf(). Если этот метод возвращает элементарное значение (обычно число), используется это значение. Однако часто valueOf() просто возвращает объект без преобразования; в этом случае JavaScript затем пытается преобразовать объект в строку с помощью вызова метода toString(). Имеется только одно исключение из этого правила преобразования: когда объект Date используется с оператором +, преобразование выполняется с помощью метода toString(). Существование этого исключения обусловлено тем, что Date имеет как метод toString(), так и метод valueOf(). При использовании Date с оператором + почти всегда требуется выполнить строковую конкатенацию. Но когда Date участвует в операциях сравнения, почти всегда требуется выполнить числовое сравнение, для того чтобы определить, какой из двух моментов времени предшествовал другому.

Большинство объектов либо не имеют метода valueOf(), либо этот метод не возвращает полезных результатов.

Когда к объекту применяется оператор +, обычно имеет место строковая конкатенация, а не сложение. Когда к объекту применяется оператор сравнения, обычно выполняется строковое сравнение, а не числовое.

Объект, определяющий специальный метод valueOf(), может вести себя по-другому. Определив метод valueOf(), возвращающий число, можно применять к своему объекту арифметические и другие операторы, но добавление своего объекта к строке будет выполняться не так, как ожидается: метод toString() больше не вызывается и в конкатенации участвует строковое представление числа, возвращаемого методом valueOf().

И наконец, помните, что метод valueOf() не называется toNumber(), строго говоря, его задача состоит в преобразовании объекта в осмысленное элементарное значение, поэтому некоторые объекты могут иметь методы valueOf(), возвращающие строки.

Явные преобразования типов
Java-Script не определяет оператор преобразования, как в языках C, C++ и Java, но предоставляет сходные средства. В JavaScript 1.1 (и в стандарте ECMA-262) Number(), Boolean(), String() и Object() могут вызываться не только как конструкторы, но и как функции. Будучи вызваны таким образом, эти функции пытаются преобразовать свои
аргументы в соответствующий тип. Например, вы можете преобразовать любое значение x в строку с помощью String(x) и любое значение y в объект с помощью Object(y).

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

Var x_as_string = x + "";

Чтобы преобразовать значение в число, вычтите из него ноль:

Var x_as_number = x - 0;

Принудительно преобразовать какое-либо значение в логическое можно с помощью оператора!, примененного дважды:

Var x_as_boolean = !!x;

Из-за склонности JavaScript к автоматическому преобразованию данных в необходимый в данный момент тип, явные преобразования обычно не требуются. Однако изредка они оказываются полезными, и могут применяться для того, чтобы сделать программу понятнее и точнее.

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

Var string_value = String(number); // Использование конструктора String()
// в качестве функции
var string_value = number + ""; // Конкатенация с пустой строкой

Еще одну возможность предоставляет метод toString():

String_value = number.toString();

Метод toString() объекта Number (элементарные числовые значения преобразуются в объекты Number, поэтому вы можете вызвать этот метод) принимает необязательный аргумент, задающий основание системы счисления, в которую будет выполнено преобразование. Если аргумент не указан, преобразование выполняется по основанию 10. Но можно преобразовывать числа и с другими основаниями (между 2 и 36). Например:

Var n = 17;
binary_string = n.toString(2); // Равно "10001"
octal_string = "0" + n.toString(8); // Равно "021"
hex_string = "0x" + n.toString(16); // Равно "0x11"

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

ECMAScript v3 и JavaScript 1.5 обходят это препятствие, добавляя в класс Number три новых метода преобразования числа в строку. Метод toFixed() преобразует число в строку и выводит указанное количество цифр после десятичной точки, не используя экспоненциальной нотации. Метод toExponential() преобразует число в строку, записывая его в экспоненциальной нотации с одной цифрой перед десятичной точкой и указанным количеством цифр после нее. Метод toPrecision() выводит число с помощью указанного количества значащих цифр. Если такого количества значащих цифр недостаточно для вывода целой части числа, оно записывается в экспоненциальной нотации. Обратите внимание, что все три метода корректно округляютфинальные цифры результирующей строки. Посмотрите на следующие примеры:

Var n = 123456.789;
n.toFixed(0); // "123457"
n.toFixed(2); // "123456.79"
n.toExponential(1); // "1.2e+5"
n.toExponential(3); // "1.235e+5"
n.toPrecision(4); // "1.235e+5"
n.toPrecision(7); // "123456.8"

Преобразование строк в числа
Мы видели, что в числовом контексте строки, представляющие числа, автоматически преобразуются в реальные числа. Как было показано выше, это преобразование можно сделать явным:

Var number = Number(string_value);
var number = string_value - 0;

Такое преобразование неудобно из-за своей излишней строгости. Оно работает только с десятичными числами, и хотя преобразование допускает ведущие и замыкающие пробелы, оно не допускает наличия в строке каких-либо непробельных символов после числа. Для более гибких преобразований можно применять функции parseInt() и parseFloat(). Эти функции преобразуют и возвращают любое число, присутствующее в начале строки, игнорируя любые замыкающие нечисловые символы. Функция parseInt() обрабатывает только целые, а parseFloat() – как целые числа, так и числа с плавающей точкой. Если строка начинается с «0x» или «0X», parseInt() интерпретирует ее как шестнадцатеричное число. Например:

ParseInt("3 blind mice"); // Возвращает 3
parseFloat("3.14 meters"); // Возвращает 3.14
parseInt("12.34"); // Возвращает 12
parseInt("0xFF"); // Возвращает 255

Функция parseInt() может иметь второй аргумент, указывающий основание системы счисления обрабатываемого числа. Допустимые значения – от 2 до 36. Например:

ParseInt("11", 2); // Возвращает 3 (1*2 + 1)
parseInt("ff", 16); // Возвращает 255 (15*16 + 15)
parseInt("zz", 36); // Возвращает 1295 (35*36 + 35)
parseInt("077", 8); // Возвращает 63 (7*8 + 7)
parseInt("077", 10); // Возвращает 77 (7*10 + 7)

Если parseInt() и parseFloat() не могут преобразовать указанную строку в число, они возвращают NaN.

ParseInt("eleven"); // Возвращает NaN
parseFloat("$72.47"); // Возвращает 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. Один из способов - проанализировать его, а другой способ - изменить его тип на число. Все трюки в других ответах (например, унарный плюс) подразумевают неявное принуждение типа строки к числу. Вы также можете сделать то же самое с помощью функции 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 существуют 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 существуют 2 встроенные функции для преобразования строк в числа: parseFloat() и parseInt() .

Числа типа 1.5e6 функция не обрабатывает так, как parseFloat() .