В большинстве случаев JavaScript автоматически преобразует значения из одного типа данных в другой при использовании в выражении. Например, в математических операциях значения автоматически преобразуются в числа. Тем не менее, в конечном результате вы можете получить не всегда то, что ожидаете:

alert("3" - 2);  // Выводит: 1 
alert("3" + 2);  // Выводит: "32" (потому что + также оператор конкатенации)
alert(3 + "2");  // Выводит: "32"
alert("3" * "2");  // Выводит: 6
alert("10" / "2");  // Выводит: 5
alert(1 + true);  // Выводит: 2 (потому что true преобразуется в 1)
alert(1 + false);  // Выводит: 1 (потому что false преобразуется в 0)
alert(1 + undefined);  // Выводит: NaN
alert(3 + null);  // Выводит: 3 (потому что null преобразуется в 0)
alert("3" + null);  // Выводит: "3null"
alert(true + null);  // Выводит: 1
alert(true + undefined);  // Выводит: NaN

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

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

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

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

var str = "123";
alert(typeof str); // Outputs: string

var num = Number(str); // Becomes a number 123
alert(typeof num); // Outputs: number

Если строка не является допустимым числом, результат будет NaN. Пустые строки конвертируются в 0.

Number("10.5")  // Возвращает 10.5
Number(true)  // Возвращает 1
Number(false)  // Возвращает 0
Number(null)  // Возвращает 0
Number(" 123 ")  // Возвращает 123
Number(" ")  // Возвращает 0
Number("")  // Возвращает 0
Number("123e-1")  // Возвращает 12.3
Number("0xFF") // Возвращает 255 (шестнадцатеричное представление)
Number("undefined")  // Возвращает NaN
Number("null")  // Возвращает NaN
Number("Hello World!")  // Возвращает NaN

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

Точно так же вы можете использовать метод String() для преобразования значения в строку.

В следующем примере показано, как преобразовать логическое значение в строку.

var bool = true;
alert(typeof bool); // Выводит: boolean

var str = String(bool); // Становится строкой "true"
alert(typeof str); // Выводит: string

Метод String() может использоваться с любыми типами чисел, переменных или выражений:

String(10.5)  // Возвращает "10.5"
String(123)  // Возвращает "123"
String(100 + 23)  // Возвращает "123"
String(true)  // Возвращает "true"
String(false)  // Возвращает "false"
String(123e-1)  // Возвращает "12.3"
String(0xFF) // Возвращает "255"
String(undefined)  // Возвращает "undefined"
String(null)  // Возвращает "null"

Другой метод преобразования чисел в строки — использование метода toString():

var num = 123;
alert(typeof num); // Выводит: number

var str = num.toString(); // Становится строкой "123"
alert(typeof str); // Выводит: string

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

Булевы преобразования также довольно просты. Вы можете использовать метод Boolean() для преобразования любого значения в логическое значение (т. е. true или false).

Значения, которые являются интуитивно пустыми, например 0, null, false, undefined, NaN или пустая строка (""), становятся false. Другие значения становятся true, как показано в примере здесь:

Boolean(0) // Возвращает false
Boolean(null)  // Возвращает false
Boolean(false)  // Возвращает false
Boolean(undefined)  // Возвращает false
Boolean(NaN)  // Возвращает false
Boolean("") // Возвращает false
Boolean("0") // Возвращает true
Boolean(1) // Возвращает true
Boolean(true) // Возвращает true
Boolean("false") // Возвращает true
Boolean("Hello World!") // Возвращает true
Boolean(" ") // Возвращает true

Если вы внимательно посмотрите пример, вы обнаружите, что метод Boolean() возвращает true для строки с нулем «0» и строку «false», тогда как он возвращает false для значений 0 и false.

В некоторых языках программирования (а именно в PHP) строка «0» считается false. Но в JavaScript непустая строка всегда true.

Преобразование объекта в примитивное значение

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

JavaScript автоматически выполняет преобразование объекта в строку, когда мы пытаемся распечатать такой объект, как alert(obj) или document.write(obj). Аналогично, преобразования объекта в число автоматически выполняются, когда мы пытаемся добавить или вычесть объекты или применить математические функции, например, добавить или вычесть объекты даты. Вот пример:

var date1 = new Date(2018, 5, 24);
alert(date1); // Отображает строку даты как: Sun Jun 24 2018 00:00:00

var date2 = new Date(2025, 8, 15);
var time = date2 - date1;
alert(time) // Отображает строку в миллисекундах: 228096000000

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

var arr = [1, 2, 3];
arr.toString(); // Возвращает "1,2,3"

var d = new Date(2018, 5, 24);
d.toDateString(); // Возвращает дату Sun Jun 24 2018 00:00:00
d.valueOf(); // Возвращает 1529778600000

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

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

Некоторые операторы JavaScript, такие как операторы + и - также могут использоваться для преобразования типов, как показано в следующем примере:

var x = "10"; // x это стока
var y = +x;
alert(typeof(y)); // Выводит: number
alert(y); // Выводит: 10

var x = 10; // x это число
var y = x + "";
alert(typeof(y)); // Выводит: string
alert(y); // Выводит: 10

var x = "15"; // x это стока
var y = x - 0;
alert(typeof(y)); // Выводит: number
alert(y); // Выводит: 15

var x = "123";
alert(typeof(!!x)); // Выводит: boolean
alert(!!x); // Выводит: true

var x = "Hello World!";
var y = +x;
alert(typeof(y));// Выводит: number
alert(y); // Выводит: NaN

Мы надеемся, что вы поняли основы преобразования типов данных. Подробнее см. Руководство по типам данных в JavaScript, чтобы узнать больше о различных типах данных, доступных в JavaScript.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.