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

Поскольку в JavaScript нет строгой типизации данных, как в С++, например, или в ActionScript, который работает во Flash на основе той же спецификации ECMAScript, что и JavaScript. Поэтому в JS любая переменная в любой момент времени может получить новое значение, которое может отличаться не только по сути, но и по типу данных.

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

Автоматическое преобразование типов данных в JavaScript

JavaScript может приводить примитивные значения к различным типам данных в зависимости от контекста.

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

2 == '2'; // true

1	2 == '2'; // true

Тогда строка '2' будет преобразована в число, а 2 действительно равно 2, и это истина (true).

При использовании строгого равенства мы, напротив, получим false, т.к. JS оценивает в этом случае и тип данных, а не только значение:

2 === '2'; // false

1	2 === '2'; // false

Используем операцию сложения числа со строкой (часто бывает при вводе данных в полях формы или в методе prompt()):

16 + '1'

16 + '1'

В этом случае число 16 будет преобразовано в строку "16", и данная запись вернет "161", а не предполагаемые 17. JavaScript здесь просто выполняет объединение строк. Такая операция называется конкатенация от англ. concatenate - объединять.

Рассмотрим, что будет при вычитании из числа строки:

3 — '3'; //0

1	3 — '3'; //0

Операция вернет 0, потому что произойдет автоматическое преобразование строки в число.

Если же мы попытаемся вычесть из числа строку из символов:

12 — 'b'; // NaN - Not a number

1	12 — 'b'; // NaN - Not a number

то получим в результате NaN, поскольку происходит вычитание строки с нечисловым контекстом из числа, что не может быть выполнено корректно и переведено в число.

Если используются логические операции и выражения, то переменные или их значения вычисляются до их истинных или ложных значений. Значения, возвращающие false, включают в себя: 0, null, undefined, '' (пустая строка), false, NaN. Все остальные значения возвращают true.

Допустим, нужно сделать выбор из следующих значений:

0 || undefined || null || 1 //1

1	0 \|\| undefined \|\| null \|\| 1 //1

Результатом этой записи будет 1. Интерпретатор JavaScript определит все значения, которые возвращают false, и в итоге вернет единственное истинное значение — 1. Если последовательность будет иной, вернется первое значение, соответствующее истине, т.е. true:

0 || 3 || 1 || undefined || null  //3

1	0 \|\| 3 \|\| 1 \|\| undefined \|\| null //3

Чтобы убедиться, что в результате неких операций у вас в коде будут необходимые типы, нужно привести каждое значение к нужному вам типу явно или проверить тип оператором typeof.

Для явного преобразования типов данных можно использовать ряд способов, которые мы рассмотрим ниже.

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

Чаще всего приходится преобразовывать строки в числа. Происходит это потому, что все, что вводит пользователь в формах, например, или в диалоговом окне prompt() - это строка по типу данных. Но значение этой строки может быть числовым. И операции, которые производятся со значением переменной, будут относится к арифметическим:

сложение
вычитание
умножение
деление
остаток от деления

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

Рассмотрим пример: в поля формы нужно ввести числа и получить результат при клике на кнопку "Сумма".

Сумма чисел

Должно быть, вы заметили, что числовые значения из 2-х полей соединились и , например, при сложении чисел 12 и 65 получилось 1265, а не 77, как ожидалось. Все это произошло потому, что оператор сложения находился между строками "12" и "65". Он и соединил эти 2 значения. И получилось "1265" - вполне ожидаемое с точки зрения JavaScript. Самое интересное, что, если мы рассмотрим другие операции, то арифметические действия с ними будут происходить в JavaScript по правилам математики.

Действия над числами

Чтобы строки, которые "выглядят", как числа, преобразовать в числовой тип, существует несколько возможностей. Проверять их будем на примере суммы 2-х чисел и с помощью оператора typeof.

Способ 1. Метод Number()

var someNumber1 = "53",
    someNumber2 = "14";
someNumber1  = Number(someNumber1);
someNumber2  = Number(someNumber2);
alert( someNumber1   + someNumber2 + "\n\ntypeof someNumber1 -  "
 +typeof(someNumber1) +  "\ntypeof someNumber2 -  "
 +typeof(someNumber2) );

var someNumber1 = "53",

someNumber2 = "14";

someNumber1 = Number(someNumber1);

someNumber2 = Number(someNumber2);

alert( someNumber1 + someNumber2 + "\n\ntypeof someNumber1 - "

+typeof(someNumber1) + "\ntypeof someNumber2 - "

+typeof(someNumber2) );

Способ 2. Методы parseInt() и parseFloat()

Метод parseInt() не только преобразует строку в число, но еще и отделяет целую часть от дробной. Метод parseFloat() преобразует строку в число с плавающей точкой, или дробной частью. Кроме того, эти методы отделяют часть строки от числа, если строка начинается с цифр. Если строка начинается с букв, то оба метода возвращают NaN (Not a Number).

