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

Преобразование типов это процесс конвертации значения из одного типа в другой (например, строки в число, объекта к булеву значению и т.д.).

Любой тип, будь то примитив или объект, может быть преобразован в другой тип.

В JavaScript есть 3 типа преобразования:

Строковое:
- явное - функции String(value), value.toString();
- неявное - конкатенация со строкой (с помощью бинарного + ), функция alert.
Числовое:
1. явное - функция Number(value);
2. неявное:
  - арифметические операции (кроме бинарного +);
  - нестрогое сравнение разных типов (==, включая !=);
  - унарный оператор + (например, +’58’, +true и т.п.).
Логические (булевы) преобразования:
- явное - функция Boolean(value) (например, Boolean(‘test me’) вернет true);
- неявное:
  1. в логическом контексте if (val) { … } или
  2. при применении логических операторов (||, &&, !).

Унарный и бинарный операторы

Унарным называется оператор, который применяется к одному операнду. Например, оператор унарный минус "-" - это оператор отрицания, который меняет знак числа на противоположный:

let x = 1;
x = -x;
console.log( x ); // -1

let x = 1;

x = -x;

console.log( x ); // -1

Бинарным называется оператор, который применяется к двум операндам. Например, бинарная форма минуса (арифметическое действие с двумя числами):

let x = 1, 
    y = 3;
console.log( y - x ); // 2, бинарный минус вычитает из одного числа другое

let x = 1,

y = 3;

console.log( y - x ); // 2, бинарный минус вычитает из одного числа другое

[свернуть]

Строковое преобразование в JavaScript

Строковое преобразование:

явное:
- функция String(value);
- метод toString();
неявное:
- конкатенация со строкой (с помощью бинарного + );
- функция alert, метод toFixed() и т.п.

Особенности строкового преобразования:

стандартное строковое представление пользовательского объекта - строка "[object Object]";
если в объекте явно присутствует метод toString, который возвращает примитив, то он используется для преобразования;
метод toString для функции выводит её код.

Примеры строкового преобразования:

// Из двух переменных a=20 и b=16 получить переменную string, в которой будет содержаться текст “2016”
let a = 20;
let b = 16;

// Вариант 1 (методом toString)
let string_3 = a.toString()+b.toString(); 

// Вариант 2 (конкатенация со строкой)
let string_3 = a + "" + b;

console.log(string_3, typeof string_3); // 2016 string

// Из двух переменных a=20 и b=16 получить переменную string, в которой будет содержаться текст “2016”

let a = 20;

let b = 16;

// Вариант 1 (методом toString)

let string_3 = a.toString()+b.toString();

// Вариант 2 (конкатенация со строкой)

let string_3 = a + "" + b;

console.log(string_3, typeof string_3); // 2016 string

Еще примеры

String(123); // '123'
String(-123); // '-123'
String(null); // 'null'
String(undefined); // 'undefined'
String(true); // 'true'
String(false); // 'false'

String(123); // '123'

String(-123); // '-123'

String(null); // 'null'

String(undefined); // 'undefined'

String(true); // 'true'

String(false); // 'false'

[свернуть]

Использование для строкового преобразования объектов метода toString

Если в объекте явно присутствует метод toString, который возвращает примитив, то именно он используется для преобразования (а не возвращает строку "[object Object]").

var user = {
  firstName: 'Alex', 
  toString: function() { 
    return 'Пользователь ' + this.firstName; 
  } 
};
 
console.log(obj.toString()); // Пользователь Alex
console.log(String(obj)); // Пользователь Alex

var user = {

firstName: 'Alex',

toString: function() {

return 'Пользователь ' + this.firstName;

}

};

console.log(obj.toString()); // Пользователь Alex

console.log(String(obj)); // Пользователь Alex

Результатом toString может быть любой примитив.

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

// toString возвращает строку
var obj = { toString() { return "200" } }

console.log(obj +  1)  // '2001'
console.log(obj + 'a') // '200a'

// toString возвращает число

var obj = { toString() { return 200 } }

console.log(obj +  1)  //  201
console.log(obj + 'a') // '200a'

// toString возвращает строку

var obj = { toString() { return "200" } }

console.log(obj + 1) // '2001'

console.log(obj + 'a') // '200a'

// toString возвращает число

var obj = { toString() { return 200 } }

console.log(obj + 1) // 201

console.log(obj + 'a') // '200a'

Поэтому мы и называем его «строковое преобразование», а не «преобразование к строке».

[свернуть]

Числовое преобразование в JavaScript

Числовое преобразование:

1. явное: функция Number(value);
2. неявное:
  - арифметические операции (кроме бинарного +);
  - нестрогое сравнение разных типов (==, включая !=);
  - унарный оператор + (например, +’58’, +true и т.п.);
  - функции parseInt и parseFloat.

