Преобразование типов данных в JavaScript
Как известно в js нет строгой типизации.
Это означает, что в определенных случаях, данные одного типа могут быть преобразованы в другой тип автоматически. Кому то это нравиться, кому то нет. Лично я считаю что это удобно. Ведь, на самом деле, большинство преобразований достаточно очевидны. Хотя попадаются и исключения.
В этой статье мы коротко рассмотрим преобразование примитивных типов данных друг в друга.
Это Number, String, Boolean, null, undefined. Сами типы данных мы рассматривать не будем. Так что если вы с ними не знакомы, рекомендую сначала разобраться с самими типами и только потом переходить к их преобразованию.
Оригинальное значение | Преобразовано в Number | Преобразовано в String | Преобразовано в Boolean |
---|---|---|---|
false | 0 | «false» | false |
true | 1 | «true» | true |
0 | 0 | «0» | false |
1 | 1 | «1» | true |
«0» | 0 | «0» | true |
«1» | 1 | «1» | true |
NaN | NaN | «NaN» | false |
Infinity | Infinity | «Infinity» | true |
«» | 0 | «» | false |
«17» | 17 | «17» | true |
«test» | NaN | «test» | true |
[ ] | 0 | «» | true |
[17] | 17 | «17» | true |
[17,18] | NaN | «17,18» | true |
[«test»] | NaN | «test» | true |
{ } | NaN | «[object Object]» | true |
{ key: «test» } | NaN | «[object Object]» | true |
function(){} | NaN | «function(){}» | true |
null | 0 | «null» | false |
undefined | NaN | «undefined» | false |
Преобразование к строке:
В ручную:
var a = String(15); // "15"
var b = String(true); // "true"
var c = String(null); // "null"
var d = String(undefined);// "undefined"
С помощью метода toString(), только для Number и Boolean:
var a = (15).toString(); // "15"
var b = (true).toString(); // "true"
Автоматически:
var status = true;
console.log(status); // "true"
document.getElementById("container").innerHTML = status; // "true"
При сложении через бинарный плюс:
Если хотя бы один операнд (элемент) выражения является строкой, то и второй будет преобразован к строке:
"test" + 15 //"test15"
"test" + true //"testtrue"
"test" + null //"testnull"
"test" + undefined //"testundefined"
"" + 15 //"15"
"" + true //"true"
"" + null //"null"
"" + undefined //"undefined"
Преобразование к числу:
В ручную:
Number("5") // 5
Number("a5") // NaN (не удалось распарсить число)
Number("5a") // NaN (не удалось распарсить число)
Number(true) // 1
Number(false) // 0
Number(null) // 0
Number(undefined) // NaN
С помощью оператора унарный +
5 + "5" // "55" (произошло приведение к строке)
5 + +"5" // 10
+"true" // NaN
+true // 1
+false // 0
+"test" // NaN
+null // 0
+undefined // NaN
С помощью функции parseInt()
parseInt("test", 10) // NaN
parseInt(true, 10) // NaN
parseInt(null, 10) // NaN
parseInt(undefined, 10) // NaN
parseInt("12a34", 10) // 12
parseInt("1234", 10) // 1234
parseInt("a1234", 10) // NaN
Автоматически:
"2" < 5 // true
"2" > 5 // false
"2" * 5 // 10
true > 0 // true (true преобразуется к 1)
true * 5 // 5
false * 5 // 0 (false преобразуется к 0)// обратите внимание
"2" + 5 // "25"
"2" === 2 // false (разные типы данных)// undefined приводится к NaN (не число) по этому все сравнения не срабатывают
undefined > 0 // false
undefined < 0 // false
undefined <= 0 // false
undefined >= 0 // false
Null стоит рассмотреть отдельно. При сравнении больше/меньше кажется что null равен нулю. Но прямое сравнение показывает что null нулю НЕ равен. Этот случай является исключением, и его надо учитывать при сравнении различных величин с null.
null < 2 // true
null > 2 // false
null < 0 //
false null > 0 // false
null == 0 // false (как это возможно???)
null <= 0 //true null >= 0 //true
При операциях не строгого равенства (через двойное равно)
true == 1 // true
true == 2 // false
"a" == 2 // false
"2" == 2 // true
"2a" == 2 // false
"a2" == 2 // false
undefined == 0 // false
null == 0 // false (это исключение было рассмотрено выше)
// обратите внимание
"2" === 2 // false (разные типы данных)
Преобразование к логическому типу:
В ручную:
Boolean("text") // true
Boolean("false") // true
Boolean("0") // true
Boolean("1") // true
Boolean("") // false
Boolean(1) // true
Boolean(0) // false
Boolean(-5) // true
Boolean(5) // true
Boolean(null) // false
Boolean(undefined) // false
С помощью оператора !!
!!"test" // true
!!"false" // true
!!"0" // true
!!"" // false
!!0 // false
!!1 // true
!!-15 // true
!!null // false
!!undefined // false
Автоматически:
Все выражения, находящиеся внутри оператора if, всегда приводятся к логическому типу.
Причем выражение может состоять как с одного элемента так и из многих.
Если выражение состоит из одного элемента, то следует помнить что в false интерпретируются следующие значения:
- пустая строка
- число 0
- null
- undefined
- NaN
if ("") { console.log("True"); } else { console.log("False"); } // False
if (0) { console.log("True"); } else { console.log("False"); } // False
if (null) { console.log("True"); } else { console.log("False"); } // False
if (false) { console.log("True"); } else { console.log("False"); } // False
if (NaN) { console.log("True"); } else { console.log("False"); } // False
if (undefined) { console.log("True"); } else { console.log("False" );} // False
if ("test") { console.log("True"); } else { console.log("False"); } // True
if (452) { console.log("True"); } else { console.log("False"); } // True
var status = true;
if (status) { console.log("True"); } else { console.log("False"); } // True
Если выражение составное, то работают все правила записанные выше. Здесь рассмотрим только несколько примеров.
var a = "test", b = 4;
if (a && b) { console.log("True"); } else { console.log("False"); } // True
var a = {prop: 1}, b = false;
if (a && b) { console.log("True"); } else { console.log("False"); } // False
var a = {prop: 1}, b = false;
if (a || b) { console.log("True"); } else { console.log("False"); } // True
var a = 25, b = false;
if (a > b) { console.log("True"); } else { console.log("False"); } // True
var msg = "done";
if (status == "done") { console.log("True"); } else { console.log("False"); } // True
var result = false;
if (result) { console.log("True"); } else { console.log("False"); } // False
var statusCode = 115;
if (statusCode != 0 && statusCode == 115) { console.log("True"); } else { console.log("False"); } // True
В примерах оператор if записан в одну строку. Такая запись была сделана для краткости. В реальной работе лучше разбивать условный оператор на несколько строк.
Верю, статья была для вас полезной. Это только небольшая часть того? что мы изучаем на курсе «Понятный JavaScript».
Переходите по ссылке под статьей прямо сейчас!