var ch1 ="123.67", ch2="768.24abc", strNum = "abc564.29";
alert(parseInt(ch1)); //выведет 123
alert(parseInt(ch2)); //выведет 768
alert(parseInt(strNum)); //выведет NaN

//выведет сh1 = 123.67, ch2 = 768.24
alert("ch1 = "+parseFloat(ch1)+", ch2 = "+parseFloat(ch2));
alert("strNum = "+parseFloat()); //выведет strNum = NaN

var ch1 ="123.67", ch2="768.24abc", strNum = "abc564.29";

alert(parseInt(ch1)); //выведет 123

alert(parseInt(ch2)); //выведет 768

alert(parseInt(strNum)); //выведет NaN

//выведет сh1 = 123.67, ch2 = 768.24

alert("ch1 = "+parseFloat(ch1)+", ch2 = "+parseFloat(ch2));

alert("strNum = "+parseFloat()); //выведет strNum = NaN

Способ 3. Унарный плюс

Очень простой способ преобразовать строку в число. Нужно просто добавить знак "+" перед переменной строкового типа, которая содержит в себе цифры (но не буквы!).

var myNum = "10";
myNum = +myNum;
alert(typeof myNum);

var myNum = "10";

myNum = +myNum;

alert(typeof myNum);

Способ 4. Умножение/деление на единицу

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

let  someNum = prompt("Введите число");
console.log(typeof someNum, typeof( 1*someNum ), typeof ( someNum/1 )); //string number number

1 2	let someNum = prompt("Введите число"); console.log(typeof someNum, typeof( 1*someNum ), typeof ( someNum/1 )); //string number number

Как видно, во втором и третьем случае мы уже видим числовой, а не строковый тип данных.

Как правило, умножать на 1 используют чаще, т.к. можно сразу записать такое выражение:

let  nextNum = 1*prompt("Введите число");
console.log(typeof nextNum, nextNum); // тип number

1 2	let nextNum = 1*prompt("Введите число"); console.log(typeof nextNum, nextNum); // тип number

Тип нашей переменной nextNum будет number, а вот значением может быть и NaN (Not a Number) в зависимости от того, ввел ли пользователь число или другие символы.

Способ 5. Побитовые операторы.

Двойная тильда ~~. Побитовое НЕ

С помощью этого способа можно не только преобразовать строку в число, но и отделить целую часть от дробной. Т.е. он работает так же, как и parseInt(). Но, в отличие от этого метода, строку, которая начинается с числа, а заканчивается буквами двойная тильда преобразовывает в 0 (ноль), а не отсекает строковую часть, как parseInt(). Можно сказать, что это аналог округления в меньшую сторону, или замена методу Math.floor().

var myNum = "385.984",
    myNumStr = "129.34ssd";
alert("Тип переменной в начале: " + typeof myNum + "\nТип переменной после преобразования: " + typeof(~~myNum));
alert("myNum = "+~~myNum);
alert("myNumStr = "+~~myNumStr);

var myNum = "385.984",

myNumStr = "129.34ssd";

alert("Тип переменной в начале: " + typeof myNum + "\nТип переменной после преобразования: " + typeof(~~myNum));

alert("myNum = "+~~myNum);

alert("myNumStr = "+~~myNumStr);

Побитовое ИЛИ |

Так же, как и двойная тильда может использоваться для округления числа в меньшую сторону, или, что то же самое, отделения целой части от дробной. Превращает строку в число. Если в строке, кроме цифр, встречаются буквы, преобразует значение переменной в 0 (ноль).

var len1 = "120.5mm", len2 = "40.7";
alert( typeof len1 + "\nlen1 = " + (len1|0) + typeof ( len1|0) );
alert( typeof len2 + "\nlen2 = " + (len2|0) + typeof ( len2|0) );

var len1 = "120.5mm", len2 = "40.7";

alert( typeof len1 + "\nlen1 = " + (len1|0) + typeof ( len1|0) );

alert( typeof len2 + "\nlen2 = " + (len2|0) + typeof ( len2|0) );

Преобразование любого значения в логическое (Boolean)

1. Классический способ - использовать Boolean():

console.log(Boolean(12)); //true
console.log(Boolean(0));  //false

1 2	console.log(Boolean(12)); //true console.log(Boolean(0)); //false

2. Простой способ - все, что вам нужно сделать для преобразования любого значения в true или false - это использовать двойной восклицательный знак (!!) . Результат будет зависеть от того, какое именно значение будет перед двойным восклицательным знаком.