Подробнее обо всех операторах JavaScriptпо ссылке https://developer.mozilla.org

Особенности числового преобразования:

true → 1;
false → 0;
undefined → NaN;
null → 0 (см. исключения);
“text” → NaN;
"" (пустая строка) → 0;
null == undefined.

Исключения: NaN не равен ничему, даже самому себе. Оператор == обычно вызывает преобразование в число, но это не так в случае со значением null.

Оператор унарный плюс + - быстрейший и предпочитаемый способ конвертирования чего-либо в число потому, что он не выполняет каких-либо операций с числом. Он может конвертировать строковые представления целых и чисел с плавающей точкой, а также нестроковые значения true, false и null. Поддерживаются числа в десятичном и шестнадцатиричном (с префиксом "0x") формате. Отрицательные числа тоже поддерживаются (но не 16-ричные). Если он не может вычислить конкретное значение, вернет NaN.

Примеры числового преобразования:

Number(123); // 123
Number("12"); // 12
Number("-12.34"); // -12.34
Number("12s"); // NaN
Number(true); // 1
Number(false); // 0
Number(undefined); // NaN
Number(null); // 0
Number("\n"); // 0

Number(123); // 123

Number("12"); // 12

Number("-12.34"); // -12.34

Number("12s"); // NaN

Number(true); // 1

Number(false); // 0

Number(undefined); // NaN

Number(null); // 0

Number("\n"); // 0

// Неявное преобразование
typeof +"123"; 
123 != "456"; 
4 > "5"; 
5 / null; 
true | 0; // побитовое ИЛИ

// Функция parseInt возвращает целое число, а parseFloat возвращает число с плавающей точкой
// символы, не являющиеся цифрами, отсекаются (но только не в начале строки!)
parseInt("200px"); // 200 (для целых чисел)
parseFloat("200.456px"); // 200.456 (для дробных чисел)

// Неявное преобразование

typeof +"123";

123 != "456";

4 > "5";

5 / null;

true | 0; // побитовое ИЛИ

// Функция parseInt возвращает целое число, а parseFloat возвращает число с плавающей точкой

// символы, не являющиеся цифрами, отсекаются (но только не в начале строки!)

parseInt("200px"); // 200 (для целых чисел)

parseFloat("200.456px"); // 200.456 (для дробных чисел)

Булево (логическое) преобразование в JavaScript

явное - функция Boolean(value) ;
неявное:
1. в логическом контексте if (val) { … } или
2. при применении логических операторов ( || , && , ! ) (приводят значение операндов к логическому типу, но возвращают исходные операнды , которые могут иметь тип, отличный от логического).

Особенности булева преобразования:

1. Boolean("", null, undefined, NaN, false, 0, -0) → false;
2. Boolean(2016, ‘string’, {}, [], любой объект или массив, даже пустые) → true.

Замечание: Boolean можно заменить двойным отрицанием - !!, которое также преобразует значения к логическому типу:

alert( !!"non-empty string" ); // true
alert( !!null ); // false

1 2	alert( !!"non-empty string" ); // true alert( !!null ); // false

Подробнее о логических операторах

Логические операторы ( || , && , ! ) обычно используются с булевыми (логическими) значениями, при этом возвращаемое ими значение также является булевым.

Операторы && (И) и || (ИЛИ) фактически возвращают значение одного из операндов, поэтому, если эти операторы используются с не булевыми величинами, то возвращаемая ими величина также может быть не булевой.

Оператор	Использование	Описание
Логическое И (&&)	expr1 && expr2 (Логическое И)	Возвращает операнд expr1, если он может быть преобразован в false; в противном случае возвращает операнд expr2 (находит и возвращает первое ложное значение либо последний операнд, когда все значения истинные). Таким образом, при использовании булевых величин в качестве операндов, оператор && возвращает true, если оба операнда true; в противном случае возвращает false.
Логическое ИЛИ (\|\|)	expr1 \|\| expr2 (Логическое ИЛИ)	Возвращает операнд expr1, если он может быть преобразован в true; в противном случае возвращает операнд expr2 (находит и возвращает первое истинное значение). Таким образом, при использовании булевых величин в качестве операндов, оператор \|\| возвращает true, если один из операндов true; если же оба false, то возвращает false.
Логическое НЕ (!)	!expr (Логическое НЕ)	Возвращает false, если операнд может быть преобразован в true; в противном случае возвращает true.

Использование оператора || (ИЛИ) для задания значений по умолчанию:

let userAge = {
  age: null,
  setAge(age) {
    this.age = age || 10;
  },
};

userAge.setAge(); // не передаем аргументы в метод
console.log(userAge.age); // 10

