JavaScript - язык с динамической типизацией данных. Это значит, что в одну и ту же переменную можно записывать значения различных типов, при этом тип самой переменной будет меняться. Подобное поведение часто позволяет забыть о различном поведении переменных с разным типом, но помнить об этой особенности всё же необходимо. Покажем это на следующем примере.
console.log(sum(1, 2)); // 3 (тут всё ок) console.log(sum(1, "2")); // 12 (а тут не очень)
Как видно из примера функция sum некорректно себя ведёт, если в качестве хотя бы одного её аргумента передать не число. Дело в том, что при «сложении» числа со строкой, число преобразуется к строке и происходит его конкатенация (склеивание) со вторым операндом.
Чтобы избежать подобных осложнений, можно узнавать тип переменной во время выполнения скрипта и корректировать его поведение, или внимательно следить за типами переменных.
Оператор typeof
Этот унарный оператор принимает в качестве операнда абсолютно любое значение и возвращает его тип в строковой переменной.
В JavaScript существуют следующие типы данных:
| // 1.) object console.log (typeof { } ) ; // object var p = { x: 1 , y: 3 } ; console.log (typeof p) ; // object // 2.) function function sayHello() { console.log ("Hello!" ) ; } console.log (typeof sayHello) ; // function // 3.) string console.log (typeof "JavaScript" ) ; // string // 4.) number console.log (typeof 3.1415 ) ; // number // 5.) boolean console.log (typeof true ) ; // boolean // 6.) undefined var notExistsOne; console.log (typeof notExistsOne) ; // undefined console.log (typeof notExistsTwo) ; // undefined |
// 1.) object console.log(typeof {}); // object var p = {x: 1, y: 3}; console.log(typeof p); // object // 2.) function function sayHello() { console.log("Hello!"); } console.log(typeof sayHello); // function // 3.) string console.log(typeof "JavaScript"); // string // 4.) number console.log(typeof 3.1415); // number // 5.) boolean console.log(typeof true); // boolean // 6.) undefined var notExistsOne; console.log(typeof notExistsOne); // undefined console.log(typeof notExistsTwo); // undefined
Обратите внимание, что undefined это тоже тип данных, который состоит из одного значения.
Приведение типов
Под приведением типов в программировании понимают преобразование значения переменной одного типа в значение другого типа.
Часто такое преобразование происходит без контроля со стороны программиста. Это можно было видеть в примере с функцией sum
. Изменение типа происходит, если результат выполнения операции с переменной исходного типа неясен. Например, нельзя точно сказать, что получиться в результате сложения строки с числом, но операция сложения двух чисел очевидна, и в этом случае логично привести число к строке.
Преобразование строки к числу
Иногда сам программист может изменить тип переменной, применив к ней некоторые операции. Например, операции инкремента или декремента над строкой приведут её к числу.
var c = "not-a-number"; ++c; console.log(typeof c); // NaN
Стоит заметить, что не нужно прибегать к такому способу приведения строки к числу из-за его плохой читабельности и неочевидности. Для этой задачи в js существуют встроенные функции parseInt и parseFloat . В качестве первого аргумента они принимают строку, которую необходимо привести к числу, а в качестве второго необязательного – основание системы счисления, в которой записано число в строке, передаваемой в качестве первого аргумента. Если второй аргумент не указан, то будет считаться, что в строке записано число в десятичной системе счисления.
Функция parseInt используется для преобразования строки в целое число, а функция parseFloat для преобразования в дробное.
| var a = parseInt("10" ) ; console.log ([ "a = " , a, "; typeof a:" , typeof a] .join (" " ) ) ; // a = 10 ; typeof a: number var pi = parseInt("3.1415" ) ; console.log ("pi = " + pi) ; // pi = 3 pi = parseFloat("3.1415" ) ; console.log ("pi = " + pi) ; // pi = 3.1415 |
var a = parseInt("10"); console.log(["a = ", a, "; typeof a:", typeof a].join(" ")); // a = 10 ; typeof a: number var pi = parseInt("3.1415"); console.log("pi = " + pi); // pi = 3 pi = parseFloat("3.1415"); console.log("pi = " + pi); // pi = 3.1415
Обратите внимание, что в строке может находиться любое литеральное числовое значение, в том числе в шестнадцатеричном, восьмеричном или экспоненциальном виде.
| a = parseInt("010" ) ; console.log ("a = " + a) ; // a = 8 a = parseInt("0xAA" ) ; console.log ("a = " + a) ; // a = 170 a = parseFloat("1e-10" ) ; console.log ("a = " + a) ; // a = 1e-10 (1e-10 = 1 * 10 ^ -10 = 0.0000000001) |
a = parseInt("010"); console.log("a = " + a); // a = 8 a = parseInt("0xAA"); console.log("a = " + a); // a = 170 a = parseFloat("1e-10"); console.log("a = " + a); // a = 1e-10 (1e-10 = 1 * 10 ^ -10 = 0.0000000001)
В качестве второго параметра функций parseInt и parseFloat можно указать основание системы счисления.
| a = parseInt("10" , 8 ) ; console.log ("a = " + a) ; // a = 8 a = parseInt("010" , 10 ) ; console.log ("a = " + a) ; // a = 10 a = parseInt("ff" , 16 ) ; console.log ("a = " + a) ; // a = 255 |
a = parseInt("10", 8); console.log("a = " + a); // a = 8 a = parseInt("010", 10); console.log("a = " + a); // a = 10 a = parseInt("ff", 16); console.log("a = " + a); // a = 255
В случае если значение стоящие в строке, которую функции parseInt и parseFloat принимают в качестве первого параметра, не представляет собой числовой литерал, то результатом выполнения этих функций будет значение NaN .
| a = parseInt("not a number" ) ; console.log ("a = " + a) ; // a = NaN a = parseFloat("not a number" ) ; console.log ("a = " + a) ; // a = NaN |
a = parseInt("not a number"); console.log("a = " + a); // a = NaN a = parseFloat("not a number"); console.log("a = " + a); // a = NaN
Строковое преобразование
В JavaScript значение любого типа можно привести к строке. Выше уже говорилось о том, что при конкатенации строки с числом, число приводится к строке, и лишь затем происходит конкатенация. Так будет происходить со значением любого типа.
| var str = "Object: " + { } ; console.log (str) ; // Object: str = "Array: " + [ 1 , 2 , 3 ] ; console.log (str) ; // Array: 1,2,3 function sum(a, b) { return a + b; } str = "Function: " + sum; console.log (str) ; /* Function: function sum(a, b) { return a + b; } */ |
var str = "Object: " + {}; console.log(str); // Object: str = "Array: " + ; console.log(str); // Array: 1,2,3 function sum(a, b) { return a + b; } str = "Function: " + sum; console.log(str); /* Function: function sum(a, b) { return a + b; } */
Фактически при приведении объекта к строке неявным образом вызывается метод toString , который так же можно вызвать явно.
| var p = { x: 2 , y: 4 } , str; str = p.toString () ; console.log (typeof str) ; // string console.log (str) ; // str = [ 1 , 2 , 3 ] .toString () ; console.log (typeof str) ; // string console.log (str) ; // 1,2,3 |
var p = {x: 2, y: 4}, str; str = p.toString(); console.log(typeof str); // string console.log(str); // str = .toString(); console.log(typeof str); // string console.log(str); // 1,2,3
Числовое преобразование
Преобразование в число происходит при выполнении математических операций и при выполнении операции сравнения с приведением типа (==, !=), при этом значение false и пустой массив преобразуются в значение 0 типа number .
var a = true + true + true; // 1 + 1 + 1 console.log(a); // 3
Непустой массив, объект и функция при использовании в арифметических выражениях приводятся к строке.
| var arr = [ 1 , 2 , 3 ] ; console.log (arr + 4 ) ; // 1,2,34 function sum(a, b) { return a + b; } console.log (sum + 5 ) ; // function sum(a, b){return a + b;}5 |
var arr = ; console.log(arr + 4); // 1,2,34 function sum(a, b){return a + b;} console.log(sum + 5); // function sum(a, b){return a + b;}5
Как видно, неявное преобразование типов в js далеко не всегда очевидно, поэтому стоит его избегать, используя функции для явного приведения типов, такие как parseInt , parseFloat и toString .
На этом всё. Как всегда, успехов вам!
Нет разницы в том, какого типа переменная используется в выражении. Если выражение математическое, все его переменные автоматически будут интерпретированы как числовые. Если обрабатываются строки, то все «участники» выражения рассматриваются как строки. Однако задача преобразования на JavaScript "строку в число" существует в значительно более широком контексте.
Методы JavaScript преобразования строк в числа
Арсенал методов для преобразования строк в числа не велик, но достаточен во всех простых случаях. Здесь JavaScript (для начинающих особенно) - это путь от от простому к сложному на практичных примерах.
Вам будет интересно:
В примере описаны четыре разных строки. В первом блоке вывода тип каждой переменных функция typeof определяется как string. Затем каждая строка очень просто преобразуется в число. Во втором блоке вывода видны изменения в переменных после преобразования, их тип стал числом. Пример преобразования JavaScript parseFloat особенно показателен: было "12e+3", стало "12000".
Изменения при преобразования строки в число могут быть существенны! Но имеют значение только первые символы: они должны быть цифровыми. Если нет ни одного цифрового символа, результат будет NaN.
Обратное преобразование строки, «ставшей» числом, не всегда такая же строка. Этот момент можно использовать для проверки корректности ввода численной информации.
| |В JavaScript данные делятся на типы, что помогает группировать данные и определить, какие значения можно присвоить и какие операции можно выполнить.
Хотя из-за приведения типов JavaScript преобразовывает многие значения автоматически, для достижения ожидаемых результатов лучше всего преобразовывать типы данных вручную.
Этот мануал научит преобразовать примитивные типы данных JavaScript, включая числа, строки и логические элементы.
Неявное преобразование
Язык программирования JavaScript очень хорошо справляется с обработкой неожиданных значений. JavaScript не отклоняет неожиданные значения, а пытается преобразовать. Это неявное преобразование также называется приведением типов (type coercion).
Отдельные методы автоматически преобразовывают значения, чтобы использовать их. Метод alert() принимает строку в качестве своего параметра, а другие типы автоматически преобразует в строки. Таким образом, можно передать этому методу числовое значение:
Если запустить эту строку, браузер вернет всплывающее окно со значением 8.5, которое будет уже преобразовано в строку.
Используя строки, состоящие из чисел, вместе с математическими операторами, вы обнаружите, что JavaScript может обрабатывать значения, неявно преобразовывая строки в числа:
// Вычитание
"15" - "10";
5
// Модуль
"15" % "10";
5
Но не все операторы работают предсказуемо. Особенно это касается оператора +: он выполняет сложение чисел и конкатенацию строк.
// При работе со строками + выполняет конкатенацию
"2" + "3";
"23"
Поскольку оператор + имеет много предназначений, в этом примере он воспринимает значения 2 и 3 как строковые, несмотря на то, что они выражаются числовыми строками. Потому он объединяет строки «2» и «3» и получает 23, а не складывает 2 и 3 и получает 5.
Подобная неоднозначность имеет место в коде и иногда вызывает неожиданные результаты, потому лучше по возможности явно преобразовывать типы данных. Это поможет в поддержке кода и обработке ошибок.
Преобразование значений в строки
Чтобы явно преобразовать значение в строку, вызовите метод String() или n.toString().
Попробуйте преобразовать логическое значение true в строку с помощью String().
Это вернет строковый литерал «true».
Также можно попробовать передать функции число:
Она вернет строковый литерал:
Теперь попробуйте использовать String() с переменной. Присвойте числовое значение переменной odyssey и используйте оператор typeof, чтобы проверить тип.
let odyssey = 2001;
console.log(typeof odyssey);
number
На данный момент переменной odyssey присвоено числовое значение 2001. Оператор typeof подтверждает, что значение является числом.
Теперь присвойте переменной odyssey ее эквивалент внутри функции String(), а затем используйте typeof, чтобы убедиться, что значение переменной успешно преобразовано из числа в строку.
odyssey = String(odyssey); // "2001"
console.log(typeof odyssey);
string
Как видите, теперь переменная odyssey содержит строку.
Функция n.toString() работает аналогичным образом. Замените n переменной.
let blows = 400;
blows.toString();
Переменная blows будет содержать строку.
Вместо переменной можно поместить значение в круглых скобках:
(1776).toString(); // returns "1776"
(false).toString(); // returns "false"
(100 + 200).toString(); // returns "300"
String() и n.toString() явно преобразовывают логические и числовые значения в строки.
Преобразование значений в числа
Метод Number() может преобразовать значение в число. Часто возникает необходимость преобразовать строки, состоящие из чисел, но иногда преобразовывать нужно и логические значения.
Для примера передайте методу Number() такую строку:
Строка будет преобразована в число и больше не будет заключена в кавычки.
Также можно присвоить строку переменной и затем преобразовать ее.
let dalmatians = "101";
Number(dalmatians);
101
Строковый литерал «101» был преобразован в число 101.
Строки из пробелов или пустые строки будут преобразованы в число 0.
Number(" "); // returns 0
Number(""); // returns 0
Имейте в виду, что строки, которыйе не состоят из чисел, преобразуются в NaN, что означает Not a Number. Это относится и к числам, разделенным пробелами.
Number("twelve"); // returns NaN
Number("20,000"); // returns NaN
Number("2 3"); // returns NaN
Number("11-11-11"); // returns NaN
В логических данных значение false будет равно 0, а true будет равно 1.
Преобразование значений в логические значения
Чтобы преобразовать числа или строки в логические значения, используется метод Boolean(). К примеру, это помогает определить, вводит пользователь данные в текстовое поле или нет.
Любое значение, которое интерпретируется как пустое, например, число 0, пустая строка, значения undefined, NaN или null преобразуются в значение false.
Boolean(0); // returns false
Boolean(""); // returns false
Boolean(undefined); // returns false
Boolean(NaN); // returns false
Boolean(null); // returns false
Другие значения, включая строковые литералы, состоящие из пробелов, будут преобразованы в true.
Boolean(2000); // returns true
Boolean(" "); // returns true
Boolean("Maniacs"); // returns true
Обратите внимание: строковый литерал «0» преобразовывается в true, поскольку это не пустое значение:
Boolean("0"); // returns true
Преобразование чисел и строк в логические значения позволяет оценивать данные в двоичной системе и может использоваться для управления потоком в программах.
Заключение
Теперь вы знаете, как JavaScript преобразовывает типы данных. часто из-за приведения типов данные преобразовываются неявно, что может стать причиной возникновения неожиданных значений. Рекомендуется явно преобразовывать типы данных, чтобы гарантировать корректную работу программ.
В JavaScript существуют 2 встроенные функции для преобразования строк в числа: parseFloat() и parseInt() .
parseFloat() принимает аргументом строку, которую необходимо привести к численному типу, и возвращает число типа float. Число должно содержаться в начале строки. Если после числа в строке идут ещё какие-то символы, то они отсекаются. Дробная часть числа должна быть записана через точку (запятая не воспринимается как разделитель). В случае, если parseFloat() не может преобразовать строку, то она возвращает NaN.
Также функция может обработать «число n, умноженное на 10 в степени x», которое в программировании принято записывать через букву E, например: 0.5E6 или 0.5E+6. Степень может быть также отрицательная: 0.5E-6, что равно 0.5*10^-6 или 0.5/1000000.
ParseFloat(""3.78kg"") // 3.78 parseFloat(""kg33"") // NaN parseFloat(""0004.111"") // 4.111 parseFloat(""0x66"") // 0 parseFloat("".5"") // 0.5 parseFloat(""-.5"") // -0.5 parseFloat(""0.5e6"") // 500000 parseFloat(""0.03E+2"") // 3 parseFloat(""3E-4"") // 0.0003 parseFloat(""-3E-4"") // -0.0003
Функция parseInt(string[, radix]) принимает в качестве первого аргумента строку, анализирует её и возвращает целое число (тип integer). Функция пытается анализировать систему счисления, в которой записано число в исходной строке (например, десятичная, восьмеричная или шестнадцатеричная — но не только эти). Также систему счисления можно указать явно, передав её вторым параметром radix. Параметр radix может принимать любое число от 2 до 36 (в системах выше 10-й используются буквы английского алфавита, от A до Z).
Числа типа 1.5e6 функция не обрабатывает так, как parseFloat() .
Ознакомьтесь, пожалуйста, с примерами ниже, чтобы не наколоться на подводные камни, запрятаны в работе функции parseInt() .
ParseInt(""25"") // 25 parseInt(""-25"") // -25 parseInt(""45.12"") // 45 parseInt(""045"",10) // 45 parseInt(""70"",8) // 56 (70 в восьмеричной системе это 56 в десятичной) parseInt(""070"") // 56 (ВАЖНО!!! нуль вначале заставит функцию проанализировать строку как восьмеричное число) parseInt(""88"",8) // NaN (в восьмеричной системе нет цифры 8) parseInt(""a1"") // NaN (ВАЖНО!!! Функция по умолчанию не воспринимает число как 16-ричное, если не дописать в начале строки 0x) parseInt(""a1"",16) // 161 (здесь явно указана система счисления) parseInt(""0xa1"") // 161 (правильный формат 16-ричного числа, можно не указывать второй параметр) parseInt(""099"") // 0 (ВАЖНО!!! Число воспринимается как восьмеричное, но содержащее недопустимые символы) parseInt(""0.5e6"") // 0 (ВАЖНО!!! не работает как parseFloat) parseInt(""ZZ"",36) // 1295 parseInt(""-FF"") // NaN parseInt(""-FF"",16) // -255
Если Вы обрабатываете данные из текстового поля, которые вводит пользователь, всегда используйте parseInt() вместе со вторым параметром radix, это обезопасит Ваш код от неожиданных результатов.
