dreemius@gmail.com

9 Ноя 2016

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

 

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

В ручную:

С помощью функции String():

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"

 

Автоматически:

При выводе в консоль или alert, а так же при innerHTML:

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()

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()

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».
Переходите по ссылке под статьей прямо сейчас!