userAge.setAge(25); 
console.log(userAge.age); // 25

let userAge = {

age: null,

setAge(age) {

this.age = age || 10;

};

userAge.setAge(); // не передаем аргументы в метод

console.log(userAge.age); // 10

userAge.setAge(25);

console.log(userAge.age); // 25

[свернуть]

Примеры

Отсюда

Следующий код демонстрирует примеры использования оператора && (логическое И).

var a1 = true && true; // t && t возвращает true
var a2 = true && false; // t && f возвращает false
var a3 = false && true; // f && t возвращает false
var a4 = false && (3 == 4); // f && f возвращает false
var a5 = "Cat" && "Dog"; // t && t возвращает Dog
var a6 = false && "Cat"; // f && t возвращает false
var a7 = "Cat" && false; // t && f возвращает false
value = "" && !null; // "" (возвращается первый операнд), так как пустая строка может быть преобразована к false

var a1 = true && true; // t && t возвращает true

var a2 = true && false; // t && f возвращает false

var a3 = false && true; // f && t возвращает false

var a4 = false && (3 == 4); // f && f возвращает false

var a5 = "Cat" && "Dog"; // t && t возвращает Dog

var a6 = false && "Cat"; // f && t возвращает false

var a7 = "Cat" && false; // t && f возвращает false

value = "" && !null; // "" (возвращается первый операнд), так как пустая строка может быть преобразована к false

Следующий код демонстрирует примеры использования оператора || (логическое ИЛИ).

var o1 = true || true; // t || t возвращает true
var o2 = false || true; // f || t возвращает true
var o3 = true || false; // t || f возвращает true
var o4 = false || (3 == 4); // f || f возвращает false
var o5 = "Cat" || "Dog"; // t || t возвращает Cat
var o6 = false || "Cat"; // f || t возвращает Cat
var o7 = "Cat" || false; // t || f возвращает Cat
value = !!"" || false; // false
value = !!"" || null; // null
value = !!" " || null; // true

var o1 = true || true; // t || t возвращает true

var o2 = false || true; // f || t возвращает true

var o3 = true || false; // t || f возвращает true

var o4 = false || (3 == 4); // f || f возвращает false

var o5 = "Cat" || "Dog"; // t || t возвращает Cat

var o6 = false || "Cat"; // f || t возвращает Cat

var o7 = "Cat" || false; // t || f возвращает Cat

value = !!"" || false; // false

value = !!"" || null; // null

value = !!" " || null; // true

Следующий код демонстрирует примеры использования оператора ! (логическое НЕ).

var n1 = !true; // !t возвращает false
var n2 = !false; // !f возвращает true
var n3 = !"Cat"; // !t возвращает false
value = !!"" || !null; // true

var n1 = !true; // !t возвращает false

var n2 = !false; // !f возвращает true

var n3 = !"Cat"; // !t возвращает false

value = !!"" || !null; // true

[свернуть]

Преобразования типов при сравнении примитивов

При сравнении примитивов (кроме !== и ===) сначала всё приводится к числу, а потом сравнивается:

'12' > 2; // true (12 > 2)
true < 2 // true (1 < 2)
false == 0 // true (0 == 0)

// НО!

'12' > '2'; // false (посимвольное сравнение: первый символ первой строки "1" меньше,
// чем первый символ второй строки - "2")

undefined == false // false 

null == false // false, т.к. null может равняться только null или undefined, и ничему другому
null == null // true
null == undefined // true

'12' > 2; // true (12 > 2)

true < 2 // true (1 < 2)

false == 0 // true (0 == 0)

// НО!

'12' > '2'; // false (посимвольное сравнение: первый символ первой строки "1" меньше,

// чем первый символ второй строки - "2")

undefined == false // false

null == false // false, т.к. null может равняться только null или undefined, и ничему другому

null == null // true

null == undefined // true

Преобразование сложных типов в JS

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

Алгоритм преобразования сложных типов (в общем случае):

Если входящее значение уже является примитивом, то оно возвращается без изменений.
Вызывается метод toString(), если результат вызова - примитив, то вернуть его.
Вызывается метод valueOf(), если результат вызова - примитив, то вернуть его.
Если ни один из методов не вернул примитив — вернуть ошибку TypeError.

При численном преобразовании сначала вызывается метод valueOf(), а уже затем toString().

При строковом преобразовании — сначала происходит вызов toString(), а уже потом valueOf().

Введенный разработчиком метод toString() объекта не обязан возвращать именно строку, его результат может быть любого примитивного типа (например, это может быть число).

Пример

'' + new Date // 'Thu Mar 07 2018 21:14:50 GMT+0300' (приведение к string)
+ new Date   // 1551982490848 (приведение к number)

1 2	'' + new Date // 'Thu Mar 07 2018 21:14:50 GMT+0300' (приведение к string) + new Date // 1551982490848 (приведение к number)

[свернуть]

При логическом (булевом) преобразовании любое не примитивное значение всегда приводится к true, включая пустые объекты и массивы.

Примеры:

[] + [] // "" ("" + "" - в итоге пустая строка) 
[] + [1] // "1" (""+"1") 
1 - [1] // 0 
[1] + [1] // "11" ("1" + "1") 
{} + {} // "[object Object][object Object]" 
{} - {} // NaN

[] + [] // "" ("" + "" - в итоге пустая строка)

[] + [1] // "1" (""+"1")

1 - [1] // 0

[1] + [1] // "11" ("1" + "1")

{} + {} // "[object Object][object Object]"

{} - {} // NaN

Подробнее о преобразовании типов - по ссылке . И ещё подробно тут.

Интересные задачи для понимания.

И ещё задачи с пояснениями.

Задачи

const bool = new Boolean(false); // создаем новый объект Boolean(false) - экземпляр класса
if (bool) console.log(bool); // т.к. Boolean(false) - объект, то он будет приведен к true, значит,  if(bool) // true, а консоль выведет // Boolean {false}
if (bool == false) console.log(bool); // сравнение bool=Boolean(false) с false // true, а консоль приведет объект к строке и выведет // Boolean {false}

console.log(typeof null) // object (это баг JS, фактически null — примитивное значение)

new Date(0) - 0; // 0

new Array(1)[0] + ""; // new Array(num) при вызове с единственным аргументом-числом создаёт массив данной длины, без элементов. Поэтому его нулевой элемент равен undefined, при сложении со строкой получается строка "undefined".

({})[0]; // фигурные скобки внутри круглых – это создание пустого объекта, у него нет свойства '0', т.е. значением будет undefined. 

[1] + 1; // 11 (массив вернет строку "1", далее - конкатенация)

[1, 2] + [3, 4]; // 1,23,4 (массивы вернут строковые значения с запятыми)

[] + null + 1; // null1 (массив вернет пустую строку, далее - конкатенация)

[[0]][0][0]; // 0 ([[0]] – это вложенный массив [0] внутри внешнего [ ]. Затем мы берём от него нулевой элемент, и потом ещё раз)

{} + {}; // [object Object][object Object] (используется toString, в итоге складываются строковые представления объектов)

0 || «0» && {} // {} (ИЛИ вернет "0", далее "0" && {}, который вернет второй операнд - {})

const bool = new Boolean(false); // создаем новый объект Boolean(false) - экземпляр класса

if (bool) console.log(bool); // т.к. Boolean(false) - объект, то он будет приведен к true, значит, if(bool) // true, а консоль выведет // Boolean {false}

if (bool == false) console.log(bool); // сравнение bool=Boolean(false) с false // true, а консоль приведет объект к строке и выведет // Boolean {false}

console.log(typeof null) // object (это баг JS, фактически null — примитивное значение)

new Date(0) - 0; // 0

new Array(1)[0] + ""; // new Array(num) при вызове с единственным аргументом-числом создаёт массив данной длины, без элементов. Поэтому его нулевой элемент равен undefined, при сложении со строкой получается строка "undefined".

({})[0]; // фигурные скобки внутри круглых – это создание пустого объекта, у него нет свойства '0', т.е. значением будет undefined.

[1] + 1; // 11 (массив вернет строку "1", далее - конкатенация)

[1, 2] + [3, 4]; // 1,23,4 (массивы вернут строковые значения с запятыми)

[] + null + 1; // null1 (массив вернет пустую строку, далее - конкатенация)

[[0]][0][0]; // 0 ([[0]] – это вложенный массив [0] внутри внешнего [ ]. Затем мы берём от него нулевой элемент, и потом ещё раз)

{} + {}; // [object Object][object Object] (используется toString, в итоге складываются строковые представления объектов)

0 || «0» && {} // {} (ИЛИ вернет "0", далее "0" && {}, который вернет второй операнд - {})

[свернуть]

Строковое преобразование в JavaScript

Особенности строкового преобразования:

Примеры строкового преобразования:

Числовое преобразование в JavaScript

Особенности числового преобразования:

Примеры числового преобразования:

Булево (логическое) преобразование в JavaScript

Особенности булева преобразования:

Использование оператора || (ИЛИ) для задания значений по умолчанию:

Преобразования типов при сравнении примитивов

Преобразование сложных типов в JS

Алгоритм преобразования сложных типов (в общем случае):

Подробнее о преобразовании типов - по ссылке . И ещё подробно тут.

Интересные задачи для понимания.

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