//Некое значение в true
console.log(!!true); // true 
console.log(!!3 );// true 
console.log(!![]); // true 
console.log(!![1,2,3]); // true 
console.log(!!{}); // true 
console.log(!!{name: 'Terry Robinson', age: 23}); // true 
console.log(!!"Строка"); // true 
//Некое значение в false 
console.log(!!false); // false 
console.log(!!0); // false 
console.log(!!""); // false
console.log(!!undefined); // false
console.log(!!null); // false

//Некое значение в true

console.log(!!true); // true

console.log(!!3 );// true

console.log(!![]); // true

console.log(!![1,2,3]); // true

console.log(!!{}); // true

console.log(!!{name: 'Terry Robinson', age: 23}); // true

console.log(!!"Строка"); // true

//Некое значение в false

console.log(!!false); // false

console.log(!!0); // false

console.log(!!""); // false

console.log(!!undefined); // false

console.log(!!null); // false

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

Сложение и вычитание true/ false

Интересный вариант получается в результате сложения или вычитания логических типов true/ false в выражениях:

console.log(4+true); //5
console.log(10-true); //9
console.log(7+false); //7
console.log(true+false); //1
console.log(true-false); //1
console.log('Соль'-true);  //NaN = Not a Number
console.log('Соль'-false); //NaN = Not a Number
console.log('Соль'+true);  //Сольtrue
console.log('Соль'+false); //Сольfalse

console.log(4+true); //5

console.log(10-true); //9

console.log(7+false); //7

console.log(true+false); //1

console.log(true-false); //1

console.log('Соль'-true); //NaN = Not a Number

console.log('Соль'-false); //NaN = Not a Number

console.log('Соль'+true); //Сольtrue

console.log('Соль'+false); //Сольfalse

В большинстве случаев true преобразуется в 1, а false - в 0. Исключение: сложение со строкой приводит к склеиванию строки и соответствующего значения, а вычитание, как и с числами - к результату в виде NaN (Not a Number).

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

Возможно, вам понадобится не только складывать числа, но и превращать их в строки. Самым простым способом является склеивание числа со строкой.

Способ 1. Конкатенация (склеивание) с пустой строкой

Способ в какой-то степени похож на использование унарного плюса для преобразование строки в число. Только теперь вам нужно поставить перед плюсом пустую строку, которая представляет собой 2 кавычки рядом:

var num = 12.5;
var str = ''+12.5;
alert(str+', typeof '+(typeof str));

var num = 12.5;

var str = ''+12.5;

alert(str+', typeof '+(typeof str));

В принципе, при добавлении любой строки к числу с помощью оператора "+" превратит число в строку, но в этом случае вы увидите символы до или после числа.

Способ 2. Использование объекта String()

Как и в случае с объектом Number, число или переменную, в которую оно было занесено, нужно поместить внутрь скобок конструктора String:

console.log(typeof String(745.34));

1	console.log(typeof String(745.34));

Способ 3. Использование метода toString()

У числового класса Number есть метод toString(), который позволяет преобразовать число в строку. При использовании метода toString() без параметра в скобках число будет преобразовано в строку, как есть. Если же вы укажите параметр в виде целого числа от 2 до 36, то метод вернет строку в соответствующей системе счисления.

Код ниже представляет число 255 в 10-тичной, 16-ричной и двоичной системах счисления.

var num = 255;
var str = num.toString();
var str16 = num.toString(16);
var str2 = num.toString(2);
alert("str = "+str+", typeof "+(typeof str)+
"\nstr16 = "+str16+", typeof "+(typeof str16)+
"\nstr2 = "+str2+", typeof "+(typeof str2));
//выведет
// 255 typeof string
// ff typeof string
// 11111111 typeof string

var num = 255;

var str = num.toString();

var str16 = num.toString(16);

var str2 = num.toString(2);

alert("str = "+str+", typeof "+(typeof str)+

"\nstr16 = "+str16+", typeof "+(typeof str16)+

"\nstr2 = "+str2+", typeof "+(typeof str2));

//выведет

// 255 typeof string

// ff typeof string

// 11111111 typeof string

Почитать о методе Number.toString()

Объект (класс) Number имеет еще ряд методов, которые позволяют различным образом выводить числа, округляя их при этом и возвращая строковое значение. Это методы toFixed(), toExponential() и toPrecision().

Способ 4. Использование метода toFixed()

Метод toFixed() предназначен для форматирования числа с фиксированной запятой. Т.е. вы можете указать в качестве параметра в круглых скобках количество знаков после запятой. Метод toFixed() не только сократит количество знаков после запятой, но и округлит значение числа. И, поскольку мы рассматриваем перевод числа в строку, метод toFixed() вернет в результате строку. Это может быть удобным при перерасчете каких-либо сумм в корзине и выводе конечного значения.

