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

Оглавление

    Показать оглавление

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

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

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

  • Преобразование чисел в даты

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

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

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

Переменные JavaScript можно преобразовать в новую переменную и другой тип данных:

  • С помощью функции JavaScript

  • Автоматически самим JavaScript

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

Глобальный метод Number() преобразует переменную (или значение) в число.

Числовая строка (например, «3,14») преобразуется в число (например, 3,14).

Пустая строка (например, «») преобразуется в 0.

Нечисловая строка (например, «Джон») преобразуется в NaN (не число).

Примеры

Они преобразуют:

Number("3.14")
Number(Math.PI)
Number(" ")
Number("")

Они не будут конвертировать:

Number("99 88")
Number("John")

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The Number() Method</h2>

<p>The Number() metod converts a variable (or value) into a number:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number("3.14") + "<br>" +
Number(Math.PI) + "<br>" +
Number("    ") + "<br>" +
Number("") + "<br>" +
Number("99 88") + "<br>" +
Number("John") + "<br>";
</script>

</body>
</html>

Числовые методы

В главе «Числовые методы» вы найдете больше методов, которые можно использовать для преобразования строк в цифры:

Method

Описание

Number()

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

parseFloat()

Анализирует строку и возвращает число с плавающей запятой

parseInt()

Разбирает строку и возвращает целое число

Унарный + Оператор

Унарный оператор + можно использовать для преобразовать переменную в число:

Пример

let y = "5";     
// y is a string
let x = + y;      
// x is a number

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable or expression:</p>

<p id="demo"></p>

<script>
let y = "5";
let x = + y;
document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
</script>

</body>
</html>

Если переменную невозможно преобразовать, она все равно станет числом, но со значением NaN (Не число):

Пример

let y = "John";  
// y is a string
let x = + y;      // x is a number (NaN)

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable or expression:</p>

<p id="demo"></p>

<script>
let y = "John";
let x = + y;
document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
</script>

</body>
</html>

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

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

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

Пример

String(x)         // returns a string from a number variable x
 String(123)       // returns a string from a number literal 123
 String(100 + 23)  // returns a string from a number from an expression

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript String() Method</h2>

<p>The String() method can convert a number to a string.</p>

<p id="demo"></p>

<script>
let x = 123;
document.getElementById("demo").innerHTML =
  String(x) + "<br>" +
  String(123) + "<br>" +
  String(100 + 23);
</script>
</body>
</html>

Метод Number toString() делает то же самое.

Пример

x.toString()
(123).toString()
(100 + 23).toString()

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p>The toString() method converts a number to a string.</p>

<p id="demo"></p>

<script>
let x = 123;
document.getElementById("demo").innerHTML =
  x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>

</body>
</html>

Дополнительные методы

В главе «Числовые методы» вы найдете больше методов, которые можно использовать для преобразования чисел в струны:

toExponential()

Возвращает строку с числом, округленным и записанным в экспоненциальной записи.

toFixed()

Возвращает строку с числом, округленным и записанным с указанным количеством десятичных знаков.

toPrecision()

Возвращает строку с записанным числом указанной длины.

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

Глобальный метод Number() можно использовать для преобразования дат в цифры.

d = new Date();
Number(d)          // returns 1404568027739

Метод даты getTime() делает то же самое.

d = new Date();
d.getTime()        // returns 1404568027739

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

Глобальный метод String() может преобразовывать даты в струны.

 String(Date())  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

Метод Date toString() делает то же самое.

Пример

 Date().toString()  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

В главе «Методы дат» вы найдете больше методов, которые можно использовать для преобразования дат в струны:

getDate()

Получить день в виде числа (1-31)

getDay()

Получить номер дня недели (0-6)

getFullYear()

Получите четырехзначный год (гггг)

getHours()

Получить час (0-23)

getMilliseconds()

Получите миллисекунды (0-999)

getMinutes()

Получить минуты (0-59)

getMonth()

Получить месяц (0-11)

getSeconds()

Получите секунды (0-59)

getTime()

Получить время (миллисекунды с 1 января 1970 г.)

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

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

Number(false)     // returns 0
Number(true)      // returns 1

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

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

String(false)      // returns "false"
String(true)       // returns "true"

Логический метод toString() делает то же самое.

false.toString()   // returns "false"
  true.toString()    // returns "true"

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

Когда JavaScript пытается работать с «неправильным» типом данных, он пытается преобразовать значение в «правильный» тип.

Результат не всегда соответствует ожиданиям:

5 + null    // returns 5         because null is converted to 0
"5" + null  // returns "5null"   because null is converted to "null"
"5" + 2     // returns 
    "52"      because 2 is converted to "2"
 "5" - 2     // returns 3         because "5" is converted to 5
"5" * "2"   // returns 
    10        because "5" and "2" are 
    converted to 5 and 2

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
(5 + null) + "<br>"  +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" - 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2") + "<br>"
</script>

</body>
</html>

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

JavaScript автоматически вызывает функцию toString() переменной, когда вы пытаетесь для «вывода» объекта или переменной:

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString converts to "[object Object]"
// if myVar = [1,2,3,4]       // toString converts to "1,2,3,4"
// if myVar = new Date()      // toString converts to "Fri Jul 18 2014 09:08:55 GMT+0200"

Числа и логические значения также преобразуются, но это не очень заметно:

// if myVar = 123             // toString converts to "123"
// if myVar = true            // toString converts to "true"
// if myVar = false           // toString converts to "false"

Таблица преобразования типов JavaScript

В этой таблице показан результат преобразования различных значений JavaScript в числа, строки и логические значения:

Исходная стоимость:

false

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

0

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

"false"

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

false

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting false to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = false;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

true

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

1

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

"true"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting true to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = true;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

0

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

0

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

"0"

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

false

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the number 0 to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

1

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

1

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

"1"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the number 1 to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = 1;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

"0"

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

0

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

"0"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the string "0" to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "0";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

"000"

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

0

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

"000"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the string "000" to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "000";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

"1"

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

1

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

"1"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the string "1" to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = 1;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

NaN

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

NaN

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

"NaN"

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

false

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting NaN to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = NaN;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

Infinity

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

Infinity

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

"Infinity"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting Infinity to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = Infinity;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

-Infinity

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

-Infinity

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

"-Infinity"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting -Infinity to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = -Infinity;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

""

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

0

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

""

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

false

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting an empty string to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

"20"

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

20

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

"20"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting a numeric string to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "20";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

NaN

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

"twenty"

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

"twenty"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting a text string to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "twenty";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

[ ]

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

0

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

""

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<p>Converting an empty array to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = [];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

[20]

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

20

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

"20"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with one numeric element to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = [20];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

[10,20]

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

NaN

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

"10,20"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with two numeric elements to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = [10,20];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

["twenty"]

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

NaN

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

"twenty"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with one string element to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = ["twenty"];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

["ten","twenty"]

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

NaN

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

"ten,twenty"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with two string element to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = ["ten","twenty"];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

function(){}

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

NaN

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

"function(){}"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting a function to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
const x = function(){};
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

{ }

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

NaN

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

"[object Object]"

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

true

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting an object to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
const x = {};
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

null

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

0

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

"null"

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

false

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting null to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = null;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Исходная стоимость:

undefined

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

NaN

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

"undefined"

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

false

Попробуйте →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting undefined to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = undefined;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Значения в кавычках обозначают строковые значения.

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