var num = 67.893704;
var num1 = num.toFixed();
var num2 = num.toFixed(1);
var num3 = num.toFixed(2);
alert("num1 = "+num1+", typeof "+(typeof num1)+"\nnum2 = "+num2+
", typeof "+(typeof num2)+"\nnum3 = "+num3+", typeof "+(typeof num3));
//выведет
//68 typeof string
//67.89 typeof string
//67.89 typeof string

var num = 67.893704;

var num1 = num.toFixed();

var num2 = num.toFixed(1);

var num3 = num.toFixed(2);

alert("num1 = "+num1+", typeof "+(typeof num1)+"\nnum2 = "+num2+

", typeof "+(typeof num2)+"\nnum3 = "+num3+", typeof "+(typeof num3));

//выведет

//68 typeof string

//67.89 typeof string

Еще примеры

Способ 5. Использование метода toExponential()

Для больших цифр можно использовать метод toExponential(), который возвращает строку в экспоненциальной записи. Этот метод также способен округлять числа до ближайшего большего.

var num = 9067983000;
var num1 = num.toExponential();
var num2= num.toExponential(2);
var num3 = num.toExponential(4);
alert("num1 = "+num1+", typeof "+(typeof num1)+
"\nnum2 = "+num2+", typeof "+(typeof num2)+
"\nnum3 = "+num3+", typeof "+(typeof num3));
//выведет 
//9.067983e+9 typeof string
//9.07e+9 typeof string
//9.0680e+9 typeof string

var num = 9067983000;

var num1 = num.toExponential();

var num2= num.toExponential(2);

var num3 = num.toExponential(4);

alert("num1 = "+num1+", typeof "+(typeof num1)+

"\nnum2 = "+num2+", typeof "+(typeof num2)+

"\nnum3 = "+num3+", typeof "+(typeof num3));

//выведет

//9.067983e+9 typeof string

//9.07e+9 typeof string

//9.0680e+9 typeof string

Способ 6. Использование метода toPrecision()

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

var num = 0.041754;
var num1 = num.toPrecision();
var num2= num.toPrecision(2);
var num3 = num.toPrecision(3);
alert("num1 = "+num1+", typeof "+(typeof num1)+
"\nnum2 = "+num2+", typeof "+(typeof num2)+"\nnum3 = "+
num3+", typeof "+(typeof num3));
//выведет
//0.041754, typeof string
//0.042, typeof string
//0.0418, typeof string

var num = 0.041754;

var num1 = num.toPrecision();

var num2= num.toPrecision(2);

var num3 = num.toPrecision(3);

alert("num1 = "+num1+", typeof "+(typeof num1)+

"\nnum2 = "+num2+", typeof "+(typeof num2)+"\nnum3 = "+

num3+", typeof "+(typeof num3));

//выведет

//0.041754, typeof string

//0.042, typeof string

//0.0418, typeof string

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

В этой статье рассмотрены варианты явного преобразования типов данных (или type casting), когда вы специально предпринимаете некие действия, чтобы сделать строку числом или наоборот. Однако в JavaScript есть еще неявное преобразование, когда вы используете оператор сравнения в виде 2-х знаков "равно" (==) , когда сравниваются данные без учете их типов и происходит преобразование данных для сравнения их значений. Можно посмотреть таблицу по ссылке или ниже:
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="lazy lazy-hidden mce_SELRES_start"></span>

3 комментария

Павлюченко Сергей 13 октября, 2019
Еще как вариант для преобразования из строки в числовое значение можно умножить строку на 1:
str=str*1;
Но этот метод стоит проверить)
Ответить
- Админ 19 января, 2020
  Спасибо. Добавлено в статью.
  Ответить
Игорь 29 декабря, 2018
Сколько, оказывается, есть способов для преобразования.
Не знал про тильду.
И toFixed() не использовал.
Ответить

Автоматическое преобразование типов данных в JavaScript

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

Сумма чисел

Действия над числами

Способ 1. Метод Number()

Способ 2. Методы parseInt() и parseFloat()

Способ 3. Унарный плюс

Способ 4. Умножение/деление на единицу

Способ 5. Побитовые операторы.

Двойная тильда ~~. Побитовое НЕ

Побитовое ИЛИ |

Преобразование любого значения в логическое (Boolean)

Сложение и вычитание true/ false

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

Способ 1. Конкатенация (склеивание) с пустой строкой

Способ 2. Использование объекта String()

Способ 3. Использование метода toString()

Способ 4. Использование метода toFixed()

Способ 5. Использование метода toExponential()

Способ 6. Использование метода toPrecision()

Вам может понравиться

Замена галереи Fancybox на чистом JavaScript

Использование в JavaScript методов bind(), call(), apply()

Способы добавления плавной прокрутки страницы в CSS и JavaScript

3 комментария

Добавить комментарий Отменить ответ